topic★★★★★난이도 · 약 18분
구현과 검증 — 코드 생성, 테스트, 리뷰
AI에게 구현을 지시하고, 테스트와 브라우저 확인으로 결과를 검증하는 과정.
#구현#검증#테스트#코드 리뷰
왜 배우는가
AI가 생성한 코드를 무조건 신뢰하면 안 된다. 구현 후 반드시 검증하는 습관이 바이브코딩의 품질을 결정한다.
Plan 모드로 설계를 확인했다면 이제 구현 단계다. AI에게 구현을 지시할 때는 작은 단위로 나눠서 요청하는 것이 핵심이다.
| 검증 방법 | 명령어 / 동작 | 확인 내용 |
|---|---|---|
| 타입 검사 | `npx tsc --noEmit` | 타입 에러 없는지 |
| 린트 | `npx eslint .` | 코드 스타일 · 잠재 버그 |
| 테스트 실행 | `npm test` | 기존 기능이 깨지지 않았는지 |
| 브라우저 확인 | `npm run dev` → 직접 확인 | UI가 의도대로 보이는지 |
| 빌드 확인 | `npm run build` | 프로덕션 빌드 성공 여부 |
bash
# 구현 지시 예시 (작은 단위로)
"ProfileCard 컴포넌트를 먼저 만들어줘.
프로필 사진, 닉네임, 가입일을 보여주면 돼."
# AI가 코드를 생성하면 → 검증
"타입 에러 없는지 확인해줘"
# → AI가 npx tsc --noEmit 실행
"개발 서버 띄우고 화면 확인할게"
# → npm run dev 실행 후 브라우저에서 직접 확인
# 문제 발견 시 구체적으로 피드백
"프로필 사진이 너무 크다. 64px 원형으로 바꿔줘"
# → AI가 Edit 도구로 수정한 컴포넌트 완성 → 검증 → 다음 컴포넌트로 진행하는 단위 반복이 품질을 높인다.
코드 리뷰 요청 — AI에게 자신의 코드를 리뷰하게 할 수도 있다. "방금 만든 코드를 리뷰해줘. 보안 문제, 성능 문제, 접근성 문제가 있는지 확인해"라고 하면 AI가 잠재적 이슈를 찾아준다.
검증의 3단계 체크리스트: (1) 빌드 성공 — `npm run build`가 에러 없이 완료되는가? (2) 눈으로 확인 — 브라우저에서 의도한 대로 보이는가? (3) 엣지 케이스 — 빈 데이터, 긴 텍스트, 모바일 화면에서도 정상인가?