본문 바로가기

분류 전체보기54

[Svelte] Store bindings Svelte 스토어는 컴포넌트 데이터를 관리하는 데 사용되는 강력한 도구입니다. 저장소는 읽기 전용 또는 읽기/쓰기가 가능하도록 설정할 수 있으며 컴포넌트 간에 데이터를 공유하는 데 유용합니다. 이 글에서는 쓰기 가능한 저장소를 사용하는 방법과 Svelte 컴포넌트에서 이를 활용하는 방법에 대해 설명합니다. {$greeting} $name += '!'}> Add exclamation mark! // stores.js import { writable, derived } from 'svelte/store'; export const name = writable('world'); export const greeting = derived(name, ($name) => `Hello ${$name}!`); 위 코드에.. 2024. 4. 19.
[Svelte] Custom stores 객체가 subscribe 메서드를 정확하게 구현한다면, 그 객체는 스토어(store)가 될 수 있습니다. 즉, 구현 방식에 별다른 제약이 없기 때문에 도메인 특화 로직을 포함하는 커스텀 스토어를 쉽게 만들 수 있습니다. 예를 들어, 이전 예시의 count 스토어는 increment, decrement, reset 메서드를 포함하고 set 및 update 메서드를 외부에 노출하지 않도록 만들 수 있습니다. // stores.js function createCount() { const { subscribe, set, update } = writable(0); return { subscribe, increment: () => update(n => n + 1), decrement: () => update(n =.. 2024. 4. 16.
[Svelte] Derived stores Svelte에서는 derived 함수를 사용하여 기존 스토어의 값을 기반으로 새로운 파생 스토어를 만들 수 있습니다. 파생 스토어는 기존 스토어의 변화에 따라 자동으로 업데이트됩니다. 예시: 페이지 열린 시간 계산 이전 예시의 시간 스토어 (time)를 기반으로 페이지가 열린 시간을 계산하는 파생 스토어를 만들어 보겠습니다. The time is {formatter.format($time)} This page has been open for {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'} // stores.js import { readable, derived } from 'svelte/store'; export const time = readable(new Da.. 2024. 4. 15.
[Svelte] Readable stores Svelte 스토어는 기본적으로 읽기와 쓰기가 가능하지만, 모든 상황에서 값을 직접 변경하는 것은 적절하지 않습니다. 예를 들어 마우스 위치나 사용자의 위치 정보와 같은 스토어는 외부에서 임의로 값을 설정할 수 없어야 합니다. 이러한 경우 읽기 전용 스토어를 사용할 수 있습니다. 읽기 전용 스토어 만들기 읽기 전용 스토어는 readable 함수를 사용하여 만듭니다. readable 함수는 두 가지 인수를 받습니다. 초기값 : 스토어의 초기 값입니다. 아직 값이 없다면 null 또는 undefined 를 사용할 수 있습니다. start 함수 : 스토어 구독자가 처음 연결될 때 호출되는 함수입니다. 두 가지 인수를 받습니다. set 함수: 스토어 값을 업데이트하는 함수입니다. 읽기 전용 스토어에서는 외부에서.. 2024. 4. 12.
[Svelte] Auto-subscriptions 이전 예제의 앱은 동작하지만 미묘한 버그가 있습니다. 스토어를 구독하지만 구독 해제를 하지 않습니다. 컴포넌트가 여러 번 생성 및 제거된다면 메모리 누수(memory leak)가 발생할 수 있습니다. 1. 구독 해제 함수 선언 먼저 App.svelte에서 unsubscribe 변수를 선언하여 구독 해제 함수를 저장합니다. const unsubscribe = count.subscribe((value) => { count_value = value; }); count.subscribe 메서드를 호출하면 구독 함수가 반환됩니다. 이 구독 함수를 unsubscribe 변수에 저장합니다. 2. 구독 해제 시기 unsubscribe 변수를 선언했지만, 아직 호출되지 않았습니다. 구독 해제는 컴포넌트의 라이프사이클 훅.. 2024. 4. 11.
[Svelte] Writable stores 모든 응용 프로그램 상태를 컴포넌트 계층 구조 내부에 포함시키는 것은 바람직하지 않습니다. 때로는 서로 관련이 없는 여러 컴포넌트 또는 일반 JavaScript 모듈에서 액세스해야 하는 값이 있을 수 있습니다. The count is {count_value} Svelte에서는 이러한 상황을 처리하기 위해 스토어(stores)를 사용합니다. 스토어는 간단히 말해 구독자에게 값 변경을 알릴 수 있는 subscribe 메서드를 가진 객체입니다. 예시 코드에서 App.svelte의 count는 스토어이며, count.subscribe 콜백 함수를 통해 count_value를 설정하고 있습니다. // stores.js import { writable } from 'svelte/store'; export const.. 2024. 4. 10.
반응형

티스토리툴바