하수도키의 성장일기

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 3(Modularzing, LifeCycle Hooks, Watch)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Modularizing(모듈) Lifecycle Hooks(라이프사이클 훅) Watch Modularizing(모듈) Composition API 사용하는 이유는 기능별로 구분, 코드 재활용이다. 모듈을 통해 구현해보자. 현재 코드는 아래와 같다. ... 컴포지션 함수로 빼기(Extracting into a Composition Function) ... useEventSapce() 함수를 exrpot default {} 외부에 작성하고 분리했다. 그 함수를 setup() 내부에서 사용한다. 이제 컴포지션 함수를 파..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 2(Methods, Computed, The Reactive Syntax)

Vue3 Composition API에 대해 알아보자 - 2 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Methods Computed Properties The Reactive Syntax Methods 메서드는 Vue 인스턴스에서 사용된다.(함수라고 생각하면 된다.) 아래 코드에서 capacity를 1씩 증가시키는 메서드를 만들어보자. Capacity: {{ capacity }} vue2에서 메서드 사용은 아래 코드와 같다.(data()사용했을시) methods: { increase_capacity() { this.capacity++; } } vue3에서는 setup 메서드 안에서 만든 다음 return 내..

개발일기/Vue.js

[Vue.js] Vue 3 Reactivity (#1)

[Vue.js] Vue 3 Reactivity (#1) 개요 이 문서는 www.vuemastery.com 에 Vue 3 Reactivity 를 보고 정리했습니다. Vue3가 드디어 릴리즈가 되었다. 아직 베타인것 같지만... Vue3 Reactivity System(반응형)에 대해 알아보자. 이걸 알면 좋은 점은?? Vue 내부 디자인 패턴 이해 Vue 디버깅 스킬 향상 Vue3 modularzied 반응형 라이브러리 사용 Vue3 소스 코드에 기여 가능 어마어마한 혜택들이 있다. 반응형(Reactivity) 이해하기 Vue 반응형은 정말 매직과 같다. 아래 코드로 어떻게 작동하는지 살펴보자. Price: ${{ product.price }} Total: ${{ product.price * product..