performance-checkerlisted

# Performance Checker Next.js/React 프로젝트의 배포 전 성능 품질을 종합 점검하는 스킬 ## Overview **대상**: Next.js (App Router 우선), React **전제**: 프로덕션 빌드 가능한 상태 **점검 영역 및 우선순위:** | 영역 | 우선순위 | 근거 | |------|----------|------| | 빌드 성공 여부 | Critical | 실패 시 배포 불가 | | First Load JS / gzip 번들 크기 | Critical | 사용자 체감 로딩 직결 | | Server/Client Component 경계 | High | 불필요한 클라이언트 번들 증가 | | 이미지 최적화 | High | LCP 직접 영향 | | 폰트 최적화 | High | CLS, LCP 영향 | | 코드 품질 (console.log, deprecated) | High | 프로덕션 노이즈 | | 네트워크 & 캐싱 헤더 | Medium | 반복 방문자 성능 | | 파일 무결성 | Medium | 런타임 404 방지 | > **CWV 런타임 측정**: LCP, INP, CLS 실측은 실행 중인 서버가 필요하다. 이 스킬은 코드 패턴 기반 정적 분석(LCP 이미지 `priority` 속성, CLS 방지 `width/height` 등)만 다룬다. 런타임 CWV는 `references/lighthouse-ci.md`의 CI 파이프라인을 참조하라. --- ## 프레임워크 감지 점검 시작 전 프레임워크를 확인하고, 해당하지 않는 명령어는 건너뛴다. ```bash # 프레임워크 확인 if [ -d "app" ] && [ -f "next.config.js" -o -f "next.config.mjs" -o -f "next.config.ts" ]; then echo "Next.js App Router" elif [ -d "pages" ] && [ -f "next.config.js" -o -f "next.config.mjs" ]; then echo "Next.js Pages Router" elif [ -f "vite.config.ts" ] || [ -f "vite.config.js" ]; then echo "Vite 프로젝트 — .next 관련 단계 건너뜀" else echo "기타 프레임워크 — 적용 가능한 단계만 실행" fi ``` --- ## Workflow ### Step 1: 빌드 점검 [Critical] ```bash npm run build > /tmp/perf_build.txt 2>&1 echo "빌드 종료 코드: $?" ``` **판단 분기:** - exit code != 0 → **즉시 중단**. 이후 단계 진행 불가. 오류 수정 후 재점검 필요 - TypeScript 오류 발견 → Critical 문제로 보고 - ESLint 에러 발견 → High 문제로 보고 - ESLint 경고만 발견 → Medium으로 기록 후 계속 진행 ```bash # 오류/경고 분