12강: 백엔드 기초

데이터 저장하기

오늘 끝나면 이런 걸 갖게 돼요. 할 일을 추가하고, 완료 표시하고, 삭제할 수 있는 페이지가 생겨요. 새로고침해도 목록은 그대로 남아요.

11강에서 만든 my-service 화면에 Supabase(수파베이스, 데이터를 저장하는 서비스)를 연결해요. 직접 입력할 명령어·코드·SQL은 없어요.

1단계: Supabase 프로젝트를 만들어요

https://supabase.com에 접속해 GitHub 계정으로 로그인하세요. Start your project, New project를 차례로 누른 뒤 이름은 my-first-db, 지역은 Northeast Asia (Seoul)로 정해요.

비밀번호를 정하고 Create new project를 누르면 준비가 시작돼요. 로그인과 비밀번호 입력, 버튼 승인은 사람이 직접 진행해요. 이것만 직접 하시면 나머지는 클로드가 해요.

무료 플랜에서는 활성 프로젝트를 2개까지 만들고, 프로젝트마다 데이터베이스 500MB를 쓸 수 있어요. 7일 동안 활동이 적으면 멈출 수 있지만, 대시보드에서 다시 시작하면 돼요.

2단계: 테이블과 출입 규칙을 만들어요

데이터베이스(Database, 데이터를 보관하는 인터넷 창고)에 todos 테이블을 만들 차례예요. RLS(Row Level Security, 행마다 접근 범위를 정하는 자물쇠)도 함께 설정해요.

이 글에서는 공식 연결 도구인 MCP(Model Context Protocol, AI와 서비스를 잇는 표준)로 클로드와 Supabase를 연결해요. 아래 프롬프트로 연결 확인부터 맡기세요.

11강에서 만든 my-service에 Supabase를 연결하려고 해.
먼저 이 Claude Code 프로젝트에 Supabase 공식 MCP가 연결되어 있는지 확인해줘.

연결되어 있지 않다면 프로젝트 범위에만 공식 MCP를 설정해줘.
브라우저 로그인이나 권한 승인이 필요할 때만 멈춰서 내가 할 일을 알려줘.
설정이나 인증 뒤 Claude Code를 다시 열어야 하면 화면에서 할 일을 한 번에 하나씩 알려줘.
나에게 터미널 명령어나 SQL을 직접 입력하라고 하지 마.
연결되면 작업 대상을 my-first-db 프로젝트 하나로 제한해줘.

연결되면 아래 구조로 todos 테이블을 만들어줘.
1. id: 자동으로 생기는 번호
2. title: 할 일 제목을 담는 text(문자)
3. is_done: 완료 여부를 담는 bool(참·거짓), 기본값은 false
4. created_at: 만든 시각, 자동으로 기록

Data API(데이터 접근 창구)에서 todos에 필요한 권한만 주고 RLS를 켜줘.
로그인하지 않은 방문자가 todos를 읽기·추가·수정·삭제할 수 있도록
동작별 연습용 정책을 각각 만들어줘. 다른 테이블에는 권한을 주지 마.

실행 전에 만들 테이블, 접근 역할, 네 가지 권한과 정책을 쉬운 한국어로 보여줘.
내 승인을 받은 뒤 적용하고, RLS와 정책이 켜졌는지 확인해줘.

클로드의 설명에서 세 가지만 확인하세요. 대상이 todos 하나인지, RLS가 켜지는지, 로그인하지 않은 방문자에게 네 동작만 허용하는지 보면 돼요.

3단계: 공개용 접속 정보를 복사해요

Supabase 프로젝트 위쪽의 Connect를 눌러 Project URL과 Publishable key를 복사하세요. 같은 값은 왼쪽 아래 Project Settings → API Keys에서도 찾을 수 있어요.

예전 프로젝트에는 anon 키가 보일 수 있어요. anon과 publishable은 브라우저에서 쓰는 공개용 키이고, service_role과 secret은 서버 전용 비밀 키이므로 복사하거나 클로드에게 보내지 마세요.

복사한 공개용 값 두 개만 아래 프롬프트의 대괄호 부분에 붙여 넣으세요. .env.local 파일은 클로드가 만들게 하세요.

Supabase의 공개용 접속 정보 두 개를 복사했어.

Project URL: [여기에 Project URL 붙여넣기]
Publishable key 또는 anon key: [여기에 공개용 키 붙여넣기]

my-service에 @supabase/supabase-js를 설치하고 Supabase 연결을 만들어줘.
프로젝트 맨 위에 .env.local을 만들고 아래 이름으로 값을 넣어줘.
NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

service_role이나 secret 키는 사용하거나 요청하지 마.
.env.local이 GitHub에 올라가지 않도록 제외 설정도 확인해줘.
답변에는 내가 붙여 넣은 값을 다시 출력하지 마.

연결 파일은 현재 폴더 구조에 맞는 위치에 만들고,
작업 뒤 바꾼 파일과 각 파일의 역할만 쉬운 말로 알려줘.

