일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- typeScript
- caching
- devtools
- TLS
- e2e
- vue
- rendering
- 비동기
- http3
- vue3
- JavaScript
- svelte
- SSR
- QUIC
- https
- msw
- api test
- CSS
- vue-cli
- Cypress
- import.meta.env
- csr
- ViTE
- ts error
- custom command
- aws
- Testing
- 선택자
- CloudFlare
- web vital
- Today
- Total
목록FrontEnd/Vue3 (10)
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...
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?:..