Monster Slayer Game 만들기 이번엔 몬스터와 전투하며 여러 선택지 중 할 행동을 고르는 작은 게임을 만들어 보겠습니다. 어떤 일이 있었는지 보여주는 전투 기록 기능도 넣을 겁니다. 가장 중요한 것은 이 게임을 만들면서 지금까지 학습한 모든 Vue 핵심 기능을 사용하겠습니다. Interpolation, v-bind, v-on, v-model을 사용한 데이터/이벤트 바인딩 v-for를 사용해 데이터 목록 출력 v-if를 사용한 Conditional Contents 등등 배운 모든것을 활용 위 사진과 같이 나와 적의 체력, 공격, 특수공격, 회복, 항복, 전투 기록의 틀을 기반으로 Vue와 Javascript를 이용해 브라우저 기반 웹 게임을 만들어 보겠습니다. Attack 기능 체력이 감소하는..

Indexing v-for 디렉티브는 배열 내 항목을 반복 출력하는 기능 외에 다양한 데이터를 출력할 수 있습니다. 예를 들어, 배열 내 항목의 인덱스도 출력할 수 있습니다. {{ goal }} - {{ index }} 이렇게 설정하면 Goal1 - 0, Goal2 - 1 이런식으로 인덱스 번호까지 같이 출력할 수 있습니다. Object Looping 그리고 배열 외에도 루프를 걸 수 있습니다 (ex: 객체) 지금 goals는 배열이기 떄문에 배열에 loop를 걸었지만 객체에 loop를 걸 경우도 있을 겁니다. {{ value }} 위 코드에서 객체를 간단하게 HTML 내에서 선언했지만 실무라면 객체는 Javascript App으로 옮기는것이 좋습니다. v-for를 이용해서 프로퍼티에 있는 여러 값을 출..

Conditional Rendering 이번엔 컨텐츠의 조건부 렌더링에 대해 배워보겠습니다. 특정 조건을 만족할 때 페이지의 일정 부분이 렌더링 되도록 하고 컨텐츠 목록을 출력하는 방법을 알아볼겁니다. 예를 들어 강의 목표, 상품 목록 등 동적 렌더링이 필요한 부분을 작업해 볼겁니다. 그리고 목록이 늘어나면 새 항목이 렌더링 되고, 목록이 줄어들면 항목이 제거될 겁니다. 학습할 목록 렌더링 할 상품이 없을때 특정 텍스트를 표시할 수 있는 Vue 도구 데이터 목록을 출력하는 방법 Vue 내부 동작 과정의 이해와 중요한 최적화 방법 1가지 (데이터 목록을 출력할 때 사용) 구현 지금 위 페이지에선 Input에 입력값을 넣고 Add Goal을 눌러도 아무런 반응이 없는 상태입니다. 이제 해볼것은 입력값을 넣고..

만들어보기 배운것을 활용하여 만들어 볼 페이지는, 사용자로부터 입력을 받아 CSS 클래스와 인라인 스타일을 적용하여 문단을 스타일링하고, 버튼을 클릭하여 문단을 보이거나 숨기는 기능을 구현합니다. 사용자 입력을 CSS 클래스로 적용하는 기능 사용자는 요소를 통해 텍스트를 입력할 수 있습니다. 이 입력은 v-model 디렉티브를 통해 inputClass 데이터 속성과 양방향으로 바인딩됩니다. 사용자가 입력한 클래스명은 아래의 요소에 바로 적용됩니다. 즉, 사용자가 입력한 클래스를 paraClasses 계산된 속성을 통해 Vue에서 적절한 클래스로 연결합니다. 가능한 클래스는 "user1"과 "user2"입니다. 버튼을 클릭하여 문단을 보이거나 숨기는 기능 "Toggle Paragraph" 버튼을 클릭하면 ..

Dynamic Styling 이제까지 Vue의 Interpolation, v-bind를 이용한 데이터 바인딩, Computed Property나 Watch 같은 기능을 이용한 Vue의 반응성과 이벤트 바인딩에 대해 배웠습니다. 이번엔 스타일링 중에서도 동적 스타일링에 대해 배워보겠습니다. Vue에서 Dynamic Styling을 사용하면 이벤트에 따른 반응으로써 페이지 항목의 스타일을 동적으로 바꿀 수 있습니다. 예를 들어 클릭이나 사용자가 어딘가로 이동하는 경우에요. 위의 HTML div 를 클릭할 수 있고, 활성화된 div를 강조 표시해 보겠습니다. 저번에 배웠던 데이터 프로퍼티 또는 데이터 객체를 만들고 div 태그를 추적하겠습니다. Vue.createApp({ data() { return { bo..

Methods & Computed & Watch 정리 Methods Computed Watch 템플릿에서 데이터를 바인딩 하는 용도, 예를 들어 Interpolation을 위한 {{ }}을 사용하기 위함 데이터 바인딩에만 쓰임 템플릿에 직접 사용하지 않습니다. 데이터,연산 등 어떤 프로퍼티든 Watch로 감시할 수 있습니다. 이벤트 바인딩 용도 다른 데이터를 기반으로 하는 데이터를 가져오는데 유용하며 의존하는 데이터가 바뀔때만 Vue에 의해 재평가 하거나 재실행되는 장점이 있음 데이터 변경에 대한 반응을 코드로 실행할 수 있습니다. (ex: HTTP Request 보내기, Timer 설정, Local Storage에 데이터를 저장하는 작업 등 데이터 바인딩을 위한 사용에서 템플릿 -> Vue 인스턴스로 ..

Watcher 저번에 동적 값을 출력하는데 핵심 기능을 하는 Computed Property에 대해 배웠습니다. Vue에 내장된 따 다른 Advanced Reactivity가 있는데 바로 Watcher 입니다. Watcher는 기본적으로 의존성 중 하나가 변경될 때 Vue에 실행하도록 지시하는 함수입니다. Computed Property와 비슷하며, 실제로 대체해서 사용도 가능합니다. 하지만 왜 그러지 않고 분리된 건지 동작 방식을 설명하겠습니다. Watcher의 선언방법은 data나 method, computed 처럼 watch 라는 고유한 이름을 사용합니다. const app = Vue.createApp({ data() { name: '' }, methods: { ... }, watch..