[Supabase] 데이터베이스 생성과 정책 설정, 그리고 프로젝트와의 연결

안녕하세요!

따로 백엔드 개발 없이 Supabase를 기반으로 한 Next.js 웹 서비스 개발을 진행 중입니다.

 

Supabase로 DB 기능과 로그인 인증 기능을 사용할 예정입니다.

 

이번 글에서는 DB를 어떻게 생성하고 정책을 설정하며 Next.js에 연결하는지 소개해보겠습니다.

 

---

프로젝트 생성

 

우선 프로젝트를 생성해야 합니다.

이름 설정 같은 기본적인 것은 알아서 잘 설정하면 되고 지역만 서울로 설정해줍시다.

AWS 기반 서비스이기 때문에 지역별로 큰 차이는 없겠지만 가까울수록 낫겠죠.

 

 

 

 

DB 생성

 

 

사이드바에서 

 

Table Editor > Create a new table

 

DB 테이블을 하나 생성합니다.

 

Enable Row Level Security (RLS) 

 

이 설정을 해주지 않으면 SELECT, INSERT 등의 쿼리를 아무나 날릴 수 있기 때문에

인증된 사용자에게만 허용하기 위해서는 이를 체크하고 정책 설정을 해주어야 합니다.

 

반대로 딱히 보안 같은 거 걱정할 홈페이지가 아니다 하면 체크할 필요는 없습니다만...

그래도 체크해주는 게 좋겠쥬

 

열이랑 외래키도 설정해줍니다.

 

예시로 만드는 테이블이기 때문에 그냥 id랑 타임스탬프만 넣겠습니다.

 

정책 설정

 

 

이제 테이블이 만들어졌습니다!

잘 되는지 행이나 열도 한 번 추가해보시구요~

 

오른쪽 위의 Add RLS Policy를 통해 정책 설정 화면으로 넘어갈 수 있습니다.

 

Authentication > Policies로도 들어갈 수 있어요.

 

 

이 화면에서 저희가 따로 SQL문을 작성하지 않아도 정책 템플릿들이 많아서 골라서 적용하면 됩니다.

 

예를 들어, 자신이 등록한 행만 지울 수 있게 허용을 하려면 지금 선택되어있는 정책을 적용하면 되겠죠.

일단 저는 모든 유저가 SELECT는 할 수 있게 허용하고 싶기 때문에 모든 유저 읽기 권한을 주겠습니다.

 

이제 프론트 환경에서는 어떻게 해야 할까요?

 

저는 TypeScript 기반 Next.js 프로젝트를 예시로 연결을 해보겠습니다.

 

연결

 

우선 프로젝트를 만들고 .env 파일에 URL과 Anon Key를 추가해줍니다.

 

둘 다 프로젝트 홈에 있습니다.

사실 이 둘은 딱히 공개가 되어도 문제가 될 건 없지만 그래도 굳이 깃헙에는 안 올릴 거라 .env에 넣어주고요

 

 NEXT_PUBLIC_SUPABASE_URL=""

NEXT_PUBLIC_SUPABASE_ANON_KEY=""

로 해주었습니다.

 

utils/supabase.ts를 만들어주겠습니다.

 

// utils/supabase.ts

import { createClient } from "@supabase/supabase-js";
import { Database } from "../types_db";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;

export const supabase = createClient<Database>(supabaseUrl, supabaseKey);

 

자꾸 오류가 난다면 npm install을 통해 node_modules에 supabase를 추가를 해주시면 되겠습니다.

 

여기서 저 types_db가 무엇이냐, 하면

Supabase에서 자체 제공하는 타입 기능입니다.

테이블을 수정할 때마다 타입 관리하기 어려운 걸 알고 자체적으로 기능을 만들어주었습니다 ㄷㄷ

 

npx supabase gen types typescript --project-id "YOUR_PROJECT_URL" --schema public > types_db.ts

 

터미널에 이렇게 적어주시면 되고 YOUR_PROJECT_URL 부분에 아까  NEXT_PUBLIC_SUPABASE_URL에 넣어준 그 URL 맨 앞자리만 넣어주면 됩니다.

 

jdasdjajdas.supabase.co 라고 하면 jdasdjajdas만 넣는 식으로요

// package.json

...

"scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export",
    "generate-types": "npx supabase gen types typescript --project-id "YOUR_PROJECT_URL" --schema public > types_db.ts"
  }
  
  ...

 

너무 길어서 귀찮으면 아예 이렇게 package.json 파일에 포함해주어서 쓰는 게 편합니다.

 

이렇게 하면 supabase.ts의 supabase를 import하기만 해도

코드에서 사용할 INSERT, UPDATE 등에 쓰일 열에 대하여 타입 체크를 자동으로 할 수 있기 때문에 편리합니다.

 

정책 설정 후 인증이 되었다치고 INSERT문을 한 번 작동해보겠습니다.

 

useEffect(() => {
    const insertTable = async () =>{
      const { data, error } = await supabase
      .from('testing').insert({
        id: 4
      });

      if (error) {
        console.error('Error inserting data:', error);
      } else {
        console.log('Data inserted successfully:', data);
      }
    }

    insertTable();

  }, []);

 

 

 

잘 들어갔네요!

 

이렇게 따로 DB를 저희가 관리할 필요 없이 서비스에 맡길 수 있는 Supabase에 대해 알아보았습니다.

 

감사합니다.