AI 요약관련 정보

• 메모리 누수는 프로그램이 더 이상 필요 없는 메모리를 계속 보유하는 현상으로, 앱 충돌이나 응답 없음의 주요 원인입니다. 🧠
• JavaScript의 자동 가비지 컬렉션에도 불구하고, 전역 변수, 해제되지 않은 타이머, 정리되지 않은 이벤트 핸들러, 클로저 등으로 인해 암묵적인 참조가 발생하여 누수가 생길 수 있습니다. 🔗
• 메모리 누수는 실행 횟수와 상관없이 크기가 일정한 '정적' 누수와 실행할수록 메모리 사용량이 증가하여 앱 충돌을 유발하는 '동적' 누수로 나뉩니다. 📈
• 정확한 디버깅을 위해 시크릿 모드 브라우저와 프로덕션 빌드를 사용하고, Angular 앱의 경우 ng_build_mangle=false 환경 변수를 설정하는 것이 좋습니다. 🛠️
• Chrome 개발자 도구의 'Performance' 탭에서 메모리 사용량 그래프를 통해 전반적인 누수 징후(지속적인 메모리 증가)를 파악할 수 있습니다. 📊
• 'Memory' 탭에서는 'Memory Snapshot'으로 특정 시점의 메모리 상태를 기록하고, 'Allocations on Timeline'으로 실시간 메모리 할당을 추적하여 누수 객체를 식별할 수 있습니다. ⏱️
• 두 개 이상의 'Heap Snapshot'을 비교하여 생성/삭제된 객체 수의 'Delta'를 확인하면, 누수가 의심되는 객체(예: SafeSubscriber, WeatherContentComponent)를 명확히 찾아낼 수 있습니다. 🔍
• 누수 객체를 선택한 후 'Retainers' 탭에서 참조 체인을 분석하여 가비지 컬렉션을 방해하는 코드(예: 처리되지 않은 RxJS 구독)를 찾아 해결할 수 있습니다. 🕸️
• RxJS 구독으로 인한 메모리 누수는 takeUntilDestroyed와 같은 연산자를 사용하여 컴포넌트 파괴 시 구독을 해제함으로써 해결할 수 있습니다. ✅
• DOM 요소 분리(detached element)와 같은 다른 유형의 메모리 누수도 존재하며, 이는 추가적인 디버깅이 필요합니다. 👻