Vue

[Vue.js] Pinia

작성자:
Featured image for [Vue.js] Pinia

1. 상태 관리 Vue.js Vue.js – 프로그래시브 자바스트립트 프레임워크 모든 Vue 컴포넌트 인스턴스는 이미 자체 반응형 상태를 관리한다. 이때 단방향 데이터 흐름을 가진다. 하지만 이런 상태 관리의 단순성이 무너지는 시점이 오는데… 여러 컴포넌트가 상태를 공유할 때 단순성이 무너지기 시작한다. 가. 여러 뷰가 동일한 상태에 종속된 경우 여러 뷰가 하나의 상태의 변화에 따라 복잡하게 상호작용 할 … 더 읽기

[Vue.js] Component

작성자:
Featured image for [Vue.js] Component

  Vue.js Vue.js – The Progressive JavaScript Framework 1. Component? 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 단위로 분할하고 사용할 수 있다. 하나의 앱은 중첩된 컴포넌트의 트리로 구성된다. 가. Vite Vite는 기존의 복잡한 설정 없이 빠르게 Vue 프로젝트를 시작하기 위해서 사용한다. 시작하기 Vite, 프런트엔드 개발의 새로운 기준 나. vue file SFC의 파일명은 항상 PascalCase로 작성한다. (첫 … 더 읽기

[Vue.js] Watchers

작성자:
Featured image for [Vue.js] Watchers

Vue.js Vue.js – The Progressive JavaScript Framework 1. 왜 씀? Computed Properties는 getter에서 발생할 수 있는 사이드 이펙트를 방지하기 위해서 getter는 순수함수여야 한다. 앞서 Computed Propertyis를 배우면서 위와 같이 배웠다. 상태 변경에 대한 반응으로 사이드 이펙트(ex. DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)를 수행해야 하는 경우 어떻게 해야 할까? 2. watch function … 더 읽기

[Vue.js] Lifecycle Hooks

작성자:
Featured image for [Vue.js] Lifecycle Hooks

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가 있다.

[Vue.js] 리스트 렌더링

작성자:
Featured image for [Vue.js] 리스트 렌더링

  1. 배열 가. 기본 문법 배열을 리스트로 렌더링 할 수 있습니다. 현재 아이템의 index도 지원한다. 당연히 중첩 for문도 가능하다. <template>을 이용할 수도 있다. 나. Destructuring Assignment v-for는 JavaScript의 for문과 비슷하다. Destructuring Assignment(구조 분해 할당)도 사용할 수 있다. 2. 객체 v-for는 객체의 속성을 반복하는 데 사용할 수도 있다. index와 마찬가지로 key는 선택적으로 사용할 수 있다. … 더 읽기