[TIL] Supabase 패키지 설치 및 연동: 프로젝트 세팅 가이드

Supabase 패키지 설치

Supabase에 데시보드에 프로젝트를 만들었으니 이제 vsCode에 패키지를 설치해주자

npm install @supabase/supabase-js

yarn add @supabase/supabase-js

Supabase 연동

URL과 API key가져오기

Setting - API에서 Project URL과 API keys를 가져온다.(필요한 프로젝트 이름에 맞는 지 확인!)

이제 다들 아시겠지만 이 부분은 중요하니까 한번 더 상기시키기 위해
key가 노출되면 안되서 .env.local파일에 저장해두면서 URL과 API key를 변수로 만든다!!

Supabase 서버와 연결하기

파일을 생성한 후 서버와 연결(typescript를 사용하여 URL과 API key의 타입도 지정)

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = process.env.SUPABASE_URL ? process.env.SUPABASE_URL : "";
const SUPABASE_KEY = process.env.SUPABASE_KEY ? process.env.SUPABASE_KEY : "";
export const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

타입 선언하기

Supabase는 TypeScript를 지원하기 때문에 아래처럼 타입을 생성할 수 있다.

export interface Database {
  public: {
    Tables: {
      movies: {
        Row: {
          // the data expected from .select()
          address: string;
          check_in: string;
          check_out: string;
          company_id: string;
          content: string;
          created_at: string;
          id: string;
          layout: string;
          name: string;
          phone: string;
          region: string;
        };
        Insert: {
          // the data to be passed to .insert()
        };
        Update: {
          // the data to be passed to .update()
        };
      };
    };
  };
}

아래처럼 불러와서 타입도 적용시켜주기

import { createClient } from "@supabase/supabase-js";
import { Database } from "./types";

const SUPABASE_URL = process.env.SUPABASE_URL ? process.env.SUPABASE_URL : "";
const SUPABASE_KEY = process.env.SUPABASE_KEY ? process.env.SUPABASE_KEY : "";
export const supabase = createClient<Database>(SUPABASE_URL, SUPABASE_KEY);

참고

https://www.youtube.com/watch?v=4yVSwHO5QHU
https://www.youtube.com/watch?v=FbLzqoENTsg