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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-memory-leak-prevention-메모리-누수-방지	Memory Leak Prevention 메모리 누수 방지	10_Wiki/Topics	verified	self	memory leak JS leak frontend memory leak	none	A	0.9	applied	memory leak performance javascript frontend		2026-05-10	pending	language framework JavaScript 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)

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

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)

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

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)

// 매 strong Map 은 key 가 leak — WeakMap 은 GC 가능
const meta = new WeakMap();
function tag(node, info) {
  meta.set(node, info); // 매 node remove 시 자동 free
}

WeakRef for cache

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 진단

// 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)

// 매 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