5 / 9약 50분입문

저장하기 — 올리면 남는 글

새로고침해도 글이 남아야 ‘앱’이다

이 장을 끝내면

왜 로컬 state만으로는 안 되나

React state는 새로고침하면 사라집니다. ‘남는 정보’는 데이터베이스(또는 파일 서버)에 저장해야 합니다. 비유: 메모장 앱 끄면 날아가는 임시 메모 vs 클라우드 문서.

최소 테이블 설계 (종이로)

결과물 표 하나면 충분합니다.

builds
- id: 자동 번호
- title: 제목 (글자)
- tagline: 한 줄 (글자)
- project_url: 링크 (글자, 비어 있어도 됨)
- created_at: 만든 시각

지금 하기

Supabase를 고르는 이유 (초보)

표(DB)+가입(인증)+웹 대시보드가 한곳에 있어 바이브 예제가 많습니다. 가입 후 새 프로젝트 → Table 생성. 연결 주소와 anon 키는 ‘환경 변수’로만 다룹니다.

에이전트에게 복붙

Supabase builds 테이블(제목·한 줄·링크·생성시각) 기준으로 Next에 목록 읽기+생성 폼을 연결해줘. env 이름은 표준으로. RLS는 일단 개발용으로 안전하게 최소 설정안을 설명하고, 프로덕션 전에는 잠가야 한다고 경고해줘.

폼 화면 완료 조건

‘올리기’ 페이지 기준.

완료 조건:
[ ] /builds/new 에 제목·한 줄·링크 입력칸
[ ] 제출 성공 시 목록(/) 또는 상세로 이동
[ ] 제목 비우면 제출 안 됨 (에러 메시지)
[ ] 새로고침 후에도 글이 남아 있음

사람이 확인하는 순서

막히면

보안 경고 (지금 꼭)

테이블을 세상에 열어 두면 누구나 글을 지울 수 있습니다. 학습 단계에서는 ‘테스트 프로젝트’만 쓰고, 공개 전에 로그인·RLS(행 권한)를 다음 장에서 다룹니다.

Supabase builds 테이블(제목·한 줄·링크·생성시각) 기준으로 Next에 목록 읽기+생성 폼을 연결해줘. env 이름은 표준으로. RLS는 일단 개발용으로 안전하게 최소 설정안을 설명하고, 프로덕션 전에는 잠가야 한다고 경고해줘.

완료 조건: [ ] /builds/new 에 제목·한 줄·링크 입력칸 [ ] 제출 성공 시 목록(/) 또는 상세로 이동 [ ] 제목 비우면 제출 안 됨 (에러 메시지) [ ] 새로고침 후에도 글이 남아 있음