Supabase에서 타입 설정하기

 

오늘은 Next.js에서 Supabase를 사용할 때 자동으로 타입을 생성하고 적용하는 방법에 대해 설명해보려고 합니다!

 

Supabase 로그인 📖

먼저 터미널에서 `npx supabase login`를 입력해 Supabase 로그인을 해줍니다.

npx supabase login

 

그럼 아래 화면으로 이동하게 되는데 

 

인증 번호를 복사하고 터미널에 붙여 넣기를 해줍니다.

 

Supabase 프로젝트 초기화📖

로그인을 했다면 `npx supabase init`를 입력해 Supabase와 관련된 기본 설정 파일들을 생성해 줍니다.

(자동으로 생성)

npx supabase init

 

 

Supabase 타입 생성📖

supabase 홈페이지에서 Project_id를 복사한 후 아래 명령어를 입력해 원하는 위치에 `database.type.ts`파일을 생성해 줍니다.

npx supabase gen types typescript --project-id "PROJECT_ID" > src/types/supabase/database.type.ts

 

`src/types/supabase/database.type.ts`위치에 들어가 보면 타입이 자동 생성된 것을 볼 수 있습니다.

database.type

 

❗Supabase 속성이 바뀌면 다시 명령어를 입력해야 적용됩니다

 

Supabase 타입 적용📖

적용 예시

 

테이블 타입을 한 곳에서 관리하기 위해 `src/types/supabase/table.type.ts`를 만들어 주었습니다.

테이블 타입

 

테이블 속성 적용 시

테이블에 원하는 속성을 적용할 시 아래처럼 입력하면 됩니다!

Bookmark['id'] // id: number;
Bookmark['title'] // text: string;
Bookmark['text'] // title: string;