2nd/10_Wiki/Topic_Programming/Frontend/Memory Leak Prevention 메모리 누수 방지.md

---
id: wiki-2026-0508-memory-leak-prevention-메모리-누수-방지
title: Memory Leak Prevention 메모리 누수 방지
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [memory leak, JS leak, frontend memory leak]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [memory, leak, performance, javascript, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: Browser/Node
---

# Memory Leak Prevention 메모리 누수 방지

## 매 한 줄
> **"매 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 가 무기.

## 매 핵심

### 매 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 누적.

### 매 진단 도구
- **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.

### 매 응용
1. SPA route change 마다 cleanup.
2. React component unmount cleanup.
3. WebGL / Three.js 의 `dispose()` 호출.
4. Worker `postMessage` cycle 깨기.

## 💻 패턴

### 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() { /* ... */ }
}
```

### React useEffect cleanup
```jsx
useEffect(() => {
  const id = setInterval(tick, 1000);
  const ws = new WebSocket(url);
  ws.onmessage = handle;
  window.addEventListener("resize", onResize);

  return () => {
    clearInterval(id);
    ws.close();
    window.removeEventListener("resize", onResize);
  };
}, [url]);
```

### 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();
```

### 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();
}
```

### 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
}
```

### 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]]
- Adjacent: [[WeakRef]] · [[AbortController]]

## 🤖 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 |