8/19 Supabase CLI를 사용하여 TypeScript 타입 생성하기

signup 과정에서 사용자 정보를 확인하기 위해 Supabase의 JavaScript 클라이언트를 사용하여 users 테이블에서 특정 이메일 주소와 일치하는 사용자를 조회하였음.

하지만 이 쿼리의 반환값이 any[] 타입으로 나오면서 문제가 생김. 이를 해결하기 위해 docs를 보다가 Supabase CLI를 사용하여 프로젝트의 테이블 스키마를 기반으로 TypeScript 타입을 생성할 수 있다는 걸 알게 되고 시도해봄.

1. Supabase CLI 설치 및 문제 해결

1. supabase CLI가 설치되지 않은 문제 해결:

   • 처음에 supabase CLI를 사용하려고 했으나, 명령어가 인식되지 않았다. 이는 supabase CLI가 설치되지 않았거나, 설치 경로가 PATH 환경 변수에 추가되지 않았기 때문이었음.

   • 다음 명령어를 통해 supabase CLI를 사용하려고 했으나, command not found 오류가 발생했다:

     supabase gen types typescript --project-id abcdefghijklmnopqrst > database.types.ts

     zsh: command not found: supabase

   • CLI 버전을 확인하려고 시도했지만, 동일한 오류가 발생했다:

     supabase --version

     zsh: command not found: supabase

2. Yarn 2.x에서 supabase CLI 실행:

   • Yarn 2.x에서는 yarn global 명령어가 제거되었기 때문에, 전역 설치 대신 yarn dlx를 사용하여 supabase CLI를 실행할 수 있다.
   • 다음 명령어를 사용해 TypeScript 타입을 생성하려고 했다:

     yarn dlx supabase gen types typescript --project-id abcdefghijklmnopqrst > database.types.ts

   • 그러나 이 과정에서 Access token not provided 오류가 발생했다:

     2024/08/19 14:34:52 Access token not provided. Supply an access token by running supabase login or setting the SUPABASE_ACCESS_TOKEN environment variable.

   • 이 오류는 Supabase CLI가 프로젝트에 접근하기 위한 액세스 토큰이 없기 때문에 발생했다.

2. Supabase CLI 로그인

1. Supabase CLI 로그인:

   • supabase CLI를 사용하기 전에 로그인 과정이 필요했다. npx를 사용해 다음 명령어로 로그인했다:

     npx supabase login

   • 명령어 실행 후, 아래와 같은 메시지가 출력되었고, 브라우저가 열리면서 Supabase에 로그인할 수 있는 페이지로 이동함:

     Hello from Supabase! Press Enter to open browser and login automatically.
     
      Here is your login link in case browser did not open [https://supabase.com/dashboard/cli/login?session_id=REDACTED&token_name=REDACTED&public_key=REDACTED](https://supabase.com/dashboard/cli/login?session_id=REDACTED&token_name=REDACTED&public_key=REDACTED)
     
     Token cli_solyipark@Solyiui-MacBookPro.local_1724045741 created successfully.
     You are now logged in. Happy coding!

   • 로그인 후, CLI가 자동으로 액세스 토큰을 생성하고, 이를 시스템에 저장.

2. 로그인 완료 후 TypeScript 타입 생성:

   • 로그인 완료 후, 다시 supabase CLI 명령어를 실행하여 TypeScript 타입을 생성했다:

     yarn dlx supabase gen types typescript --project-id scxebexrbppapmacisef > database.types.ts

   • 이 명령어를 통해, 지정한 프로젝트 ID에 해당하는 데이터베이스 테이블 스키마 기반의 TypeScript 타입을 database.types.ts 파일로 생성할 수 있었다.

정리

• yarn dlx를 사용하여 전역 CLI 명령어를 일회성으로 실행할 수 있다.
• Supabase CLI를 사용하기 위해서는 먼저 로그인 과정이 필요하며, 이를 통해 액세스 토큰을 생성해야 함.