1. 상태 관리  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 모든 Vue 컴포넌트 인스턴스는 이미 자체 반응형 상태를 관리한다. 상태(State) : 앱 구동에 필요한 기본 데이터뷰(View) : 상태를 선언적으로 매핑하여 시각화기능(Actions) : 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작  이때 단방향 데이터 흐름을 가진다. 하지만 이런 상태 관리의 단순성이 무너지는 시점이 오는데… 여러 컴포넌트가 상태를 공유할 때 단순성이 무너지기 시작한다. 가. 여러 뷰가 동일한 상태에 종속된 경우 여러 뷰가 하나의 상태의 변화에 따라 복잡하게 상호작용 할 수 있다. 공유하는 상태를 공통 조상 컴포넌트로 끌어올린 ..

Vue Router v3.router.vuejs.org 시간이 없는 관계로 따로 정리하진 않지만 중요해서 따로 링크를 남긴다. 아래에 언급한 내용은 특히 중요하다.라우터 사용법중첩된 라우트프로그래밍 방식 내비게이션Navigation guard

Components Basics  Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 1. Component?  컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 단위로 분할하고 사용할 수 있다. 하나의 앱은 중첩된 컴포넌트의 트리로 구성된다. 가. Vite Vite는 기존의 복잡한 설정 없이 빠르게 Vue 프로젝트를 시작하기 위해서 사용한다.  ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev 나. vue file SFC의 파일명은 항상 PascalCase로 작성한다. (첫 단어를 대문자로 시작하는 표기법) 단, 대소문자를 구분하지 않는 파일 시스템에서는 kebab-case로 작성한다. 다. SFC 당신은 {{ count }..

Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 1. 왜 씀? Computed Properties는 getter에서 발생할 수 있는 사이드 이펙트를 방지하기 위해서 getter는 순수함수여야 한다.  앞서 Computed Propertyis를 배우면서 위와 같이 배웠다. 상태 변경에 대한 반응으로 사이드 이펙트(ex. DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우 어떻게 해야 할까? 2. watch function Composition API를 사용한다면 wathch 함수를 사용해서 반응형 속성이 변경될 때마다 함수를 실행할 수 있다. Ask a yes/no question: ..

Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 시간이 없는 관계로 따로 정리하진 않지만 중요해서 따로 링크를 남긴다. 아래 내용은 특히 중요하다. v-on directive@ symbol.prevent

1. 생명주기 각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행된다.   setup, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted 등의 Lifecycle hook이 존재한다. 이 중에서 setup, mounted, updated, unmounted 정도는 기억하고 있자. 2. Lifecycle hooks 등록하기 가장 일반적으로 사용되는 훅은 onMounted, onUpdated, onUnmounted가 있다. import { createApp, onMounted } from 'vue..

1. 배열 가. 기본 문법const items = ref([{ message: 'Foo' }, { message: 'Bar' }]) {{ item.message }}배열을 리스트로 렌더링 할 수 있습니다.  {{ index }} - {{ item.message }}현재 아이템의 index도 지원한다.  {{ item.message }} {{ childItem }} 당연히 중첩 for문도 가능하다. {{ item.msg }} 을 이용할 수도 있다. 나. Destructuring Assignment v-for는 JavaScript의 for문과 비슷하다. {{ message }} {{ index }}Destructuring Assignment(구조 분해 할당)도 사용할 수 있..