SvelteKit에 사용자 기본 설정 저장

이것은 SvelteKit에서 사용자 기본 설정을 저장하는 방법에 대한 빠른 자습서입니다.

여기에는 두 가지 방법이 있습니다. 첫 번째는 인증 시스템을 구현하는 것입니다. 그러나 그것은 과잉 일 수 있으므로 다른 방법은 로컬에 저장하는 것입니다. 그것으로 가자.

그래서 이런 식으로... (코드를 단순화하기 위해 this 패키지를 사용하겠습니다)

let name : string

const saveName = () => {
    Cookie.set("name", name)
}

<input bind:value={name}/>
<button on:click={saveName}>save</button>

음, 쉬웠어요.

그러나 그것을 표시하고 싶을 때 작은 문제가 발생합니다.

onMount(() => {
    name = Cookie.get("name")
})

<p>{name}</p>

이것은 작동하지만 document가 로드될 때까지 기다려야 하므로 onMount()를 사용해야 합니다. 즉, name = undefined 페이지가 로드된 후 몇 초가 소요됩니다. 이 경우에는 큰 문제가 되지 않겠지만, 사용자의 라이트/다크 테마 선호도를 저장했다면 상당히 부정적인 UX로 이어질 것입니다. window/document 에 대한 종속성도 있기 때문에 Firebase 인증과 같은 것에 의존하는 경우에도 이런 일이 발생합니다.

이를 해결하기 위해 페이지가 완전히 로드되기 전에 서버에서 쿠키를 읽을 수 있습니다.

먼저 hooks이 있는 쿠키를 읽어 봅시다. 이handle() 함수는 SvelteKit이 요청을 받을 때마다 실행됩니다. 쿠키 구문 분석을 더 쉽게 하기 위해 cookie 패키지를 사용합니다.

import * as cookie from 'cookie';

export const handle : Handle = async ({ event, resolve }) => {
    const { name } = cookie.parse(event.request.headers.get('cookie') || '') as Partial<{ name: string }>;
    if (name) {
        event.locals = { name };
    }
    return await resolve(event)
}

다음으로 이것을 프런트엔드로 보내야 합니다. 이를 수행하는 한 가지 방법은 load 함수에서 읽을 수 있는 [session](https://kit.svelte.dev/docs/hooks#getsession) 개체를 사용하는 것입니다. [getSession()](https://kit.svelte.dev/docs/loading)를 사용하여 세션 개체를 설정할 수 있습니다. event가 핸들 함수를 처음 전달했으므로 name에 locals를 포함합니다.

export const getSession : GetSession = async (event) => {
    const { name } = event.locals as Partial<{ name: string }>;
    if (!name) return {};
    return { name };
}

마지막으로 아래와 같이 load 함수에서 session 객체를 얻을 수 있습니다.

export const load : Load = async ({ session }) => {
    const { name } = session as Partial<{ name: string }>
    return {
        props: {
            name
        }
    }
}

이것을 구현하는 간단한 내 프로젝트는 다음과 같습니다.

URL: https://niagara.vercel.app

Github: https://github.com/pilcrowOnPaper/niagara