[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,108 +2,211 @@
|
||||
id: wiki-2026-0508-memory-leak-prevention-메모리-누수-방지
|
||||
title: Memory Leak Prevention 메모리 누수 방지
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [P-Reinforce-AUTO-21F91F]
|
||||
aliases: [memory leak, JS leak, frontend memory leak]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
tags: [auto-reinforced]
|
||||
verification_status: applied
|
||||
tags: [memory, leak, performance, javascript, frontend]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - [[memory|memory]] Leak Prevention 메모리 누수 방지"
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: JavaScript
|
||||
framework: Browser/Node
|
||||
---
|
||||
|
||||
# [[Memory Leak Prevention 메모리 누수 방지|Memory Leak Prevention 메모리 누수 방지]]
|
||||
# Memory Leak Prevention 메모리 누수 방지
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> React 애플리케이션 및 [[WebGL|WebGL]]/Three.js 환경에서 해제되지 않은 타이머, 이벤트 리스너, 외부 객체 참조, 또는 GPU 자원으로 인해 시간이 지날수록 메모리 점유율이 증가하여 앱이 느려지거나 크래시되는 현상을 막기 위한 필수적인 자원 관리 및 최적화 기법입니다.
|
||||
## 매 한 줄
|
||||
> **"매 GC 가 있어도 reachable reference 는 free 안 됨 — leak 의 본질은 매 잊혀진 reference"**. SPA 의 long-lived session 에서 매 점진적 RAM 증가 → tab crash. 매 listener cleanup, closure escape, detached DOM, timer 가 4대 leak. 매 Chrome DevTools Memory + WeakRef 가 무기.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
**1. React의 주요 메모리 누수 원인과 클린업(Cleanup)** React 앱이 시간이 지날수록 느려지는 가장 흔한 원인은 언마운트(Unmount)된 컴포넌트의 잔재가 계속 남아 메모리를 점유하는 경우입니다.
|
||||
## 매 핵심
|
||||
|
||||
- **미해제 타이머:** `setInterval`이나 `setTimeout`을 실행한 뒤 정리하지 않으면 백그라운드에서 계속 동작합니다. `useEffect`의 클린업(return) 함수에서 `clearInterval` 등을 반드시 호출해야 합니다.
|
||||
- **미해제 이벤트 리스너:** `window.addEventListener`를 통해 등록한 이벤트도 컴포넌트가 사라질 때 `window.removeEventListener`로 해제해야 합니다.
|
||||
- **열려있는 웹소켓 연결:** 연결이 열린 채로 방치되지 않도록 클린업 시점에 `ws.close()`를 호출하여 연결을 닫아주어야 합니다.
|
||||
### 매 4대 leak 패턴
|
||||
- **Listener leak**: 매 `addEventListener` 후 `removeEventListener` 없음.
|
||||
- **Closure escape**: 매 long-lived obj 에 short-lived 의 reference 가 capture.
|
||||
- **Detached DOM**: 매 DOM remove 했지만 JS reference 가 살아있음.
|
||||
- **Timer leak**: 매 `setInterval` clear 안 함 → callback 의 closure 누적.
|
||||
|
||||
**2. 거대한 객체 참조 유지 방지** `useRef` 등을 사용하여 거대한 데이터 세트나 클로저를 참조하고 있는 경우, 컴포넌트 사용이 끝난 후에도 가비지 컬렉터(GC)가 해당 메모리를 회수하지 못합니다.
|
||||
### 매 진단 도구
|
||||
- **Chrome DevTools → Memory → Heap snapshot**: 매 N times 비교 → growing object.
|
||||
- **Performance → Memory checkbox**: 매 timeline.
|
||||
- **`performance.memory` API**: 매 ad-hoc check.
|
||||
- **Node `--inspect` + `--expose-gc`**: 매 server-side.
|
||||
|
||||
- 이를 방지하기 위해 작업이 완료된 거대한 객체 참조에는 명시적으로 `null`을 할당(`processedRef.current = null`)하여 메모리를 해제할 수 있도록 도와야 합니다.
|
||||
### 매 응용
|
||||
1. SPA route change 마다 cleanup.
|
||||
2. React component unmount cleanup.
|
||||
3. WebGL / Three.js 의 `dispose()` 호출.
|
||||
4. Worker `postMessage` cycle 깨기.
|
||||
|
||||
**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|Chrome DevTools]] Memory Profiler:** 특정 사용자 행동 전후의 힙 스냅샷(Heap Snapshots)을 찍어 비교하고, 할당 타임라인([[Allocation Timeline|Allocation Timeline]]s)을 통해 가비지 컬렉션되어야 할 객체가 그대로 남아있는지 추적하여 누수 지점을 찾아냅니다.
|
||||
- 개발 환경에서는 `performance.memory.usedJSHeapSize`를 모니터링하여 메모리 점유율이 일정 수치(예: 200MB)를 넘어가면 경고(Alert)를 발생시키도록 감시 코드를 작성해 선제적으로 대응할 수 있습니다.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
||||
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[useEffect 클린업(Cleanup)|useEffect 클린업(Cleanup]], Garbage Collection (GC) 최적화, Three.js 자원 해제 (Dispose), [[Chrome|Chrome]] DevTools Memory Profiler
|
||||
- **Projects/Contexts:** 장기 실행되는 실시간 대시보드 최적화, 대규모 WebGL/R3F 3D 게임 환경의 메모리 관리
|
||||
- **Contradictions/Notes:** 최신 자바스크립트 엔진은 매우 훌륭한 가비지 컬렉터(GC)를 갖추고 있으나, DOM 이벤트, 브라우저 API(타이머, 소켓), WebGL GPU 메모리 등 '자바스크립트 엔진 외부의 자원'과 연결된 참조는 GC가 임의로 판단해 지울 수 없습니다. 따라서 외부 자원과의 연결 고리는 개발자가 직접 끊어주어야만 완벽한 메모리 관리가 가능합니다.
|
||||
|
||||
---
|
||||
|
||||
_Last updated: 2026-04-14_
|
||||
|
||||
---
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
### Listener cleanup (vanilla)
|
||||
```javascript
|
||||
class Component {
|
||||
constructor(el) {
|
||||
this.el = el;
|
||||
this.onClick = this.onClick.bind(this);
|
||||
el.addEventListener("click", this.onClick);
|
||||
}
|
||||
destroy() {
|
||||
this.el.removeEventListener("click", this.onClick); // 매 필수
|
||||
this.el = null;
|
||||
}
|
||||
onClick() { /* ... */ }
|
||||
}
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### React useEffect cleanup
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
const id = setInterval(tick, 1000);
|
||||
const ws = new WebSocket(url);
|
||||
ws.onmessage = handle;
|
||||
window.addEventListener("resize", onResize);
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
return () => {
|
||||
clearInterval(id);
|
||||
ws.close();
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
}, [url]);
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### AbortController (modern listener cleanup)
|
||||
```javascript
|
||||
const ac = new AbortController();
|
||||
window.addEventListener("scroll", onScroll, { signal: ac.signal });
|
||||
fetch(url, { signal: ac.signal });
|
||||
// 매 한 번에 모두 cancel + listener remove
|
||||
ac.abort();
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### Three.js dispose chain
|
||||
```javascript
|
||||
function disposeMesh(mesh) {
|
||||
mesh.geometry.dispose();
|
||||
if (Array.isArray(mesh.material)) {
|
||||
mesh.material.forEach((m) => disposeMaterial(m));
|
||||
} else {
|
||||
disposeMaterial(mesh.material);
|
||||
}
|
||||
scene.remove(mesh);
|
||||
}
|
||||
function disposeMaterial(m) {
|
||||
Object.values(m).forEach((v) => {
|
||||
if (v && v.isTexture) v.dispose();
|
||||
});
|
||||
m.dispose();
|
||||
}
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
### WeakMap for metadata (no leak)
|
||||
```javascript
|
||||
// 매 strong Map 은 key 가 leak — WeakMap 은 GC 가능
|
||||
const meta = new WeakMap();
|
||||
function tag(node, info) {
|
||||
meta.set(node, info); // 매 node remove 시 자동 free
|
||||
}
|
||||
```
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
### WeakRef for cache
|
||||
```javascript
|
||||
class ImageCache {
|
||||
cache = new Map();
|
||||
get(url) {
|
||||
const ref = this.cache.get(url);
|
||||
const img = ref?.deref();
|
||||
if (img) return img;
|
||||
const fresh = new Image();
|
||||
fresh.src = url;
|
||||
this.cache.set(url, new WeakRef(fresh));
|
||||
return fresh;
|
||||
}
|
||||
}
|
||||
// 매 메모리 압박 시 GC 가 free
|
||||
```
|
||||
|
||||
### Detached DOM 진단
|
||||
```javascript
|
||||
// Chrome DevTools Memory → Filter "Detached"
|
||||
// 또는 코드로:
|
||||
function findDetached() {
|
||||
const nodes = [];
|
||||
const all = performance.memory; // (chrome only ad-hoc)
|
||||
// 매 heap snapshot 이 정확
|
||||
}
|
||||
// 매 React 의 stale ref 가 흔한 원인
|
||||
```
|
||||
|
||||
### Closure leak (and fix)
|
||||
```javascript
|
||||
// 매 BAD: 매 onClose 가 매 hugeBuffer 의 reference 유지
|
||||
function setup() {
|
||||
const hugeBuffer = new ArrayBuffer(100 * 1024 * 1024);
|
||||
const ws = new WebSocket(url);
|
||||
ws.onclose = () => console.log("closed", Date.now());
|
||||
// 매 onclose closure 가 entire scope capture → hugeBuffer leak
|
||||
}
|
||||
|
||||
// 매 GOOD
|
||||
function setup() {
|
||||
const hugeBuffer = new ArrayBuffer(100 * 1024 * 1024);
|
||||
process(hugeBuffer);
|
||||
const ws = new WebSocket(url);
|
||||
ws.onclose = onCloseStandalone; // 매 module-level fn
|
||||
}
|
||||
function onCloseStandalone() { console.log("closed", Date.now()); }
|
||||
```
|
||||
|
||||
### Heap diff workflow
|
||||
```
|
||||
1. Open DevTools → Memory → Heap snapshot (S1)
|
||||
2. 매 user action repeat 10 times
|
||||
3. Take snapshot (S2)
|
||||
4. Compare: S2 vs S1 → "Allocation" tab
|
||||
5. 매 N times grew by 10 → suspect
|
||||
6. Inspect retainer chain — 매 root 까지 추적
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 의심 | 첫 진단 |
|
||||
|---|---|
|
||||
| Slow degradation | 3-snapshot heap diff |
|
||||
| Sudden spike | timeline + allocation sampling |
|
||||
| Timer suspicion | `clearInterval` audit |
|
||||
| WebGL app | `renderer.info.memory` watch |
|
||||
| React | StrictMode + DevTools Profiler |
|
||||
|
||||
**기본값**: AbortController 로 listener, useEffect cleanup, WeakMap metadata, dispose() WebGL.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Garbage Collection]] · [[Performance Optimization]]
|
||||
- 변형: [[Detached DOM]] · [[Closure Capture]] · [[Timer Leak]]
|
||||
- 응용: [[React useEffect]] · [[Three.js Dispose]] · [[WebGL Cleanup]]
|
||||
- Adjacent: [[WeakRef]] · [[AbortController]] · [[OffscreenCanvas와 Web Worker]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: SPA leak 진단, useEffect cleanup 작성, dispose chain 설계.
|
||||
**언제 X**: 매 short-lived script — 매 overhead 정당화 X.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **No cleanup in useEffect**: 매 unmount 후 listener 살아있음.
|
||||
- **Strong Map for DOM metadata**: 매 WeakMap 사용.
|
||||
- **setInterval without ref**: 매 clear 불가능.
|
||||
- **Forgetting WebGL dispose**: 매 GPU memory leak — JS GC 가 도움 X.
|
||||
- **Global cache unbounded**: 매 LRU + size limit 또는 WeakRef.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (Chrome Developers "Fix memory problems", MDN, web.dev/memory-leaks).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — 4대 leak + 9 patterns + WeakRef/AbortController |
|
||||
|
||||
Reference in New Issue
Block a user