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..

Transition (화면전환 효과) 1. 기본 사용법 fade = true }> fade blur = true }> blur fly = true }> fly slide = true }> slide scale = true }> scale fade 예시 blur 예시 fly 예시 slide 예시 scale 예시 2. Transition Options /** transition option delay : 지정시간 이후 효과 실행 duration : 지정시간 동안 효과 실행 easing : 샘플링된 전환 효과 example > https://svelte.dev/examples/easing docs > https://svelte.dev/docs#run-time-svelte-easing **/ 사용할 transi..

Slot이란? - 공통 레이아웃을 가진 Component에 props 데이터 이외에 마크업을 전달해서 렌더링 시켜야할 때 Slot을 사용할 수 있다. - 형태 : 1) 사용법 // Card.svelte // main.svelte import Card from './Card.svelte'; ... // Card 컴포넌트 내부 Slot에 매핑될 Html 형태의 내용을 입력한다. 안녕하세요. 반갑습니다. 2) 이름이 있는 Slot // Card.svelte //name 속성으로 slot에 이름을 지정 // main.svelte import Card from './Card.svelte'; ... // slot 속성으로 매핑할 slot name을 입력 안녕하세요. 반갑습니다. 청첩장 3) $$slots - 슬롯 ..

Store Store란 Svelte에서 상태관리(state management) 기능을 제공하는 저장소 1) 기본사용법 - 수동 구독 및 수동 리소스 해지 The count is {count_value} - 자동 구독 : subscribe(), unsubscribe()의 일련의 기능을 자동화 하는 방법으로, $ 기호 사용 시 자동으로 처리됩니다. * 주의 사항 : store 변수 정의는 + 2) store의 사용자 정의 method로 구현 // store.js import { writable } from 'svelte/store'; // read, write, delete가 가능한 store 모듈 function createCount() { const { subscribe, set, update } = ..

1. 변수선언 스벨트의 반응형 state는 기본 javascript 변수선언 명령어인 let으로 가능하며 methods로 state를 변경하여 변경된 state가 mark up 영역에 즉시 반영이 됩니다. 2. 반응성 $: vue의 computed 속성의 동작과 비슷하며, 대상의 상태 값을 감지하여 동작된다. 클릭 수 {count} {count === 1? 'time' : 'times'} {count} 두배는 {doubled} 3. Component 불러오기 // Main.svelte // 자식 컴포넌트 // 자식 컴포넌트 // 자식 컴포넌트 4. Props (단방향 binding) // Main.svelte // ChildrenComponet.svelte 클릭수 {count} 5. Component E..