AI 요약관련 정보

• 메모리 누수는 프로그램이 더 이상 필요 없는 메모리를 계속 보유하여 애플리케이션 충돌을 유발하는 현상입니다. 💥
• 이전 비디오에서는 'allocations on timeline' 및 'heap snapshot' 도구를 사용하여 메모리 누수를 찾는 방법을 다루었습니다. 📸
• '분리된 요소(Detached Element)'는 DOM에서 제거되었지만 JavaScript 코드에서 여전히 참조되고 있는 요소를 의미하며, 이는 메모리 누수의 한 형태입니다. 👻
• 모든 분리된 요소가 해로운 것은 아니며, 나중에 다시 렌더링될 메뉴나 툴바 같은 요소는 일시적으로 분리될 수 있습니다. 🧘
• 분리된 요소의 수가 증가하거나 크기가 크고 메모리에 유지될 필요가 없을 때 성능에 부정적인 영향을 미칠 수 있습니다. 📉
• 분리된 요소를 찾는 첫 번째 방법은 'heap snapshot' 도구에서 'detached' 키워드로 필터링하는 것입니다. 🔍
• 'detached elements'라는 전용 도구를 사용하여 분리된 노드의 일반적인 개요와 노드 트리를 확인할 수 있지만, 이 도구는 참조자(retainers)를 보여주지 않습니다. 🌳
• 분리된 요소의 참조자를 찾으려면 다시 'memory heap snapshot' 도구를 사용하여 특정 분리된 요소를 선택한 후 'retainers' 탭을 확인해야 합니다. 🔗
• 예시에서 메모리 누수의 원인은 동적으로 생성된 컴포넌트가 파괴될 때 ComponentRef 인스턴스에 대한 참조가 명시적으로 해제되지 않아 DOM 노드와 컴포넌트 인스턴스가 가비지 컬렉션되지 못하는 것이었습니다. 🚫
• 해결책은 컴포넌트 파괴 직후 componentRef 속성을 undefined로 설정하여 참조를 제거하는 것입니다. 🧹
• 여러 파괴 지점이 있는 경우, ComponentRef의 onDestroy 콜백을 사용하여 정리 로직을 중앙 집중화하는 것이 코드 중복을 피하는 더 나은 방법입니다. 🔄
• 수정 후 'detached elements' 도구와 'memory heap snapshot' 도구를 통해 메모리 누수가 성공적으로 해결되었음을 검증할 수 있습니다. ✅