공개용 키는 화면 연결에 쓰는 제한된 열쇠예요. 무엇을 읽고 바꿀 수 있는지는 2단계의 테이블 권한과 RLS 정책이 정해요.

4단계: 할 일 페이지를 만들어요

이제 CRUD(크러드, 만들기·읽기·수정·삭제)를 한 화면에 넣어요. 주소록에서 연락처를 추가하고, 찾고, 고치고, 지우는 흐름과 같아요.

Supabase의 todos 테이블과 연결되는 할 일 페이지를 만들어줘.

필요한 기능:
1. 입력칸과 추가 버튼으로 새 할 일을 저장해줘.
2. 페이지를 열면 저장된 할 일을 모두 보여줘.
3. 할 일을 누르면 완료와 미완료가 바뀌게 해줘.
4. 각 할 일 옆에 삭제 버튼을 넣어줘.

페이지 주소는 /todos로 해줘.
11강 화면처럼 어두운 배경, 밝은 글씨, 청록색 #06b6d4를 사용하고
휴대폰에서도 글과 버튼이 잘 보이게 해줘.

로그인 기능과 새 외부 서비스는 추가하지 마.
필요한 파일만 바꾸고, 먼저 바꿀 파일과 작업 순서를 보여줘.
완성 뒤 브라우저에서 /todos를 열어줘.

브라우저에서 할 일 하나를 추가하고 완료 표시를 바꾼 뒤 새로고침하세요. 항목이 남아 있으면 저장에 성공한 것이니, 마지막으로 삭제 버튼도 눌러 보세요.

5단계: 문제를 확인하고 저장해요

목록이 비어 있거나 버튼이 작동하지 않으면 직접 설정을 고치지 마세요. 클로드가 연결 정보, RLS, 화면 오류를 순서대로 확인하게 하세요.

/todos 페이지를 점검해줘.

확인할 것:
1. 할 일 추가, 목록 읽기, 완료 상태 변경, 삭제가 되는지
2. 새로고침 뒤에도 데이터가 남는지
3. todos 테이블의 RLS가 켜져 있는지
4. 네 가지 연습용 정책과 접근 권한이 todos 하나에만 적용됐는지
5. service_role이나 secret 키를 쓰지 않았는지
6. .env.local이 GitHub 저장 대상에서 빠졌는지

문제가 있으면 원인과 고칠 범위를 먼저 설명하고 해당 부분만 고쳐줘.
나에게 SQL이나 터미널 명령어를 직접 실행하라고 하지 마.

모두 맞으면 지금 상태를 저장하고 깃허브에 올려 줘.
실행 전에 바뀐 파일과 무엇을 할지 먼저 보여 줘.

브라우저 로그인이나 권한 승인 창이 나오면 직접 진행하세요. 승인 뒤 클로드가 네 동작과 보안 확인 결과를 보여 주면 실습이 끝나요.

데이터베이스는 인터넷 엑셀과 비슷해요

엑셀 파일은 내 컴퓨터에 있지만, Supabase의 데이터는 인터넷 창고에 있어요. 그래서 브라우저를 새로고침해도 다시 꺼내 볼 수 있어요.

RLS는 창고 문에 붙인 자물쇠이고, 정책은 출입증이에요. 공개용 키가 있어도 정책이 허락한 데이터와 동작에만 접근할 수 있어요.

CRUD는 네 가지 동작이에요

많은 서비스는 아래 네 동작을 조합해 만들어요. 영어를 외우기보다 화면에서 무엇이 달라지는지 확인하세요.

화면은 무대이고 데이터베이스는 무대 뒤 창고예요. 11강에서 만든 화면 뒤에 창고를 연결했기 때문에 입력한 내용이 남아요.

이번 강에서 기억할 것

Supabase는 인터넷에 있는 데이터 창고를 준비해 줘요. 테이블은 엑셀 시트, RLS는 자물쇠, 정책은 출입증으로 생각하면 돼요.

독자가 직접 다룰 값은 Project URL과 공개용 anon 또는 publishable 키뿐이에요. service_role과 secret 키는 브라우저나 대화창에 넣지 마세요.

이런 분께 추천해요

화면은 만들었지만 새로고침하면 내용이 사라지는 분께 알맞아요. 할 일 목록, 게시판, 회원 관리처럼 데이터를 저장하고 바꾸는 기능을 만들고 싶은 분도 여기서 시작할 수 있어요.

참고 링크

• Supabase 공식 사이트
• Supabase 시작 가이드 - Next.js
• Supabase JavaScript 클라이언트 문서
• Supabase Table Editor 가이드
• Supabase API 키 안내 (publishable / secret)
• Supabase RLS(행 수준 보안) 가이드

다음 강

13강: API 연동에서는 API(프로그램끼리 데이터를 주고받는 창구)를 통해 날씨처럼 외부 서비스의 데이터를 가져와요.

13강으로 넘어가기