Verification Loop Skill

코드 작성 후 빌드, 테스트, 린트를 순차적으로 실행하여 코드 품질을 검증하는 skill입니다.

---

검증 루프 다이어그램

┌─────────────────────────────────────────────────────────┐
│                    Verification Loop                     │
├─────────────────────────────────────────────────────────┤
│                                                         │
│   [빌드] ────► [테스트] ────► [린트] ────► [완료]        │
│      │            │            │                        │
│      ▼            ▼            ▼                        │
│   실패 시      실패 시      실패 시                      │
│   수정 후      수정 후      수정 후                      │
│   재실행      재실행       재실행                        │
│                                                         │
└─────────────────────────────────────────────────────────┘

---

워크플로우

Step 1: 빌드 검증

# TypeScript 타입 체크
pnpm tsc --noEmit

# 또는 전체 빌드
pnpm build

실패 시:

1. 에러 메시지 분석
2. 한 번에 하나씩 수정
3. 빌드 재실행
4. 모든 에러 해결까지 반복

일반적인 빌드 에러:

에러	해결 방법
TS2304 (Cannot find name)	import 추가
TS2339 (Property not exist)	타입 확장/가드
TS2345 (Argument mismatch)	타입 변환
Module not found	패키지 설치/경로 확인

Step 2: 테스트 실행

# 테스트 실행
pnpm test

# 변경된 파일 관련 테스트만
pnpm test --changed

# 특정 파일 테스트
pnpm test -- path/to/file.test.ts

실패 시:

1. 실패한 테스트 분석
2. 코드 버그인지 테스트 오류인지 판단
3. 적절한 수정 진행
4. 테스트 재실행

테스트 디버깅 팁:

# 단일 테스트만 실행
pnpm test -- -t "테스트 이름"

# 디버그 모드
pnpm test -- --verbose

Step 3: 린트 검사

# 린트 검사
pnpm lint

# 자동 수정
pnpm lint --fix

실패 시:

1. 자동 수정 가능한 에러 먼저 처리 (--fix)
2. 수동 수정 필요한 에러 해결
3. 린트 재실행

일반적인 린트 에러:

에러	해결 방법
unused-imports	import 제거
no-unused-vars	변수 사용 또는 제거
react-hooks/exhaustive-deps	deps 배열 수정
@typescript-eslint/no-explicit-any	타입 명시

Step 4: 커버리지 확인 (선택)

pnpm test --coverage

커버리지 기준:

영역	최소 커버리지
일반 코드	80%
핵심 로직	100%

---

검증 결과 보고

성공 시

✅ 검증 완료
├── 빌드: ✅ 성공
├── 테스트: ✅ 통과 (24개 테스트)
├── 린트: ✅ 에러 없음
└── 커버리지: 87%

실패 시

❌ 검증 실패
├── 빌드: ✅ 성공
├── 테스트: ❌ 실패 (2개 실패)
│   ├── src/utils/cart.test.ts - calculateTotal
│   └── src/hooks/useCart.test.ts - addItem
├── 린트: ⏸ (테스트 실패로 미실행)
└── 다음 단계: 실패한 테스트 수정

---

검증 루프 원칙

순차 실행

검증은 반드시 순서대로 진행합니다:

1. 빌드 → 실패하면 테스트 실행 불가
2. 테스트 → 실패하면 코드 품질 미검증
3. 린트 → 코드 스타일 최종 확인

실패 시 중단

이전 단계가 실패하면 다음 단계로 진행하지 않습니다.

빌드 실패 → 테스트 스킵 → 린트 스킵

점진적 수정

여러 에러가 있어도 한 번에 하나씩 수정합니다.

에러 1 수정 → 재실행 → 에러 2 수정 → 재실행 → ...

---

자동화 스크립트

프로젝트에 검증 스크립트 추가 (선택):

// package.json
{
  "scripts": {
    "verify": "pnpm tsc --noEmit && pnpm test && pnpm lint"
  }
}

실행:

pnpm verify