12강: 백엔드 기초

작성 2026-04-12읽는 시간 10분

데이터 저장하기

이제 데이터를 저장할 차례예요

11강에서 Next.js로 화면을 만들었어요. 레고 블록(컴포넌트)을 조립하고, 색칠 스티커(Tailwind CSS)를 붙여서 멋진 메인 페이지를 완성했죠. 11강 마지막에 이렇게 말씀드렸어요. "데이터베이스가 필요해요. Supabase라는 도구로 데이터 저장을 배워볼 거예요."

바로 오늘이에요.

그런데 왜 데이터베이스가 필요할까요? 지금까지 만든 화면에는 한 가지 문제가 있어요. 뭔가를 입력해도, 새로고침하면 전부 사라져요.

카카오톡을 생각해 보세요. 메시지를 보내고, 앱을 껐다가 다시 켜도 대화 내용이 그대로 있죠? 인스타그램에 사진을 올리면, 다음 날 열어도 그 사진이 남아있어요. 어떻게 가능할까요?

데이터베이스(Database, 데이터를 안전하게 보관하는 창고)가 있기 때문이에요. 지금까지 우리가 만든 건 무대 위 세트장이에요. 보이기만 할 뿐, 아무것도 저장되지 않아요. 오늘은 그 세트장 뒤에 창고를 만들어볼 거예요.

이건 뭐예요?

데이터베이스 = 인터넷 엑셀

엑셀을 써본 적 있으시죠? 엑셀의 구조를 떠올려 보세요.

시트(Sheet) 하나가 하나의 주제예요. "직원 목록" 시트, "매출 현황" 시트처럼요
시트 안에는 열(Column)이 있어요. "이름", "이메일", "전화번호" 같은 항목이에요
그리고 행(Row)에 실제 데이터가 한 줄씩 들어가요. "홍길동, hong@email.com, 010-1234-5678"

데이터베이스도 완전히 같아요. 이름만 다를 뿐이에요.

엑셀	데이터베이스	의미
시트	테이블(Table)	하나의 주제 묶음
열	컬럼(Column)	항목 이름 (이름, 이메일 등)
행	로우(Row)	실제 데이터 한 줄
통합 문서	데이터베이스(DB)	시트(테이블) 여러 개의 묶음

차이가 있다면, 엑셀은 내 컴퓨터에 파일로 저장되지만, 데이터베이스는 인터넷에 있는 창고에 저장돼요. 그래서 누가 어디서 접속하든 같은 데이터를 볼 수 있어요.

Supabase = 인터넷 엑셀 + 관리자

Supabase(수파베이스)는 이 인터넷 데이터베이스를 아주 쉽게 쓸 수 있도록 만들어 준 서비스예요. BaaS(Backend as a Service, 백엔드를 대신 해주는 서비스)라고 불러요.

비유하자면, 엑셀 프로그램을 설치할 필요 없이 구글 시트를 쓰는 것과 비슷해요. 가입만 하면 바로 테이블을 만들고, 데이터를 넣고, 읽고, 수정하고, 삭제할 수 있어요. 서버(데이터를 보관하고 처리하는 컴퓨터)를 직접 만들 필요가 전혀 없어요.

Supabase를 선택하는 이유는 간단해요.

기준	Supabase
배포가 쉬워?	가입하면 바로 사용. 서버 설정 불필요
AI가 잘 아나?	공식 문서가 풍부하고, Claude가 코드를 아주 잘 만들어줘요
무료로 충분해?	무료 플랜으로 프로젝트 2개, 500MB DB 제공

CRUD = 모든 서비스의 기본 뼈대

서비스를 만들 때, 데이터를 다루는 동작은 딱 4가지뿐이에요. 이걸 CRUD(크러드)라고 불러요.

휴대폰 주소록을 생각해 보세요.

동작	영어	주소록 비유
Create	만들기	새 연락처 추가
Read	읽기	연락처 검색해서 보기
Update	수정	전화번호 변경
Delete	삭제	연락처 삭제

카카오톡도 CRUD예요. 메시지 보내기(Create), 대화 목록 보기(Read), 메시지 수정(Update), 메시지 삭제(Delete). 인스타그램도요. 사진 올리기(Create), 피드 보기(Read), 캡션 수정(Update), 게시물 삭제(Delete).

세상의 모든 서비스는 이 4가지 동작의 조합이에요. CRUD만 할 줄 알면, 어떤 서비스든 만들 수 있어요.

환경 변수(.env) = 비밀 금고

