토이 3 프로젝트 작성한 코드 복기 (5) - supabase 관련 설정 및 사용법

 

이번 시간에는 프로젝트에서 사용한 baas인 supabase에 대한 설정과 사용 방법이다.

 

 

1. supabase 설치 

npm install @supabase/supabase-js

 

2. src/api/supabase.ts

supabase 관련 Key를 .env 파일로 관리하였기에 다음의 파일을 만들어 객체로 만들었다.

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

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;

const supabase = createClient(supabaseUrl, supabaseKey);

export { supabase };

 

3. categories 테이블에 접근하기

우선 supabase 웹페이지에서 해당 프로젝트에 접근하여 table이 만들어져있어야 한다.

categories Table

 

4.  그다음 아래의 예시 코드 같이 값을 조회할 수 있다.

// 특정 사용자 북마크 카테고리 조회
export async function fetchCategories(userId: string) {
  const { data, error } = await supabase
    .from('categories')
    .select('*')
    .eq('user_id', userId)
    .order('updated_at', { ascending: false });

  if (error) throw error;
  return data || [];
}

 

여기서 userId와 같이 key로 하는 값을 매개변수로 받아 사용할 수 있다.

또, .order  옵션을 사용하여 어떤 열의 값으로 오름차순 또는 내림차순으로 정렬할 수 있다.

* ascending: false일 경우 내림차순으로 정렬된다

 

이렇게 CRUD 기능을 함수로 만들 수 있다.