Frontend Debugging and Testing (프런트엔드 디버깅 및 테스트)

📌 한 줄 통찰 (The Karpathy Summary)

"단순히 코드가 '돌아가게' 만드는 것을 넘어, 브라우저가 해석하는 런타임의 진실을 도구(DevTools)로 투시하고 잠재적 버그를 사전에 차단하는 자동화된 가드레일을 구축하라" — 고품질 프런트엔드 제품을 보장하는 기술적 추론 및 검증 프로세스.

추출된 패턴: "Runtime Inspection and Automated Verification" — 브라우저 개발자 도구를 통한 실시간 상태 분석과 단위/통합 테스트를 결합하여 개발 주기를 가속화하는 패턴.
핵심 디버깅 기술:
- Chrome DevTools Mastering: Elements(DOM/CSS), Console, Sources(Breakpoints), Network(API), Performance(Bottlenecks) 탭의 숙련된 활용.
- Source Maps: 난독화된 프로덕션 코드에서도 원본 소스 위치를 정확히 식별.
- Conditional Logging: 불필요한 로그 노출 없이 특정 조건에서만 디버그 정보를 출력하는 로깅 전략.
테스트 전략:
- Unit Testing: Vitest/Jest를 활용한 순수 함수 및 컴포넌트 로직 검증.
- Integration Testing: React Testing Library를 통한 컴포넌트 간 상호작용 및 DOM 렌더링 결과 확인.
- E2E Testing: Playwright/Cypress를 활용한 실제 사용자 여정(User Journey) 자동화 검증.
의의: 디버깅 시간을 단축시켜 개발 생산성을 높이고, 회귀 버그(Regression Bugs)를 방지하여 소프트웨어의 장기적인 신뢰성을 확보함.

과거 데이터와의 충돌: 과거에는 console.log에만 의존했으나, 현대 정책은 브라우저 중단점(Breakpoints)과 상태 관측 도구(React DevTools 등) 활용을 기본 원칙으로 함. 또한 테스트 코드를 '나중에' 짜는 관행을 버리고 기능 개발과 동시에 테스트를 구축하는 정책을 지향함.
정책 변화: Antigravity 프로젝트는 모든 치명적인 비즈니스 로직에 대해 80% 이상의 테스트 커버리지를 강제하며, 디버그 모드에서만 활성화되는 상세 추적 로그(Verbose Tracing) 정책을 시행함.