Supabase 시작하기: 오픈소스 Firebase 대체제

Supabase Architecture

Supabase는 개발자들이 빠르게 백엔드 서비스를 구축할 수 있도록 도와주는 오픈소스 플랫폼입니다. Firebase의 대안으로 주목받고 있으며 PostgreSQL 데이터베이스, 실시간 기능, 인증 시스템 등을 제공합니다.

1. Supabase 프로젝트 생성

1.1 공식 사이트 가입

Supabase 공식 사이트에서 GitHub 계정으로 로그인 후 새 프로젝트 생성

# Supabase CLI 설치 (선택사항)
npm install supabase --save-dev

1.2 프로젝트 설정

프로젝트 이름: my-first-supabase
데이터베이스 비밀번호 설정
지역 선택: 서울(Asia-northeast3)

2. 클라이언트 설정

2.1 패키지 설치

yarn add @supabase/supabase-js

2.2 환경변수 설정

src/config/supabase.ts

import { createClient } from '@supabase/supabase-js'
 
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
 
export const supabase = createClient(supabaseUrl, supabaseKey)

3. 데이터베이스 CRUD 작업

3.1 테이블 생성

Supabase 대시보드에서 SQL Editor 실행:

초기 테이블 생성

CREATE TABLE posts (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  content TEXT,
  created_at TIMESTAMP DEFAULT NOW()
);

3.2 데이터 조회

게시글 조회 예제

const fetchPosts = async () => {
  const { data, error } = await supabase
    .from('posts')
    .select('*')
    .order('created_at', { ascending: false });
 
  if (error) console.error('Error fetching posts:', error);
  return data || [];
}

4. 사용자 인증 구현

4.1 회원가입 기능

이메일 가입 처리

const handleSignUp = async (email: string, password: string) => {
  const { user, error } = await supabase.auth.signUp({
    email,
    password
  });
 
  if (error) throw new Error(error.message);
  return user;
}

**4.2 소셜 로그인 (Google)

구글 로그인 구현

const signInWithGoogle = async () => {
  const { user, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
  });
  
  // 리디렉션 처리
  if (error) console.error('Login failed:', error.message);
}

5. 실시간 기능 활용

5.1 실시간 구독 설정

실시간 업데이트 리스너

const setupRealtime = () => {
  const subscription = supabase
    .channel('posts-channel')
    .on('postgres_changes', {
      event: '*',
      schema: 'public',
    }, (payload) => {
      console.log('Change received!', payload)
    })
    .subscribe()
}

6. 파일 스토리지 사용

6.1 파일 업로드 예제

이미지 업로드 기능

const uploadImage = async (file: File) => {
  const fileName = `user_uploads/${Date.now()}_${file.name}`;
  
  const { data, error } = await supabase.storage
    .from('public-bucket')
    .upload(fileName, file);
 
  if (error) throw new Error('Upload failed');
  return data?.path;
}

7. 배포 및 관리

7.1 Database Backups

Supabase 프로젝트 설정 → Backups에서 자동 백업 설정 가능

7.2 성능 모니터링

대시보드의 Analytics 메뉴에서 API 호출 통계 확인

8. 문제 해결

8.1 RLS(행 수준 보안) 설정 확인

RLS 정책 예시

CREATE POLICY "개인 데이터 접근 정책"
ON profiles 
FOR SELECT USING (auth.uid() = user_id);

8.2 일반적인 오류 처리

에러 핸들링 패턴

const { data, error } = await supabase.from('posts').insert(newPost);
 
if (error) {
  switch (error.code) {
    case '23505': 
      alert('중복 데이터 오류');
      break;
    case '42501':
      alert('권한 없음');
      break;
    default:
      alert('서버 오류 발생');
  }
}

마치며

Supabase는 초보 개발자부터 전문가까지 쉽게 사용할 수 있는 강력한 백엔드 서비스를 제공합니다. 이 가이드를 통해 기본적인 사용법을 익혔다면, 공식 문서에서 더 고급 기능을 탐색해 보는 것을 추천합니다.

참고 자료

공식 문서

Supabase GitHub 저장소