Supabase로 데이터베이스 연결하기 — 무료로 백엔드 만들기

Supabase를 선택한 이유

블로그를 직접 만들기로 했을 때, 가장 큰 고민은 "글 데이터를 어디에 저장하지?"였습니다. 파일로 저장하는 방법도 있지만, 댓글이나 조회수 같은 동적인 데이터를 다루려면 데이터베이스가 필요했습니다.

여러 선택지를 비교했습니다:

• Firebase — 구글 제품이라 안정적이지만, NoSQL 방식이 저에게는 낯설었습니다.
• PlanetScale — MySQL 기반이라 익숙하지만, 무료 플랜이 축소되었습니다.
• Supabase — PostgreSQL 기반, 무료 티어가 넉넉하고, 관리 대시보드가 직관적입니다.

결국 Supabase를 선택했습니다. 무료로 시작할 수 있고, PostgreSQL이라 SQL을 바로 쓸 수 있어서 학습 가치도 높았습니다.

Supabase 시작하기: 가입과 프로젝트 생성

시작은 정말 간단합니다:

• 1단계: supabase.com에 접속하여 GitHub 계정으로 로그인합니다.
• 2단계: "New Project" 버튼을 클릭합니다.
• 3단계: 프로젝트 이름, 데이터베이스 비밀번호, 리전(저는 Northeast Asia를 선택)을 설정합니다.
• 4단계: 약 2분 후 프로젝트가 생성됩니다.

생성 후 대시보드에서 API URL과 anon key를 확인합니다. 이 두 값을 Next.js 프로젝트의 환경 변수 파일(.env.local)에 넣으면 연동 준비 완료입니다.

테이블 설계: 블로그에 필요한 데이터 구조

블로그에 필요한 테이블을 설계하면서 데이터베이스의 기초를 배웠습니다. 제가 만든 테이블은 다음과 같습니다:

• posts — 글 제목, 내용, 슬러그, 상태, 조회수 등
• categories — 카테고리 이름, 슬러그, 색상
• tags — 태그 이름, 슬러그
• post_tags — 글과 태그의 다대다 관계를 연결
• comments — 댓글 (닉네임, 내용, 비밀번호)
• series — 시리즈 (여러 글을 묶는 기능)

Supabase의 SQL Editor에서 직접 CREATE TABLE 문을 실행해서 테이블을 만들었습니다. 처음에는 SQL 문법이 낯설었지만, ChatGPT에게 물어보며 하나씩 만들었습니다.

Next.js와 연동하기

Supabase에서 제공하는 JavaScript 클라이언트 라이브러리를 설치하면 됩니다:

npm install @supabase/supabase-js @supabase/ssr

그 다음, 클라이언트를 생성하는 유틸리티 파일을 만듭니다. 서버 컴포넌트용과 클라이언트 컴포넌트용 두 가지를 만드는 것이 포인트입니다. Next.js의 서버 컴포넌트에서는 쿠키를 통해 인증 상태를 관리할 수 있습니다.

RLS(Row Level Security) — 보안 설정

Supabase에서 가장 중요한 개념 중 하나가 RLS입니다. 이것은 "누가 어떤 데이터에 접근할 수 있는지"를 테이블 단위로 설정하는 보안 기능입니다.

예를 들어:

• 발행된 글은 누구나 읽을 수 있음 (SELECT 허용)
• 글 작성/수정/삭제는 관리자만 가능 (INSERT/UPDATE/DELETE 제한)
• 댓글은 누구나 작성 가능하지만, 삭제는 비밀번호 확인 후에만 가능

처음에는 RLS 설정을 빼먹어서 API 호출 시 빈 배열만 돌아온 적이 있습니다. Supabase에서 RLS가 활성화되면 정책이 없는 테이블은 기본적으로 모든 접근을 차단합니다. 이 점을 꼭 기억하세요!

마치며

Supabase 덕분에 무료로 안정적인 백엔드를 구축할 수 있었습니다. 개인 블로그 정도의 트래픽이라면 무료 티어로 충분합니다. SQL을 배우면서 데이터베이스의 기초를 이해하게 된 것도 큰 소득이었습니다.

다음 글에서는 완성된 블로그를 Vercel에 배포하는 과정을 공유할게요. 10분이면 내 블로그를 전 세계에 공개할 수 있습니다!