Develop Note by J.S.

Composition API ? Vue의 버전이 3.x 버전으로 업데이트 되면서 등장한 새로운 기능입니다. 기존에 사용했던 data, methods, computed 등을 사용하는 Option API 의 경우 직관적으로 사용할 data를 작성하는 영역과, observer 역할을 하는 watch, 계산된 결과의 Cache 처리를 하는 computed, 복잡한 계산 또는 잦은 변경의 로직을 작성하는 methods 옵션이 있습니다. 하지만 해당 옵션들을 사용하다보면 한 파일 영역 내에 논리적으로 공통되지 않은 기능들이 뒤죽박죽 섞여있어 가독성이 떨어지는 문제가 있었는데요, 이에 대한 개선방안으로 Vue3.x 버전부터 Composition API 가 등장하게 됩니다. Compostion API의 주요 구성 1...

Callback이란? Callback은 비동기 로직 처리 후의 동작 될 함수를 뜻합니다. 이후 실행 할 함수를 매개 변수로 전달하여 비동기 동작이 끝난 후 실행할 수 있습니다. 아래 Callback 사용에 대한 예제입니다. function task1(a, cb) { setTimeout(() => { cb(a+1); }, 2000); } function task2(a, cb) { setTimeout(() => { cb(a+1); }, 2000); } function task3(a, cb) { setTimeout(() => { cb(a+1); }, 2000); } task1(1, (a) => { console.log("task1 : ", a); task2(a, (b) => { console.log("task..

Vue3 에서 타입지정 할 때 Vue3의 타입스크립트가 익숙치 않은 경우 타입지정이 까다롭습니다. 주로 사용하는 기능에 대한 타입 지정 방법입니다. 1. ref import { ref } from 'vue' import type { Ref } from 'vue' // 변수에 직접 type을 지정하는 case const year: Ref = ref('2020') year.value = 2020 // ok! // or //ref 함수 호출 시 제네릭으로 타입을 지정하는 case const year = ref('2020') year.value = 2020 // ok! 2. reactive import { reactive } from 'vue' interface Book { title: string year?:..