Day 15 - Supabase · haxxru.log

이 글은 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 서비스나 개인 프로젝트를 빠르게 만들 수 있다.

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