백엔드 기초

저장에는 두 단계가 있습니다

1단계: 브라우저에 저장 (localStorage)

새로고침해도 남아 있지만, 이 브라우저에서만 보입니다. 폰에서 열면 없습니다. 회원 개념도 없습니다.

• 장점: 서버 없이 5분이면 됨
• 쓸 때: 설정값, 임시 입력, 로그인 없는 개인용 도구

2단계: 데이터베이스에 저장

서버에 저장되어 어디서 열어도 같은 데이터가 보입니다. 사용자별로 구분할 수 있습니다.

• 장점: 진짜 서비스
• 쓸 때: 여러 기기, 여러 사용자, 데이터가 자산인 경우

오늘은 1단계를 10분 만에 끝내고, 2단계를 합니다.

따라하기 1: 브라우저 저장 (10분)

확인: 재료 추가 → 새로고침 → 남아 있음 → 커밋.

TODO.md의 "새로고침해도 남기" 조각이 끝났습니다. (개발자 도구 F12 → Application → Local Storage에서 ingredients 항목을 눈으로 볼 수도 있습니다.)

데이터베이스 고르기: Supabase

입문자에게 추천하는 조합은 Supabase(데이터베이스를 웹 화면에서 관리해주는 서비스)입니다.

• PostgreSQL이라는 검증된 데이터베이스를 웹 화면에서 관리
• 테이블을 엑셀처럼 화면에서 만들고 볼 수 있음
• 14강의 로그인 기능도 같이 제공
• 무료 플랜으로 충분

따라하기 2: Supabase 프로젝트 만들기

1. supabase.com 가입 → New project → 이름, 비밀번호(메모!), 지역은 Northeast Asia (Seoul)
2. 왼쪽 Table Editor → New table
3. 첫 테이블을 만듭니다. 예: saved_menus

컬럼	타입	설명
id	int8	자동 (기본 생성됨)
created_at	timestamptz	자동 (기본 생성됨)
name	text	메뉴 이름
ingredients	text	재료 (쉼표 구분)

4. Settings → API 에서 Project URL과 anon public 키를 복사해둡니다.

환경변수: 키는 코드에 적지 않습니다

복사한 URL과 키는 코드에 직접 적으면 GitHub에 올라가서 누구나 볼 수 있습니다. 프로젝트 루트에 .env.local 파일을 만들어 넣습니다.

NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...

.env.local은 Next.js가 기본으로 Git에서 제외합니다(.gitignore). Code 탭에서 확인합니다.

"git이 .env.local을 추적하지 않는지 확인해줘. 파일 내용은 출력하지 마."

추적하지 않는다고 답하면 정상입니다.

터미널로도 할 수 있어요

git status

.env.local이 목록에 안 보이면 정상입니다.

따라하기 3: 연결하고 저장하기

이제 AI에게 시킵니다. 라이브러리(남이 만든 코드 묶음) 설치가 필요하니 허락을 포함해서, 3단계로 나눠 보냅니다.

단계 1: 연결 파일 만들기

확인: VS Code에 src/lib/supabase.ts가 생겼고, 파일 안에 키 값이 직접 적혀 있지 않고 process.env로 읽는 줄이 보입니다.

단계 2: 저장 버튼

확인: 저장을 누르고 Supabase Table Editor를 새로고침하면 방금 저장한 행이 생깁니다.

단계 3: 목록 화면

확인: 주소창에 /menus를 붙이면 저장한 메뉴가 최신순으로 보입니다.

폰에서 보이려면 Vercel에도 환경변수를 넣어야 합니다: Vercel 프로젝트 → Settings → Environment Variables에 같은 두 값 추가 → Redeploy. (16강에서 정리하지만 오늘 해두면 좋습니다.)

오늘의 체크리스트

직접 해보고 눈으로 확인한 것만 체크하세요.

더 해보기(선택)

본 과정에 꼭 필요하지 않은 심화입니다. 시간이 남거나 더 궁금할 때 해보세요.

CRUD 나머지 채우기

읽기(R)와 만들기(C)가 됐으니, 지우기(D)와 고치기(U)는 조각 하나씩:

다음 강의

13강, 가짜 메뉴 대신 진짜 AI가 추천하게. 외부 API 붙이기.