Supabase에 연결하려면 API 키(API Key, 서비스에 접속하기 위한 비밀 열쇠)가 필요해요. 이 열쇠를 코드에 직접 적으면 안 돼요.

왜냐고요? 코드를 GitHub에 올리면, 전 세계 사람이 내 열쇠를 볼 수 있기 때문이에요. 마치 집 열쇠를 현관문에 테이프로 붙여놓는 것과 같아요. 누구나 가져갈 수 있어요.

그래서 환경 변수(Environment Variable)라는 걸 써요. .env.local이라는 특별한 파일에 비밀 정보를 따로 적어두는 거예요. 이 파일은 GitHub에 절대 올라가지 않아요.

# .env.local 파일 — 비밀 금고 역할
NEXT_PUBLIC_SUPABASE_URL=https://abcdefg.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

NEXT_PUBLIC_SUPABASE_URL — Supabase 프로젝트의 주소예요
NEXT_PUBLIC_SUPABASE_ANON_KEY — 프로젝트에 접속하기 위한 공개 열쇠예요. "공개 열쇠"라고 해서 아무나 써도 되는 건 아니에요. 허용된 동작만 할 수 있는 제한된 열쇠예요

이 값들은 Supabase 대시보드(프로젝트 관리 화면)에서 복사할 수 있어요. 나중에 실습에서 직접 해볼 거예요.

우리는 이렇게 쓰고 있어요

지금 여러분이 읽고 있는 AI//STUDY 사이트는 정적 사이트(데이터베이스 없이 파일만으로 동작하는 사이트)라서, Supabase를 직접 쓰고 있지는 않아요.

하지만 디온웍스에서 운영하는 다른 서비스들은 전부 Supabase를 쓰고 있어요.

DGHR(디지HR) — 직원 출퇴근 기록, 휴가 신청, 급여 정보를 Supabase에 저장해요. 직원이 GPS로 출근 체크를 하면 Create, 관리자가 출퇴근 현황을 보면 Read, 퇴근 시간이 수정되면 Update, 잘못된 기록을 삭제하면 Delete. 딱 CRUD예요
HoneyERP(허니이알피) — 거래처 정보, 견적서, 발주서 데이터를 전부 Supabase 테이블에 넣어요

이 서비스들 모두, 처음에는 오늘 배울 것과 똑같이 시작했어요. Supabase에 가입하고, 테이블을 만들고, 데이터를 넣고 읽는 것부터요.

한번 써볼까요?

1단계: Supabase 가입 + 프로젝트 만들기

https://supabase.com 에 접속해요
Start your project 버튼을 눌러요
GitHub 계정으로 로그인해요 (5강에서 만든 계정이면 돼요)
New Project 를 누르고, 이름을 지어요 (예: my-first-db)
비밀번호를 설정하고, 지역(Region)은 Northeast Asia (Seoul) 을 선택해요
Create new project 를 누르면 끝이에요. 1~2분이면 프로젝트가 만들어져요

2단계: 테이블 만들기

프로젝트가 만들어지면, 왼쪽 메뉴에서 Table Editor 를 클릭해요. 여기가 우리의 인터넷 엑셀이에요.

Create a new table 버튼을 누르고 이렇게 설정해요.

Name: todos (할 일 목록이라는 뜻이에요)
Columns (열 = 항목):
- id — 자동 생성 (기본으로 들어있어요, 건드리지 마세요)
- title — 타입: text (할 일 제목)
- is_done — 타입: bool (완료 여부. bool은 참/거짓 두 가지만 있는 타입이에요)
- created_at — 자동 생성 (기본으로 들어있어요)

Save 를 누르면, todos 테이블이 만들어져요. 엑셀에서 시트 하나를 새로 만든 거예요.

3단계: API 키 확인하기

상단 메뉴의 Connect 버튼을 누르면 연결에 필요한 값이 보여요. 또는 왼쪽 메뉴 아래쪽 Settings → API 에서도 확인할 수 있어요.

Project URL — https://xxxxxx.supabase.co 형태의 주소
API Key (anon / public) — 긴 문자열. 클라이언트(사용자 브라우저)에서 쓸 수 있는 열쇠예요

이 두 값을 복사해서, 프로젝트 폴더에 .env.local 파일을 만들어 넣어요.

4단계: 프로젝트에 Supabase 연결하기

11강에서 만든 Next.js 프로젝트에 Supabase를 연결할 거예요.

# 11강에서 만든 프로젝트 폴더로 이동
cd ~/my-service

