사이드 프로젝트 구축 중 DB를 사용할 일이 생겨 제미나이에게 추천을 부탁했더니, Supabase를 알려주었다.

세팅 방법

Supabase 프로젝트 생성 및 테이블 만들기

1. Supabase 홈페이지에 접속해서 회원가입 후 “New Project”를 누른다.
2. Database Password를 설정하고 Region을 Korea (Seoul)로 선택한다.
3. 프로젝트가 생성되면 왼쪽 메뉴에서 SQL Editor를 클릭하고, 쿼리를 실행한다.

SDK 설치 및 설정

1. 라이브러리 설치 npm install @supabase/supabase-js

2. 프로젝트 루트(최상위) 폴더에 .env.local 파일을 만들고 키를 넣는다. (키 찾는 곳: Supabase 대시보드 -> Settings (톱니바퀴) -> Data API -> Project URL / API Keys -> Publishable key)

# VITE_ 로 시작 필수
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_KEY=your-anon-key-blabla...

3. src/lib 폴더(없으면 생성)에 supabase.ts를 만들고 아래 코드를 붙여넣는다.

// src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseKey = import.meta.env.VITE_SUPABASE_KEY;

if (!supabaseUrl || !supabaseKey) {
  throw new Error("Supabase 환경 변수가 설정되지 않았습니다.");
}

export const supabase = createClient(supabaseUrl, supabaseKey);

사용 방법

1. 데이터 불러오기 (Read)

import { supabase } from '../lib/supabase';

const fetchTasks = async () => {
  const { data, error } = await supabase
    .from('todos') // 테이블명
    .select('*')    // 전체 컬럼 조회
    .order('created_at', { ascending: false });

  if (error) console.error('Error:', error);
  else return data;
};

2. 데이터 추가하기 (Create)

const addTask = async (taskName: string) => {
  const { data, error } = await supabase
    .from('todos')
    .insert([{ content: taskName, is_completed: false }])
    .select(); // 삽입된 데이터를 바로 반환받고 싶을 때 추가

  if (error) console.error('Error:', error);
};

3. 데이터 수정/삭제 (Update/Delete)

// 수정
const updateTask = async (id: number) => {
  await supabase.from('todos').update({ is_completed: true }).eq('id', id);
};

// 삭제
const deleteTask = async (id: number) => {
  await supabase.from('todos').delete().eq('id', id);
};