supabase Type 명령어 한 줄로 자동생성하기

명령어 한 줄로 table type 자동완성

Jun 25, 2024

Contents

서론

프론트엔드에게 타입스크립트가 당연시되는 매우 슬픈 현실이 다가왔다.
아는 백엔드 개발자가 없어 supabase를 사용하는 프론트 개발자들에게
한 줄기의 빛이 될 수 있는 프로젝트 table type 자동 생성 방법을 알아보자.

출처 : supabase 공식문서 - Generating Typescript types

supabase login
```
npx supabase login
```
위의 명령어를 입력 시 아래와 사진과 같은 문구가 뜨며 Enter를 누르면 supabase 사이트에 접속되고 토큰 발급을 통해 로그인 된다.
supabase 파일 생성
```
npx supabase init
```
슈퍼베이스 프로젝트를 가져와 초기화 시켜주며 아래의 파일들을 생성해준다.
( 해당 작업은 리액트 또는 next 프로젝트 안에 들어가서 작업해주어야 한다. )
types폴더에 supabase.ts 파일 생성하기
```
npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts
```
$PROJECT_REF 의 부분에는 프로젝트 id값이 들어가야 한다. 프로젝트 id는 supabase 프로젝트 페이지에 들어가면 url 맨 뒷부분에서 알 수 있다.
( supabase login시에만 에러 없이 사용할 수 있다. )
하지만 위와 같이 입력을 하면 에러가 발생하게 되는데 이는 명령어에 적혀있는 types 폴더가 존재하지 않기 때문이다.
따라서 types폴더를 생성 후 다시 명령어를 입력하면 아래와 같이 파일이 생성된다.

supabaseClient.ts 생성
!!! createClient의 타입으로 Database를 반드시 줘야한다 !!!
typescript 적용 확인
위의 코드처럼 작성을 하는 경우는 없지만 예시를 보여주기 위해 위처럼 작성하였다.
supabase 메서드 이외에 아무 타입도 지정해주지 않았지만 data[0]의 인자들이 나오는 것을 볼 수 있고 타입이 적용된 것을 확인할 수 있다.

우리의 프로젝트에 존재하는 supabase가 수정되거나 새로 생성되었다고 생각해보자.
type을 업데이트 하기위해 우리는 저 긴 명령어를 다시 입력해주어야 한다,,,
그렇게 하기는 너무 괴로우니 pakage.json에 들어가 script를 추가해주자.

 "gen": "npx supabase gen types typescript --project-id \"$PROJECT_ID\" --schema public > types/supabase.ts"

$PROJECT_ID 에는 프로젝트 id값을 넣어주면 된다.

아래의 스크립트를 추가해주면 우리는 이제 아래 명령어를 통해 type update 시켜줄 수 있다.

npm run gen

명령어 한 줄로 supabase의 타입을 자동으로 가져와 생성하는 방법에 대해 알아보았다.
한번 사용해보니 supabase와 typescript를 사용하는 사람들에게는 필수라고 해도 과언이 아닐 정도로 편리하니 꼭 사용해보면 좋을 것 같다.

Contents