일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- svelte
- typeScript
- 선택자
- ViTE
- api test
- aws
- msw
- TLS
- custom command
- csr
- import.meta.env
- vue-cli
- http3
- JavaScript
- https
- QUIC
- vue
- vue3
- ts error
- rendering
- devtools
- Testing
- e2e
- caching
- 비동기
- Cypress
- CloudFlare
- web vital
- SSR
- CSS
- Today
- Total
목록Lifecycle (2)
Develop Note by J.S.

Lifecycle Svelte Component의 Lifecycle(생명주기)은 BeforeUpdate, onMount, afterUpdate, onDestroy 순서로 동작됩니다. 각 생명주기가 동작되는 시점에, 해당 Hook Methods 내부에서 동작시킬 코드를 정의하여 사용합니다. 1. Lifecycle Hook 1) beforeUpdate - Component 생성 최초, Mount가 실행되기 전에 먼저 실행 - 이후 Component의 변경이 감지되면 beforeUpdate -> afterUpdate 순서로 실행 - 반응성이 있는 데이터를 beforeUpdate Hook 내부에서 사용하면 무한루프에 빠질 수 있기 때문에, 사용해야 한다면 동작 조건을 필히 입력 2) onMount - Compo..

1. LifeCycle Hook 상기 이미지는 vue의 LifeCycle입니다. 기존의 Vue2에서 사용했던 LifeCylcle Hook의 사용법 또한 약간 차이점이 있습니다. 앞선 게시글에서 말씀드렸듯이, created대신 setup함수로 대체되었다는 부분 외에는 거의 비슷하지만 호출 방식의 경우 setup 함수 내에서는 composition api 방식으로 호출 할 수 도 있고, setup함수 외부에서는 기존의 option api 방식으로 LifeCycle Hook을 사용할 수 있습니다. import { onMounted, ref, reative } from 'vue' export default { setup() { const _ref = ref(3); const _reactive = reactive..