# Supabase JavaScript 클라이언트 설치
npm install @supabase/supabase-js@latest

.env.local 파일을 프로젝트 루트(최상위 폴더)에 만들어요.

# .env.local — Supabase 접속 정보 (GitHub에 올라가지 않아요)
NEXT_PUBLIC_SUPABASE_URL=여기에_아까_복사한_Project_URL을_붙여넣으세요
NEXT_PUBLIC_SUPABASE_ANON_KEY=여기에_아까_복사한_anon_키를_붙여넣으세요

클로드 코드 터미널에서는 이렇게

전체 흐름을 처음부터 끝까지 정리해 드릴게요.

# ── 1. 프로젝트 폴더로 이동 (일반 터미널에서) ──
cd ~/my-service

# ── 2. Supabase 클라이언트 설치 ──
npm install @supabase/supabase-js@latest

# ── 3. Claude Code 시작 ──
claude

Claude Code가 열리면, 먼저 Supabase 연결 파일을 만들어 달라고 해요.

클로드 코드 대화창에서 ! 를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.

너는 10년차 풀스택 개발자야.
나는 코딩 1줄도 모르는 바이브 코더야.

Supabase 클라이언트 연결 파일을 만들어줘.

요구사항:
1. src/lib/supabase.ts 파일을 새로 만들어줘
2. .env.local에서 NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_ANON_KEY를 읽어서 Supabase 클라이언트를 생성해
3. createClient 함수를 import해서 쓰면 돼

안 할 것:
- 다른 파일은 건드리지 마
- 서버 사이드 렌더링 관련 설정은 하지 마 (지금은 클라이언트만)
- 외부 라이브러리 추가하지 마 (@supabase/supabase-js는 이미 설치됨)

코드에 한글 주석 달아줘.

Claude가 만들어준 src/lib/supabase.ts 파일(Supabase 연결 설정 파일)은 대략 이런 모습이에요.

// src/lib/supabase.ts — Supabase 연결 설정 파일
import { createClient } from '@supabase/supabase-js'

// .env.local에서 환경 변수를 읽어와요
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!

// Supabase 클라이언트 생성 — 이 객체로 DB에 접근해요
export const supabase = createClient(supabaseUrl, supabaseAnonKey)

이제 CRUD를 실습해볼 거예요. Claude에게 할 일 목록 페이지를 만들어 달라고 해요.

todos 테이블과 연동하는 할 일 목록 페이지를 만들어줘.

Supabase todos 테이블 구조:
- id: 자동 생성 (숫자)
- title: text (할 일 제목)
- is_done: bool (완료 여부, 기본값 false)
- created_at: 자동 생성 (날짜)

기능 (CRUD 전부):
1. Create — 입력 필드에 할 일을 적고 "추가" 버튼을 누르면 DB에 저장
2. Read — 페이지를 열면 저장된 할 일 목록이 전부 보임
3. Update — 할 일을 클릭하면 완료/미완료 토글(체크 표시)
4. Delete — 할 일 옆의 "삭제" 버튼을 누르면 DB에서 삭제

파일:
- src/app/todos/page.tsx에 만들어줘 (새 페이지)
- src/lib/supabase.ts는 이미 만들어져 있어 (import해서 써)

