실습으로 배우는 바이브코딩 with 클로드코드 · 5장
5장 — 상호작용 페이지 · 홈페이지 방명록
이 장의 결과물 — 로그인하고 글이 남는 방명록, 내가 발행하는 블로그, 그리고 나만 여는 관리자 화면. 4장이 API 홈페이지에 로그인을 붙인 장이라면, 5장은 거기에 데이터베이스를 붙이는 장입니다. 데이터베이스를 이해하고 → 도우미 둘(디자이너·개발자)과 방명록을 완성한 뒤 → 블로그·관리자·텔레그램 알림까지 얹습니다. 도구: Supabase · Claude Code 서브에이전트 · GitHub · Vercel.
DECK 1
데이터베이스 이해
껐다 켜도 남아 있는 앱을 만들기 위한 개념 잡기 — 데이터 창고·CRUD·SQL/NoSQL, 그리고 우리가 쓸 Supabase까지. 이 개념이 덱 2에서 진짜 앱으로 연결됩니다.
7 슬라이드 →
DECK 2
서브에이전트 + 홈페이지 방명록
일을 나눠 맡는 도우미 둘(디자이너·개발자)을 말로 부탁해 만들어 — 둘이 동시에 내 홈페이지에 방명록을 답니다. 덱 1의 Supabase에 저장하고, 이모지 반응·삭제·필터·방문자 수 확장에 서로 방문까지.
18 슬라이드 →
DECK 3
블로그 + 관리자 + 알림
내가 발행하는 블로그, 나만 들어가는 /admin, 그리고 새 글이 달리면 오는 텔레그램 알림 — 3장에서 만든 봇을 그대로 다시 씁니다. 화면을 숨기는 것과 데이터베이스로 막는 것의 차이까지.
13 슬라이드 →