2nd/00_Raw/Frontend Debugging.md

# [[Frontend Debugging]]

## 📌 Brief Summary
프론트엔드 디버깅은 프로덕션 환경이나 개발 과정에서 발생하는 자바스크립트 오류, 메모리 누수, 그리고 불필요한 리렌더링 같은 성능 저하의 근본 원인을 식별하고 해결하는 과정입니다 [1-4]. 현대의 복잡한 프론트엔드 시스템에서는 단순한 콘솔 로그를 넘어 브라우저 개발자 도구, React 전용 프로파일러, 그리고 Sentry나 LogRocket과 같은 클라우드 기반 로깅 및 세션 리플레이 도구를 적극적으로 활용합니다 [2, 5-7]. 또한, React 환경에서는 Error Boundary를 통해 런타임 에러를 격리하여 앱 전체가 멈추는 것을 방지하는 방어적 프로그래밍 전략이 필수적으로 동반됩니다 [8, 9].

## 📖 Core Content
- **메모리 누수(Memory Leaks) 및 힙 메모리 디버깅**
  - 자바스크립트에서 할당된 메모리가 제대로 해제되지 않고 계속 축적될 때 메모리 누수가 발생하며, 이는 앱의 성능 저하 및 크래시로 이어집니다 [10, 11].
  - **Chrome DevTools의 Heap Snapshots:** 이를 통해 메모리 덤프를 비교하고 "Detached DOM nodes(분리된 DOM 노드)"나 클로저로 인해 불필요하게 유지되고 있는 객체 참조를 식별할 수 있습니다 [12-15].
  - **Allocation Timeline:** 애플리케이션과 상호작용하는 동안 실시간으로 메모리가 할당되는 패턴을 추적하여 누수가 발생하는 정확한 시점을 시각적으로 파악할 수 있습니다 [16-18].
  - 객체 캐싱으로 인한 메모리 누수를 방지하기 위해 일반 객체 대신 가비지 컬렉션이 가능한 `WeakMap`을 활용하는 것이 권장됩니다 [19].

- **React 렌더링 성능 및 상태 관리 디버깅**
  - **React DevTools Profiler:** 렌더링이 발생한 컴포넌트, 렌더링 소요 시간, 그리고 렌더링을 유발한 원인(props 또는 state의 변경)을 정확히 분석하여 병목 지점을 찾습니다 [7, 20].
  - **why-did-you-render:** 개발 환경에서 props나 state의 변경 없이 발생하는 불필요한 리렌더링을 콘솔 경고로 표시해주어, 낭비되는 렌더링을 방지하는 데 유용합니다 [21, 22].
  - 복잡한 비동기 작업 및 상태를 관리할 때, Context API는 상태 추적이 어렵지만 Redux는 Redux DevTools를 통해 상태 변경 내역을 확인하고 액션을 재현할 수 있는 '시간 여행(Time-travel) 디버깅' 기능을 제공하여 디버깅 속도를 크게 높여줍니다 [23-25].

- **프로덕션 클라우드 로깅 및 모니터링 도구**
  - **Sentry:** 오류를 지능적으로 그룹화하고, 콘솔 로그와 네트워크 요청, 사용자 액션을 포함한 Breadcrumb 트레일을 제공하여 오류 발생 전후의 컨텍스트를 파악합니다 [5, 26].
  - **LogRocket:** 사용자의 화면과 함께 DOM 변경, Redux/Vuex 상태 변화, 네트워크 응답을 비디오처럼 기록하는 세션 리플레이(Session replay)를 제공하여 디버깅 맥락을 완벽히 제공합니다 [6, 26, 27].
  - **Datadog RUM 및 SigNoz:** 프론트엔드 에러 클릭 시 분산 시스템의 백엔드 트레이스(Traces)와 인프라 메트릭까지 연결하는 End-to-end 추적 기능을 제공합니다 [28-30].

- **에러 바운더리(Error Boundaries)를 통한 UI 에러 격리**
  - React 클래스 컴포넌트로 구현되는 Error Boundary는 자식 컴포넌트 트리의 렌더링, 수명 주기 메서드 등에서 발생하는 JavaScript 오류를 잡아냅니다 [9, 31].
  - 서드파티 위젯이나 복잡한 폼 같은 불안정한 UI 섹션을 Error Boundary로 개별 래핑하면, 오류 발생 시 전체 앱이 충돌하여 "백지 화면"이 표시되는 것을 막고, 친숙한 Fallback UI(대체 화면)를 대신 보여줄 수 있습니다 [8, 32, 33].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Error Boundaries]], [[Performance Optimization]], [[State Management]]
- **Projects/Contexts:** [[확장 가능한 React 아키텍처 및 폴더 구조 설계]], [[프론트엔드 클라우드 로깅 도구 도입 및 프로덕션 모니터링]]
- **Contradictions/Notes:** Error Boundaries는 선언형 컴포넌트 트리 내의 렌더링 에러는 훌륭하게 잡아내지만, 이벤트 핸들러(Event handlers)나 `setTimeout` 등의 비동기 코드에서 발생하는 에러는 감지하지 못하므로, 해당 영역에서는 일반적인 `try/catch` 블록을 별도로 사용해야 합니다 [34, 35]. 또한 Datadog과 같은 통합 가시성 도구는 매우 강력하지만, 인제스트(수집)와 인덱싱(검색 활성화)을 각각 과금하는 이중 가격 모델 때문에 대규모 트래픽에서 비용이 기하급수적으로 증가할 수 있다는 한계가 있습니다 [36, 37].

---
*Last updated: 2026-04-26*