---
id: P-REINFORCE-AUTO-21F91F
category: "10_Wiki/💡 Topics/Graphics & Performance"
confidence_score: 0.90
tags: [auto-reinforced]
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Continuous Worker - Memory Leak Prevention 메모리 누수 방지"
---

# [[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)|useEffect 클린업(Cleanup)]], [[Garbage Collection (GC) 최적화|Garbage Collection (GC) 최적화]], [[Three.js 자원 해제 (Dispose)|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_
- Raw Source: 00_Raw/2026-04-20/Memory Leak Prevention 메모리 누수 방지.md
---