Frontend/Svelte 검색 결과

13 개의 검색 결과가 있습니다.

Frontend/Svelte

[Svelte] 스벨트의 특수한 컴포넌트 (Dynamic, Recursive)

🌈 스벨트의 특수한 컴포넌트 정리 스벨트에서 제공하는 특수한 컴포넌트에는 동적(Dynamic) 컴포넌트와 재귀(Recursive) 컴포넌트 그리고 윈도우 객체를 다룰 수 있는 윈도우 컴포넌트, 교차(Cross) 컴포넌트가 있다. 1️⃣ 동적(Dynamic) 컴포넌트 분기를 통해 다른 컴포넌트를 보여주어야 할 때 스밸트의 동적 컴포넌트를 이용하여 코드를 쉽게 작성할 수 있다. Toggle Display 2️⃣ 재귀(Recursive) 컴포넌트 재귀 컴포넌트는 each문에서 트리 구조의 렌더링시 사용한다. {#each familyStructure as familyMember} {/each} 아래 코드에서 트리 구조를 표현하기 위해 each에서 재귀 컴포넌트(svelte:self)를 사용하였다. {member..

2023. 1. 22. 15:21

Frontend/Svelte

[Svelte] 스벨트 모션 사용하기(tweened, spring)

🌈 스벨트 모션 사용 방법 스벨트에서 사용할 수 있는 모션의 종류에는 tweened와 spring이 있다. 1️⃣ tweened tweened는 값이 변경될 때 적용될 애니메이션의 저장소이다. 또한, tweened는 숫자, 날짜, 숫자와 날짜를 값으로 가지는 객체와 배열에 애니메이션을 추가할 수 있다. ◾ 결과 2️⃣ Spring 예시 참고 : Svelte Tutorial :: Spring stiffness ({coords.stiffness}) damping ({coords.damping}) 3️⃣ 정리 애니메이션 저장소는 컴포넌트 전용 저장소가 합리적이다. 왜냐하면 컴포넌트 내부에 애니메이션을 적용할 값이 있을 경우 tweened나 spring 저장소에 해당 값을 저장하면 즉시 해당 애니메이션을 사용할..

2023. 1. 21. 11:13

Frontend/Svelte

[Svelte] 스벨트의 읽기 가능 스토어란? (Readable Stores)

🌈 스벨트의 읽기 가능한 스토어 (Readable Stores) 읽기 가능한 스토어는 쓰기 가능한 스토어와 달리 외부에서 값을 변경할 수 없다. 읽기 가능한 스토어의 값 변경은 오직 내부에서만 가능하다. 1️⃣ Store 생성 쓰기 가능한 스토어가 writable을 통해 생성된 것과 비슷하게 읽기 가능한 스토어는 readable을 통해 생성한다. /* timer_store.js */ import { readable } from 'svelte/store' export const timer = readable(0); 2️⃣ readable 메서드 및 스토어의 값 변경 readable은 writable 스토어와 달리 두 번째 인수를 가지며 두 번째 인수는 함수이다. 또한 이 함수는 한 개의 인수를 갖는데, 이..

2023. 1. 20. 14:32

Frontend/Svelte

[Svelte] 스벨트의 쓰기 가능 스토어란? (Writable Stores)

🌈 스벨트의 쓰기 가능한 스토어 (Writable Stores) 스벨트의 스토어에는 두 가지 종류가 있으며, 쓰기 가능한 스토어와 읽기 가능한 스토어이다. 먼저 이번 포스팅에서는 쓰기 가능한 스토어에 대해 정리해 보려고 한다. ◾ 쓰기 가능한 저장소(writable) ▫ 쓰기 가능한 저장소를 생성하려면 특정 함수를 호출해야 한다. ▫ 저장소는 javascript에서 사용하므로 어느 컴포넌트에서나 불러올 수 있다. ▫ 저장소를 불러온 컴포넌트에서는 두 가지 작업을 할 수 있다. ⅰ) subscribe - 저장소의 데이터가 바뀔 때마다 이를 전달받은 컴포넌트가 변화에 반응하는 것(ex.데이터 출력) ⅱ) set, update - 데이터를 저장소에 설정(set)하거나 업데이트(update)할 수 있다. 1️⃣..

2023. 1. 19. 21:49

Frontend/Svelte

[Svelte] 스벨트 컴포넌트 생명주기(Lifecycle) 정리

🌈 스벨트 컴포넌트 라이프사이클(Svelte Lifecycle) 1️⃣ Creation ◾ Script Executes - DOM 이 랜더링 될 때 실행/초기화 - 컴포넌트 내 프로퍼티 및 변수 지정, 함수 정의 ... ◾ onMount( ) - 데이터가 페칭될때 실행 ◾ onDestroy( ) - 컴포넌트가 DOM에서 분리될 때 실행 2️⃣ Updates ◾ beforeUpdate( ) - 업데이트가 실제 DOM에 반영되기 직전에 코드를 실행 ◾ afterUpdate( ) - Svelte가 DOM에 연결된 직후에 실행 ◾ tkck( ) - 수행할 작업을 예약한 다음 작업이 완료되면 작업 루프에서 제거 - Node.js의 이벤트 루프를 생각하면 된다. - tick을 사용하면 각각의 완료된 작업을 연결할 ..

2023. 1. 13. 14:25

Frontend/Svelte

[Svelte] 스벨트 전개(Spread) 프로퍼티와 슬롯(Slot) 사용하기

🌈 Each문에서의 Spread 프로퍼티 및 Slot 사용 방법 Svelte.js - 완벽 가이드의 [섹션 6:: 컴포넌트에 대해 자세히 알아보기] 를 수강한 후에 정리한 내용이다. 1️⃣ Spread 프로퍼티 기존에는 컴포넌트를 랜더하기 위해 each문을 쓸 때 아래와 같이 프로퍼티를 일일이 추가해 주었다. {#each products as product} {/each} 하지만 ES6의 전개연산자와 비슷하게 아래와 같은 문법을 사용함으로써 간결한 코드를 작성할 수 있다. {#each products as product} {/each} 2️⃣ Slot 상위 컴포넌트에서 하위 컴포넌트 사이에 태그를 작성하였을 때, 해당 하위 컴포넌트에서 slot태그가 존재하여야만 결과가 출력된다. 만약 slot 태그 없이..

2023. 1. 12. 15:23