Supabase 사이드프로젝트 시작하기

Supabase란?

Firebase의 오픈소스 대안입니다. PostgreSQL 기반으로 인증, 실시간 데이터, 스토리지, Edge Functions를 제공합니다.

무료 플랜으로 충분한가?

사이드 프로젝트에는 넉넉합니다.

프로젝트 생성

1. supabase.com 가입
2. "New Project" → 리전 선택 (Northeast Asia가 한국 가장 가까움)
3. DB 비밀번호 설정 (잊으면 안 됩니다)

테이블 설계 예시 (할일 앱)

create table todos (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users(id) not null,
  title text not null,
  completed boolean default false,
  created_at timestamptz default now()
);

-- Row Level Security 활성화
alter table todos enable row level security;

-- 본인 데이터만 조회/수정 가능
create policy "Users can manage own todos"
  on todos for all
  using (auth.uid() = user_id);

Next.js에서 연동

npm install @supabase/supabase-js

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

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

CRUD 예시

// 조회
const { data: todos } = await supabase
  .from("todos")
  .select("*")
  .order("created_at", { ascending: false });

// 생성
await supabase.from("todos").insert({
  title: "Supabase 배우기",
  user_id: user.id,
});

// 수정
await supabase
  .from("todos")
  .update({ completed: true })
  .eq("id", todoId);

// 삭제
await supabase.from("todos").delete().eq("id", todoId);

인증 설정

이메일 + 소셜 로그인

// 이메일 회원가입
await supabase.auth.signUp({
  email: "dev@example.com",
  password: "secure-password",
});

// Google 로그인
await supabase.auth.signInWithOAuth({
  provider: "google",
});

// 현재 사용자
const { data: { user } } = await supabase.auth.getUser();

실시간 구독

supabase
  .channel("todos")
  .on(
    "postgres_changes",
    { event: "*", schema: "public", table: "todos" },
    (payload) => {
      console.log("변경:", payload);
    }
  )
  .subscribe();

Edge Functions

// supabase/functions/hello/index.ts
Deno.serve(async (req) => {
  const { name } = await req.json();
  return new Response(
    JSON.stringify({ message: `안녕하세요, ${name}!` }),
    { headers: { "Content-Type": "application/json" } }
  );
});

배포: supabase functions deploy hello

Row Level Security (RLS) 필수

Supabase의 anon key는 클라이언트에 노출됩니다. RLS 없이는 누구나 모든 데이터를 읽고 쓸 수 있습니다.

RLS를 반드시 활성화하세요. 이것은 선택이 아닙니다.

사이드 프로젝트 아이디어

Supabase + Next.js로 만들 수 있는 것들:

• 북마크 관리 앱
• 습관 트래커
• 팀 투표/설문 도구
• 개발자 TIL (Today I Learned) 블로그
• 간단한 SaaS (대기 목록, 피드백 수집)