[supabase 번역] Supabase와 SvelteKit 함께 사용하기 (Use Supabase with SvelteKit)

출처: https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit

Supabase와 SvelteKit을 함께 사용하는 방법을 알아봅니다. Supabase 프로젝트를 생성하고, 데이터베이스에 샘플 데이터를 추가한 뒤, SvelteKit 앱에서 데이터를 쿼리하는 방법을 안내합니다.

1. Supabase 프로젝트 생성하기

database.new에 접속하여 새로운 Supabase 프로젝트를 생성하세요.

프로젝트가 준비되면 Table Editor로 이동하여 새 테이블을 만들고 데이터를 삽입합니다.

또는, 아래 SQL 스니펫을 프로젝트의 SQL Editor에서 실행할 수 있습니다. 이 코드는 instruments 테이블을 생성하고 샘플 데이터를 추가합니다.

-- 테이블 생성
create table instruments (
  id bigint primary key generated always as identity,
  name text not null
);

-- 샘플 데이터 삽입
insert into instruments (name)
values  ('violin'),
        ('viola'),
        ('cello');

alter table instruments enable row level security;

테이블 데이터를 공개적으로 읽을 수 있도록 RLS 정책 추가

create policy "public can read instruments"
on public.instruments
for select to anon
using (true);

2. SvelteKit 앱 생성하기

npm create 명령어를 사용하여 SvelteKit 앱을 생성하세요.

npx sv create my-app

3. Supabase 클라이언트 라이브러리 설치하기

가장 빠른 시작 방법은 supabase-js 클라이언트 라이브러리를 사용하는 것입니다. 이 라이브러리는 SvelteKit 앱에서 Supabase를 편리하게 사용할 수 있도록 도와줍니다.

SvelteKit 앱 디렉터리로 이동한 후, supabase-js를 설치하세요.

cd my-app && npm install @supabase/supabase-js

4. Supabase 클라이언트 생성하기

SvelteKit 앱의 src/lib 디렉터리를 만들고, supabaseClient.js 파일을 생성한 뒤 아래 코드를 추가하여 Supabase 클라이언트를 초기화하세요.

import { createClient } from '@supabase/supabase-js'
export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')

5. 앱에서 데이터 쿼리하기

서버 사이드에서 데이터를 가져오기 위해 load 메서드를 사용하세요. src/routes 디렉터리에 +page.server.js 파일을 만들고 아래 코드를 추가합니다.

import { supabase } from "$lib/supabaseClient";
export async function load() {
  const { data } = await supabase.from("instruments").select();
  return {
    instruments: data ?? [],
  };
}

src/routes/+page.svelte 파일의 기존 내용을 아래 코드로 교체하세요.

<script>
  let { data } = $props();
</script>
<ul>
  {#each data.instruments as instrument}
    <li>{instrument.name}</li>
  {/each}
</ul>

6. 앱 실행하기

앱을 실행한 뒤, 브라우저에서 http://localhost:5173로 이동하면 악기 목록이 표시됩니다.

npm run dev

다음 단계

앱에 인증(Auth) 설정하기
데이터베이스에 더 많은 데이터 삽입하기
Storage를 사용해 정적 파일 업로드 및 제공하기