dev-wlisted

> **필수**: 이 스킬을 사용하기 전에 반드시 `~/.claude/skills/dev-g/SKILL.md`를 먼저 읽으십시오. > - 개발 주기 패턴(Case A/B), 완료 프로토콜, 의존 커맨드 → 모두 **dev-g에서 정의** > - 이 문서는 **웹 개발 특화 확장 내용만** 제공합니다. --- # 웹 프로젝트 빌드 및 검증 ## 빌드 단계 `/issue-fix` 구현 완료 후, 코드 커밋 전에 다음을 수행: 1. **린트 검사** ```bash npm run lint # 또는 yarn lint, pnpm lint ``` 2. **타입 체크** (TypeScript 프로젝트): ```bash npx tsc --noEmit ``` 3. **빌드 확인**: ```bash npm run build ``` ## 테스트 단계 | 단계 | 명령 | 설명 | | -------------- | -------------------------- | --------------------------- | | Unit Test | `npm run test` | Jest / Vitest 등 | | E2E Test | `npx playwright test` | Playwright / Cypress | | 브라우저 확인 | 로컬 서버 실행 후 수동 확인 | 크로스 브라우저 검증 | ## 로컬 서버 검증 웹 프로젝트는 UI 변경 이슈 해결 시 **로컬 서버 기반 검증**을 권장: 1. `npm run dev` (또는 프로젝트별 dev 명령)로 로컬 서버 실행 2. 변경 사항 브라우저에서 확인 3. 반응형 레이아웃 검증 (필요시) --- # 웹 프로젝트 완료 프로토콜 확장 dev-g의 완료 프로토콜에 다음 단계를 **코드 커밋 전에** 추가: 1. 린트 통과 확인 2. 타입 체크 통과 (TypeScript 프로젝트) 3. 빌드 성공 확인 4. 테스트 통과 확인 이후 dev-g 완료 프로토콜 (커밋 → 해시 확보 → 이슈 종결 → 문서 커밋 → 알림) 진행. --- # 웹 개발 카테고리 | 카테고리 | 설명 | 빌드/테스트 영향 | | ------------ | --------------------------------------- | ------------------------- | | **Frontend** | UI/UX, 컴포넌트, 스타일, 렌더링 | 린트 + 브라우저 확인 필수 | | **Backend** | 서버 로직, 비즈니스 계층, 데이터 처리 | Unit Test 필수 | | **Infra** | 배포, CI/CD, 환경 설정, 컨테이너