구현에서 배포까지 | 구현과 배포

Plan의 Task를 순서대로 실행하고, Spec Test로 최종 검증한 뒤, Vercel에 배포합니다

Overview

Spec, Wireframe, Plan이 완성되었습니다. 이번 레슨에서는 Plan의 Task를 실행하여 칸반 보드를 구현하고, Spec Test로 최종 검증한 뒤, Vercel에 배포합니다.

Plan을 승인하면 AI가 Task 순서대로 구현을 시작합니다.

Task 1에서 AI가 Spec의 성공 기준을 *.spec.test.tsx 파일로 변환합니다. 이후 Task들에서는 CLAUDE.md의 TDD 순서에 따라 구현 테스트 작성, 최소 코드 구현, 리팩터링을 반복합니다.

파일이 수정될 때마다 lint.sh Hook이 ESLint를 실행하여 코드 스타일을 자동 수정합니다. AI가 작업을 마치려 할 때는 Stop Hook이 현재 TDD 단계의 완료 조건을 확인하여, 테스트가 통과하지 않으면 작업을 계속하도록 합니다.

AI가 구현 중에 Spec Test를 수정하려 하면, CLAUDE.md의 불변 계약 규칙이 이를 차단합니다. AI는 테스트 대신 구현 코드를 수정하여 테스트를 통과시킵니다.

lesson-06-sdd-cycle-kanban

모든 Task가 완료되면, 세 가지를 확인합니다.

1. Spec Test 전부 통과

bun test

*.spec.test.tsx 파일의 모든 테스트가 통과하면, Spec의 성공 기준이 코드로 충족된 것입니다.

2. 브라우저에서 직접 확인

드래그 앤 드롭의 반응, 컬럼 레이아웃, 카드 편집 같은 UI 동작은 테스트로 잡기 어렵습니다. 직접 브라우저에서 시나리오별로 실행합니다.

3. Spec 성공 기준 대조

Spec의 성공 기준 목록을 하나씩 대조하고, 체크되지 않은 항목이 있으면 추가 구현을 지시합니다. Spec의 모든 성공 기준이 충족되면 SDD 사이클이 닫힌 것입니다.

로컬에서 동작하는 프로젝트를 누구나 접속할 수 있는 URL로 배포합니다. Vercel은 Next.js를 만든 회사의 배포 플랫폼으로, GitHub 저장소를 연결하면 자동으로 빌드하고 배포합니다.

Vercel 대시보드에서 Add New... > Project를 클릭합니다.

lesson-06-vercel-add-project

GitHub 저장소 목록에서 프로젝트를 찾아 Import를 클릭합니다.

lesson-06-vercel-import-repo