번역 자료 / / 2025. 5. 25. 17:14

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

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


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


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. refine 앱 생성하기

create refine-app 명령어를 사용하여 refine 앱을 생성하세요.

refine-supabase 프리셋을 사용하면 Supabase 연동에 필요한 패키지가 자동으로 추가됩니다.

npm create refine-app@latest -- --preset refine-supabase my-app

3. VS Code에서 refine 앱 열기

앱 개발, Supabase 백엔드 연결, 앱 실행을 위해 VS Code에서 프로젝트를 엽니다.

cd my-app
code .

4. 앱 실행하기

앱을 실행한 뒤, 브라우저에서 http://localhost:5173로 접속하면 refine Welcome 페이지가 표시됩니다.

npm run dev

5. supabaseClient 업데이트하기

src/utility/supabaseClient.ts 파일에서 SUPABASE_URLSUPABASE_KEY를 본인의 Supabase API 정보로 교체하세요. 이 클라이언트는 인증 및 데이터 제공자에서 사용됩니다.

import { createClient } from "@refinedev/supabase";
const SUPABASE_URL = YOUR_SUPABASE_URL;
const SUPABASE_KEY = YOUR_SUPABASE_KEY
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
  db: {
    schema: "public",
  },
  auth: {
    persistSession: true,
  },
});

6. instruments 리소스 및 페이지 추가하기

아래 명령어로 instruments 리소스에 대한 페이지를 자동 생성하세요. 이 명령은 src/pages/instruments/ 디렉터리에 list, create, show, edit 페이지를 생성합니다.

npm run refine create-resource instruments

<HeadlessInferencer /> 컴포넌트는 @refinedev/react-table@refinedev/react-hook-form 패키지에 의존하므로, 아래 명령어로 설치해야 합니다.

npm install @refinedev/react-table @refinedev/react-hook-form

7. instruments 페이지 라우트 추가하기

src/App.tsx에서 list, create, show, edit 페이지에 대한 라우트를 추가하세요. Welcome 페이지의 index 라우트는 제거합니다.

import { Refine, WelcomePage } from "@refinedev/core";
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
import routerBindings, {  DocumentTitleHandler,  NavigateToResource,  UnsavedChangesNotifier,} from "@refinedev/react-router-v6";
import { dataProvider, liveProvider } from "@refinedev/supabase";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import authProvider from "./authProvider";
import { supabaseClient } from "./utility";
import { InstrumentsCreate, InstrumentsEdit, InstrumentsList, InstrumentsShow } from "./pages/instruments";
function App() {
  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          dataProvider={dataProvider(supabaseClient)}
          liveProvider={liveProvider(supabaseClient)}
          authProvider={authProvider}
          routerProvider={routerBindings}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[{
            name: "instruments",
            list: "/instruments",
            create: "/instruments/create",
            edit: "/instruments/edit/:id",
            show: "/instruments/show/:id"
          }]}
        >
          <Routes>
            <Route index element={<NavigateToResource resource="instruments" />} />
            <Route path="/instruments">
              <Route index element={<InstrumentsList />} />
              <Route path="create" element={<InstrumentsCreate />} />
              <Route path="edit/:id" element={<InstrumentsEdit />} />
              <Route path="show/:id" element={<InstrumentsShow />} />
            </Route>
          </Routes>
          <RefineKbar />
          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}
export default App;

8. instruments 페이지 확인하기

/instruments 경로에서 악기 목록을 확인할 수 있습니다. Inferencer가 자동 생성한 UI를 통해 악기 추가, 수정, 삭제가 가능합니다.


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

반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유