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 파일 생성하기
명령어를 입력하기에 앞서 src 폴더 밖의 최상단 경로에 types 폴더를 생성해준다. ( 명령어를 수정하면 src 내부에 생성해도 된다. )
만약 types폴더를 생성하지 않은 상태에서 아래 명령어를 입력하게 되면 경로 에러가 나기 때문에 반드시 폴더 생성 후 작업을 해야한다.

자 이제 아래 명령어를 입력해주자.
```
npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts
```
$PROJECT_REF 의 부분에는 프로젝트 id값이 들어가야 한다. 프로젝트 id는 supabase 프로젝트 페이지에 들어가면 url 맨 뒷부분에서 알 수 있다.
( supabase login시에만 에러 없이 사용할 수 있다. )

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