이번 포스팅은 프로젝트에 supabase 연결(무료)하는 내용을 다룰 예정입니다.

내용을 다루기에 앞서회원

Supabase란 뭘까?

Supabase 가 2020 년 등장하기 이전, 많은 개발자들의 토이 프로젝트는 빠른 개발을 위해 서버 + auth(회원 관리) + DB 의 기능을 한 번에 가져갈 수 있는 Firebase 를 주로 선택했습니다.

하지만 이 모든 기능을 가지고 등장한 supabase로 인해 firebase 대신 supabase를 택하는 개발자들이 많이 생기고 있습니다. supabse 는 오픈소스 프로젝트고, PostfreSQL 기반으로, Firebase 대비 저렴하고 다양한 연동을 지원합니다. NoSQL 기반인 Firebase 에 비하면 쿼리 자체를 복잡한 쿼리를 가져갈 수 있다는 장점이 또 확실했습니다.

1. Supabase 콘솔 사이트로 접속해 새로운 organization 을 생성합니다

https://supabase.com/dashboard/new

Supabase

supabase.com

1) organization 의 이름을 입력하고 Free Plan 을 고른다

2) 비번을 입력하고, Region 을 본인에 맞게 설정 (저의 경우는 한국) 하면서 Project 를 생성 => 비밀번호 꼭! 꼭 따로 저장해주세요! 바로 다음 설정에서도 필요합니다!!

2. 프로젝트에 Supabase 연결하기

이제 Supabase 에도 Project자체를 생성했으니, supabase 의 api key 를 저희 next 프로젝트에 연결을 해야겠죠

여기서 이제 저희는 4개의 값을 찾아 프로젝트에 입력할것입니다

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
NEXT_SUPABASE_SERVICE_ROLE=
NEXT_SUPABASE_DB_PASSWORD=

1) NEXT_PUBLIC_SUPABASE_URL 에 해당하는 값은

: Supabase 콘솔에서 좌측 사이드바 - 가장 하단 settings 톱니바퀴 - Data API 클릭 - API Settings 에 Project URL 에 해당하는 값

2) NEXT_PUBLIC_SUPABASE_ANON_KEY 에 해당하는 값은

: Supabase 콘솔에서 좌측 사이드바 - 가장 하단 settings 톱니바퀴 - API Keys 클릭 - API Keys 의 anon public 값

3) NEXT_SUPABASE_SERVICE_ROLE 에 해당하는 값은

: 2) 의 페이지에서 service_roles 에 해당하는 값

4) NEXT_SUPABASE_DB_PASSWORD 에 해당하는 값은

: 1 에서 Project 생성시에 입력했던 비밀번호

이제 Next 프로젝트로 돌아와서 가장 상위 폴더에 .env 라는 이름의 파일을 생성합니다.

기본적으로 프로젝트에서 gitignore 파일에서 .env 파일은 github 에 올리지 않도록 설정이 되어있을 텐데, 혹시나 없다면

.gitignore 파일에서 해당 라인을 추가합니다

# env files (can opt-in for committing if needed)
.env*

3. 프로젝트에서 React Query, Supabase 라이브러리 추가 설치

npm i --save @supabase/ssr @tanstack/react-query

react query 를 사용하기 위한 config 를 만들 것입니다

app 폴더 밖에 root 폴더에 config 폴더를 만들고

ReactQueryClientProvider.tsx 라는 파일을 만듭니다

config/ReactQueryClientProvider.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// 이 변수, 즉 상수 값 같은 경우에는 쿼리 관련된 요청을 하는 모든 요청들에 대한 캐시 역할을 한다
export const queryClient = new QueryClient({});

export default function ReactQueryClientProvider({
    children,
}: React.PropsWithChildren) {
    return (
        <QueryClientProvider client={queryClient}>
            {children}
        </QueryClientProvider>
    );
}

이후

package.json 수정

"scripts" : {

...

}

이 "scripts" 부분에 

"generate-types": "npx supabase gen types typescript --project-id [project_id] --schema public > types_db.ts"

를 추가합니다. 

[project_id] 부분을 NEXT_PUBLIC_SUPABASE_URL 에서 들어가있는 부분의 supabase.co 앞에 붙어있는 id 를 붙여넣어야 합니다.

이 부분은, Supabase 에서 db 테이블이나 필드를 추가한 후에, 해당 명령어 (npm run generate-types)를 입력하면, 현재 supabase 의 DB 의 변동 사항을 프로젝트에 types.db 파일에 업데이트를 해두는 것입니다.

npx supabase login

명령어를 통해 supabase 에 로그인을 합니다.

명령어 입력시

1) 필요한 추가 기능을 설치할 수도 있습니다.

2) 이후, Enter 키를 누르라는 안내가 나오면 엔터를 누르게 되면 브라우저에서 supabase 콘솔 페이지가 열립니다

3) 브라우저에서 보이는 확인 키값을 복사해서

4) supabase 연결 명령어를 입력했던 터미널에 3) 의 값을 복사 붙여넣어 줍니다

이제 테이블을 하나 추가해서 npm run generate-types 명령어로 프로젝트에 db 구조가 연결이 되는지 확인을 해보겠습니다

다시 브라우저의 supabase 에서 Create a new table 로 테이블을 생성합니다

이후, 저는 테이블과 필드를 추가했습니다.

이후에는 테이블 구조를 프로젝트에 추가해줍니다

npm run generate-types

해당 명령어를 입력하면 types_db.ts 라는 파일이 생성됩니다.