Day 15 - Supabase

이 글은 2026년 03월 23일 작성된 글입니다.

오늘은 Next.js에서 Supabase를 연동하여 데이터 조회와 인증 기능을
구현하는 방법을 배웠다.
Supabase를 사용하면 별도의 백엔드 서버 없이 DB + 인증 기능을 빠르게
구현할 수 있다.

---

1. Supabase 설치 및 환경변수 설정

패키지 설치

npm install @supabase/supabase-js

.env.local

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxx

---

2. Supabase Client 설정

/lib/supabase.ts

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

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

---

3. 게시글 목록 조회

const { data } = await supabase
  .from('posts')
  .select('*')

핵심 흐름

• supabase.from('table')
• .select() 데이터 조회
• React state에 저장 후 렌더링

---

4. 게시글 상세 조회

특정 게시글 조회

const { data } = await supabase
  .from('posts')
  .select('*')
  .eq('id', id)
  .single()

댓글 조회

const { data } = await supabase
  .from('comments')
  .select('*')
  .eq('post_id', id)

---

5. Supabase 조회 메서드

메서드 설명

---

.eq() 값 일치
.gt() 초과
.lt() 미만
.gte() 이상
.lte() 이하
.like() 패턴 검색
.ilike() 대소문자 무시
.in() 배열 포함

예시

supabase.from('posts').select('*').eq('id', 1)

---

6. 회원가입 구현

await supabase.auth.signUp({
  email,
  password
})

---

7. 로그인 / 로그아웃

로그인

await supabase.auth.signInWithPassword({
  email,
  password
})

로그아웃

await supabase.auth.signOut()

현재 사용자 조회

const { data: { user } } = await supabase.auth.getUser()

---

✅ 정리

• Supabase는 DB + 인증 기능을 제공하는 BaaS
• @supabase/supabase-js로 Next.js에서 쉽게 연동 가능
• .from().select() 방식으로 데이터 조회
• .eq, .like 등으로 SQL처럼 필터링
• supabase.auth로 회원가입 / 로그인 / 로그아웃 구현 가능

Next.js와 Supabase를 함께 사용하면 간단한 CRUD 서비스나 개인 프로젝트를
빠르게 만들 수 있다.

수파베이스를 처음 접해봐서 사실 따라가기에 급급했던 수업인 거 같다.
반복해서 학습을 해야 할 필요성을 느꼈다.