4주 학습 프로젝트
목표는 영화 서비스가 아니라 인증 플로우와 배포·렌더링 전략을 직접 부딪혀 익히는 것.
배포 상태
환경변수 주입 여부
값이 아니라 주입 여부만 표시합니다. 로컬에선 되는데 배포하면 undefined 나는 상황을 여기서 잡습니다.
kobisApiKeysupabaseUrlsupabaseServiceKeycronSecretjwtAccessSecretjwtRefreshSecrettmdbApiKey
1주차 — 파이프라인 관통
완료 조건: 배포된 URL에서 어제자 박스오피스가 보인다
- nuxi init → GitHub → Vercel 연결
- Supabase 프로젝트 생성
- movies 테이블
- daily_boxoffice 테이블 (movie_cd + target_date 복합 PK)
- server/api/collect.post.ts — KOBIS 수집 후 upsert
- vercel.json Cron 등록
- 박스오피스 목록 화면
2주차 — 인증 — 서버 쪽
완료 조건: API 클라이언트로 로그인하면 토큰이 나온다
- users 테이블 (email, password_hash, created_at)
- auth/signup.post.ts
- auth/login.post.ts
- auth/refresh.post.ts
- auth/logout.post.ts
- bcrypt 해싱 (saltRounds: 10)
- access 15분(바디) / refresh 7일(httpOnly 쿠키)
- 토큰 검증 미들웨어
3주차 — 인증 — 클라이언트 쪽 ★
완료 조건: A: 새로고침해도 로그인 유지 / B: 15분 지나도 화면이 안 끊긴다
- [A] useAuth composable
- [A] 로그인 / 로그아웃 화면
- [A] 라우트 미들웨어로 보호 라우트 가드
- [A] 401 → 로그인 페이지 리다이렉트
- [B] $fetch 인터셉터 — 401이면 조용히 refresh 후 재시도
- [B] 갱신 큐 — 동시 401 5개여도 refresh는 1번만
- [B] SSR 세션 하이드레이션
- [B] 탭 간 동기화 (BroadcastChannel)
4주차 — 렌더링 전략 + 마감
완료 조건: 로그아웃 상태로 마이페이지 URL 직접 입력 → 로그인 페이지로 리다이렉트
- routeRules — 목록 ISR / 상세 prerender / 마이페이지 CSR
- watchlist, ratings 테이블
- 소유권 검증 (남의 id 넣어보고 막히는지 확인)
- SQL 뷰로 순위 변동 계산 (lag 윈도우 함수)
- TMDB 포스터·줄거리 보강
- 로딩 / 에러 상태, 반응형