디자인:
- Tailwind CSS 사용
- 다크 배경, 밝은 글씨, 시안 포인트(#06b6d4)
- 모바일 반응형

안 할 것:
- 다른 파일은 건드리지 마
- 로그인/인증은 아직 하지 마
- 외부 라이브러리 추가하지 마

코드에 한글 주석 달아줘.

페이지가 만들어지면 확인해 보세요.

# ── 4. 개발 서버 실행 ──
! npm run dev

브라우저에서 http://localhost:3000/todos 를 열어보세요. 할 일을 추가하고, 체크하고, 삭제해 보세요. 새로고침해도 데이터가 남아있어요. 이게 데이터베이스의 힘이에요.

# ── 5. 잘 되면 커밋 ──
! git add .
! git commit -m "Supabase 연동 + 할 일 목록 CRUD 완성"

CRUD 코드가 실제로 뭘 하는 건지

Claude가 만들어준 코드 안에는 이런 패턴이 반복돼요. 직접 쓸 필요는 없지만, 어떤 일이 벌어지는지 알아두면 Claude에게 더 정확한 지시를 할 수 있어요.

Create (만들기) — 새 데이터를 테이블에 넣어요.

// "할 일 목록" 테이블에 새 항목 추가
const { data, error } = await supabase
  .from('todos')           // todos 테이블에서
  .insert({ title: '장보기' })  // 이 데이터를 넣어줘

Read (읽기) — 테이블에서 데이터를 가져와요.

// "할 일 목록" 테이블의 모든 항목 가져오기
const { data, error } = await supabase
  .from('todos')           // todos 테이블에서
  .select('*')             // 전부 다 가져와줘

Update (수정) — 기존 데이터를 바꿔요.

// id가 1인 할 일의 완료 상태를 true로 변경
const { data, error } = await supabase
  .from('todos')           // todos 테이블에서
  .update({ is_done: true })  // 이 값을 바꿔줘
  .eq('id', 1)             // id가 1인 것만

Delete (삭제) — 데이터를 지워요.

// id가 1인 할 일을 삭제
const { data, error } = await supabase
  .from('todos')           // todos 테이블에서
  .delete()                // 삭제해줘
  .eq('id', 1)             // id가 1인 것만

패턴이 보이시죠? 항상 supabase.from('테이블 이름') 으로 시작해요. 그다음에 .insert(), .select(), .update(), .delete() 중 하나를 붙이면 끝이에요. 엑셀에서 행을 추가하고, 검색하고, 수정하고, 삭제하는 것과 똑같아요.

이번 강에서 기억할 것

핵심만 정리해 볼게요.

데이터베이스는 인터넷 엑셀이에요. 테이블(시트), 컬럼(열), 로우(행)로 구성돼요. 내 컴퓨터가 아니라 인터넷 창고에 저장되니까, 새로고침해도 데이터가 사라지지 않아요.
Supabase는 데이터베이스를 쉽게 쓰게 해주는 서비스예요. 가입만 하면 테이블을 만들고 데이터를 관리할 수 있어요. 서버를 직접 만들 필요가 없어요.
CRUD는 모든 서비스의 뼈대예요. Create(만들기), Read(읽기), Update(수정), Delete(삭제). 이 4가지 동작의 조합으로 어떤 서비스든 만들 수 있어요.
API 키는 코드에 직접 쓰면 안 돼요. .env.local 파일(비밀 정보 보관용 파일)에 따로 보관하세요. 이 파일은 GitHub에 올라가지 않으니까 안전해요.
Supabase 코드 패턴은 하나예요. supabase.from('테이블').동작() — 이 구조만 기억하면 돼요. 실제 코드는 Claude가 만들어줘요.

다음 강에서는 13강: API 연동을 다뤄요. 오늘은 우리가 만든 데이터베이스에 직접 데이터를 넣고 읽었어요. 그런데 날씨 정보, 지도, 결제 같은 건 우리가 직접 만들 수 없잖아요? 다음 강에서는 남이 이미 만들어둔 기능을 가져다 쓰는 방법을 배워요. API(Application Programming Interface)라는 주문 창구를 통해서요.

이런 분께 추천해요

백엔드 기초는 "화면은 만들었는데, 데이터를 저장하고 싶은 분"을 위한 다음 단계예요.

11강에서 Next.js로 화면을 만들었는데, 새로고침하면 다 사라져서 아쉬웠던 분 — Supabase를 연결하면 데이터가 영구 보관돼요.
할 일 목록, 게시판, 회원 관리 같은 기능을 내 서비스에 넣고 싶은 분 — 모든 기능의 핵심은 CRUD예요. 오늘 배운 패턴으로 전부 만들 수 있어요.
서버를 직접 만드는 건 엄두가 안 나는 분 — Supabase가 서버 역할을 대신해줘요. 가입하고 테이블만 만들면 돼요.

참고 링크

▸개정 이력1건

v12026-04-12초판

이 글이 도움이 되었나요?

이제 데이터를 저장할 차례예요​

이건 뭐예요?​

데이터베이스 = 인터넷 엑셀​

Supabase = 인터넷 엑셀 + 관리자​

CRUD = 모든 서비스의 기본 뼈대​

환경 변수(.env) = 비밀 금고​

우리는 이렇게 쓰고 있어요​

한번 써볼까요?​

1단계: Supabase 가입 + 프로젝트 만들기​

2단계: 테이블 만들기​

3단계: API 키 확인하기​

4단계: 프로젝트에 Supabase 연결하기​

클로드 코드 터미널에서는 이렇게​

CRUD 코드가 실제로 뭘 하는 건지​

이번 강에서 기억할 것​

이런 분께 추천해요​

참고 링크​