Supabase 심층 가이드: 기초부터 전문가 활용까지

1. Supabase란?

Supabase는 오픈소스 기반의 Firebase 대체 서비스로, 빠르게 백엔드를 구축하고자 하는 개발자를 위한 **BaaS(Backend as a Service)**입니다. 주요 특징은 다음과 같습니다:

PostgreSQL 기반: 관계형 데이터베이스를 사용하며 SQL과 호환
실시간 데이터베이스: Realtime 기능으로 DB 변경을 클라이언트에 실시간 반영
인증(Authentication): OAuth, 이메일/비밀번호, 마법 링크 등 지원
스토리지(Storage): 파일 업로드 및 관리
Edge Functions: 서버리스 함수로 백엔드 로직 구현 가능
오픈소스 & 호스팅: 자체 호스팅 가능, 클라우드 호스팅도 제공

Firebase와 달리 SQL 기반이라는 점에서 기존 RDB 설계를 그대로 활용 가능하고, 복잡한 쿼리도 자유롭게 작성할 수 있음.

2. Supabase의 핵심 구성 요소

2.1 Database

PostgreSQL 기반
실시간 변경 감지 기능
Row-level security(RLS)로 세밀한 접근 제어 가능

2.2 Auth

이메일/비밀번호, OAuth(Google, GitHub 등)
JWT 기반 인증
세션 관리 및 비밀번호 재설정 기능

2.3 Storage

파일 업로드, 이미지, 문서 관리
공개/비공개 접근 제어
URL 서명으로 제한된 접근 가능

2.4 Realtime

DB 테이블, 채널 단위 실시간 구독
WebSocket 기반
실시간 채팅, 알림 시스템 등에 활용 가능

2.5 Functions (Edge Functions)

서버리스 함수 구현
HTTP 엔드포인트 제공
JWT 인증, DB 트리거 등 활용 가능

3. Supabase 시작하기 (기초)

3.1 프로젝트 생성

Supabase 홈페이지 접속
계정 생성 후 새 프로젝트 생성
Database password 설정 및 프로젝트 생성

3.2 테이블 생성

예시: users 테이블

create table users (
    id uuid primary key default gen_random_uuid(),
    email text unique not null,
    username text,
    created_at timestamp default now()
);

3.3 인증 설정

이메일/비밀번호 로그인 활성화
OAuth 제공자 설정

3.4 클라이언트 초기화

JavaScript 예시:

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

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseKey = 'public-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

4. 기본 CRUD 예제

4.1 데이터 삽입

const { data, error } = await supabase
  .from('users')
  .insert([{ email: 'example@test.com', username: 'example' }]);

4.2 데이터 조회

const { data, error } = await supabase
  .from('users')
  .select('*')
  .eq('username', 'example');

4.3 데이터 업데이트

const { data, error } = await supabase
  .from('users')
  .update({ username: 'newname' })
  .eq('email', 'example@test.com');

4.4 데이터 삭제

const { data, error } = await supabase
  .from('users')
  .delete()
  .eq('email', 'example@test.com');

5. 심화 활용

5.1 Realtime 구독

supabase
  .from('users')
  .on('INSERT', payload => {
    console.log('New user added!', payload);
  })
  .subscribe();

5.2 Row-Level Security (RLS)

alter table users enable row level security;

create policy "user can view own data"
  on users
  for select
  using (auth.uid() = id);

5.3 스토리지 활용

const { data, error } = await supabase.storage
  .from('avatars')
  .upload('public/avatar1.png', file);

5.4 서버리스 함수

// functions/sendWelcomeEmail/index.js
export async function handler(req, res) {
  const { email } = await req.json();
  // 이메일 전송 로직
  res.status(200).json({ message: 'Email sent' });
}