Supabase 시작하기: 프론트엔드 개발자를 위한 완전 기초 가이드

Supabase 시작하기: 프론트엔드 개발자를 위한 완전 기초 가이드

Supabase는 오픈소스 Firebase 대체제로, 빠르게 백엔드를 구축하고자 할 때 아주 유용한 도구입니다. 특히 프론트엔드 개발자 입장에서 손쉽게 데이터베이스를 연동하고 인증, 스토리지까지 관리할 수 있어 효율적입니다.

🛠️ Supabase란?

Supabase는 다음과 같은 기능들을 제공합니다:

• PostgreSQL 기반의 데이터베이스
• 실시간 데이터 변경 감지 (Realtime)
• 사용자 인증 및 권한 제어
• 파일 스토리지
• Edge Functions (서버리스 함수)

---

📦 1. Supabase 프로젝트 생성

1. https://supabase.com 에 접속해 회원가입 후 로그인
2. New Project 클릭
3. 프로젝트 이름, 비밀번호(Postgres 비밀번호), 지역 등을 입력
4. 생성 후 Project URL 과 anon public key 를 기록해둡니다 (→ 프론트엔드에서 사용)

---

⚙️ 2. 프로젝트에 Supabase 클라이언트 설치

React 또는 Vite 기반 프로젝트에서 Supabase를 사용하려면, 다음 패키지를 설치하세요:

npm install @supabase/supabase-js

🧬 3. Supabase 클라이언트 초기화

supabaseClient.js 또는 supabase.js 라는 파일을 만들어 다음과 같이 초기화합니다:

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

const supabaseUrl = '[https://your-project-id.supabase.co'](https://your-project-id.supabase.co')  
const supabaseKey = 'your-anon-public-key'

export const supabase = createClient(supabaseUrl, supabaseKey)

🗃️ 4. 테이블 만들기

Supabase 콘솔에서 Database > Table Editor 에 들어가 직접 테이블을 만들 수 있어요.

예: todos 테이블

✍️ 5. 데이터 가져오기 예시 (React)

import { useEffect, useState } from 'react'  
import { supabase } from './supabaseClient'

function TodoList() {  
const \[todos, setTodos\] = useState(\[\])

useEffect(() => {  
supabase  
.from('todos')  
.select('\*')  
.then(({ data, error }) => {  
if (error) {  
console.error(error)  
} else {  
setTodos(data)  
}  
})  
}, \[\])

return (

{todos.map((todo) => (

-   {todo.title}

))}


)  
}

🔐 6. 인증 기능도 기본 제공

Supabase는 이메일/비밀번호뿐 아니라 소셜 로그인도 지원합니다 (Google, GitHub 등).

회원가입:

**const { user, error } = await supabase.auth.signUp({  
email: 'user@example.com',  
password: 'secure-password',  
})**

로그인:

**const { data, error } = await supabase.auth.signInWithPassword({  
email: 'user@example.com',  
password: 'secure-password',  
})**

📤 7. 실시간 데이터 처리

useEffect(() => {

const subscription = supabase

.channel('custom-all-channel')

.on(

  'postgres\_changes',

  { event: '\*', schema: 'public', table: 'todos' },

  (payload) => {

    console.log('변경 감지:', payload)

  }

)

.subscribe()

return () => {

supabase.removeChannel(subscription)
}

}, \[\])

📁 8. 스토리지 예시
파일 업로드:

await supabase.storage
  .from('avatars')
  .upload('public/avatar1.png', file)

파일 가져오기 URL:

const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl('public/avatar1.png')

🎯 마무리

Supabase는 SQL 기반으로 안정성을 제공하면서도 Firebase처럼 쉽고 빠르게 백엔드를 구축할 수 있는 서비스입니다.

이 글에서는 다음을 배웠어요:

• Supabase 프로젝트 생성
• React와 연동하여 데이터 불러오기
• 사용자 인증 및 스토리지 사용

---

📚 다음 글 예고

다음 글에서는 아래 내용을 다룰 예정입니다:

• 실시간 협업 앱 만들기
• RLS(Row Level Security)로 사용자 데이터 보호하기
• Supabase Functions로 서버리스 기능 확장하기

---

이 글이 도움이 되셨다면, 댓글이나 좋아요 부탁드립니다.

피드백도 언제든 환영합니다! 🙌