4.5 KiB
4.5 KiB
id, category, confidence_score, tags, last_reinforced, github_commit
| id | category | confidence_score | tags | last_reinforced | github_commit | |
|---|---|---|---|---|---|---|
| P-REINFORCE-AUTO-21F91F | 10_Wiki/💡 Topics/Graphics & Performance | 0.90 |
|
2026-04-20 | [P-Reinforce] Continuous Worker - Memory Leak Prevention 메모리 누수 방지 |
Memory Leak Prevention 메모리 누수 방지
📌 한 줄 통찰 (The Karpathy Summary)
React 애플리케이션 및 WebGL/Three.js 환경에서 해제되지 않은 타이머, 이벤트 리스너, 외부 객체 참조, 또는 GPU 자원으로 인해 시간이 지날수록 메모리 점유율이 증가하여 앱이 느려지거나 크래시되는 현상을 막기 위한 필수적인 자원 관리 및 최적화 기법입니다.
📖 구조화된 지식 (Synthesized Content)
1. React의 주요 메모리 누수 원인과 클린업(Cleanup) React 앱이 시간이 지날수록 느려지는 가장 흔한 원인은 언마운트(Unmount)된 컴포넌트의 잔재가 계속 남아 메모리를 점유하는 경우입니다.
- 미해제 타이머:
setInterval이나setTimeout을 실행한 뒤 정리하지 않으면 백그라운드에서 계속 동작합니다.useEffect의 클린업(return) 함수에서clearInterval등을 반드시 호출해야 합니다. - 미해제 이벤트 리스너:
window.addEventListener를 통해 등록한 이벤트도 컴포넌트가 사라질 때window.removeEventListener로 해제해야 합니다. - 열려있는 웹소켓 연결: 연결이 열린 채로 방치되지 않도록 클린업 시점에
ws.close()를 호출하여 연결을 닫아주어야 합니다.
2. 거대한 객체 참조 유지 방지 useRef 등을 사용하여 거대한 데이터 세트나 클로저를 참조하고 있는 경우, 컴포넌트 사용이 끝난 후에도 가비지 컬렉터(GC)가 해당 메모리를 회수하지 못합니다.
- 이를 방지하기 위해 작업이 완료된 거대한 객체 참조에는 명시적으로
null을 할당(processedRef.current = null)하여 메모리를 해제할 수 있도록 도와야 합니다.
3. Three.js / WebGL에서의 GPU 메모리 누수 방지 Three.js나 React Three Fiber(R3F)와 같은 3D 환경에서는 메모리 관리가 더욱 치명적입니다. 자바스크립트는 힙 메모리를 가비지 컬렉션(GC) 하지만, Three.js는 GPU 자원(Geometry, Material, Texture 등)을 자동으로 가비지 컬렉션하지 않습니다.
- 사용이 끝난 3D 객체는 반드시 명시적으로
.dispose()메서드를 호출하여 VRAM 메모리 누수를 막아야 합니다 (예: 4K 텍스처 하나가 64MB 이상의 VRAM을 낭비할 수 있습니다). - GLTF 모델의 텍스처(ImageBitmap 형태)는 누수를 막기 위해
texture.source.data.close?.()와 같이 명시적인 닫기 호출도 필요합니다.
4. 메모리 누수 탐지 및 모니터링 (Debugging & Monitoring)
- Chrome DevTools Memory Profiler: 특정 사용자 행동 전후의 힙 스냅샷(Heap Snapshots)을 찍어 비교하고, 할당 타임라인(Allocation Timelines)을 통해 가비지 컬렉션되어야 할 객체가 그대로 남아있는지 추적하여 누수 지점을 찾아냅니다.
- 개발 환경에서는
performance.memory.usedJSHeapSize를 모니터링하여 메모리 점유율이 일정 수치(예: 200MB)를 넘어가면 경고(Alert)를 발생시키도록 감시 코드를 작성해 선제적으로 대응할 수 있습니다.
⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- 과거 데이터와의 충돌: 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- 정책 변화: Graphics & Performance 분야의 자동 자산화 수행.
🔗 지식 연결 (Graph)
- Related Topics: useEffect 클린업(Cleanup), Garbage Collection (GC) 최적화, Three.js 자원 해제 (Dispose), Chrome DevTools Memory Profiler
- Projects/Contexts: 장기 실행되는 실시간 대시보드 최적화, 대규모 WebGL/R3F 3D 게임 환경의 메모리 관리
- Contradictions/Notes: 최신 자바스크립트 엔진은 매우 훌륭한 가비지 컬렉터(GC)를 갖추고 있으나, DOM 이벤트, 브라우저 API(타이머, 소켓), WebGL GPU 메모리 등 '자바스크립트 엔진 외부의 자원'과 연결된 참조는 GC가 임의로 판단해 지울 수 없습니다. 따라서 외부 자원과의 연결 고리는 개발자가 직접 끊어주어야만 완벽한 메모리 관리가 가능합니다.
Last updated: 2026-04-14