JavaScript는 메모리를 어떻게 관리하며 누수는 어떻게 발생하나요?

Question

Accepted Answer

JavaScript는 **자동 가비지 컬렉션(garbage collection)**을 사용합니다. 컬렉터는 **마크 앤 스위프(mark-and-sweep)** 알고리즘을 사용합니다: 루트(전역 객체, 현재 콜 스택)에서 시작하여 **도달 가능한(reachable)** 모든 것을 표시한 뒤, 도달 불가능한 모든 것을 해제합니다. 수동으로 `free()`를 호출하지는 않지만 — 실수로 참조를 살려두어 누수를 일으킬 *수는* 있습니다.

## 네 가지 고전적 누수 원인

```js
// 1. 절대 줄어들지 않는 무한정 전역/캐시
window.cache = window.cache || {};
window.cache[id] = bigObject; // 영원히 증가

// 2. 잊혀진 이벤트 리스너
el.addEventListener("click", handler);
// 끝나면 el.removeEventListener("click", handler)를 호출해야 함

// 3. 잊혀진 타이머
const id = setInterval(tick, 1000);
// clearInterval(id)를 해야 함

// 4. 필요 이상으로 큰 객체를 캡처하는 클로저
function outer() {
  const huge = new Array(1e6);
  return () => huge.length; // 클로저가 사는 동안 `huge`를 살려둔다
}
```

도달 가능한 어떤 곳(전역, 살아있는 리스너, 클로저, JS에서 여전히 참조되는 분리된 DOM 노드)에서의 참조든 객체가 수집되는 것을 막습니다.

## 누수 진단

```js
performance.memory; // 대략적인 힙 크기 (Chrome)
// Chrome DevTools → Memory → 두 시점에 힙 스냅샷을 찍어 비교
```

동작 전/후에 힙 스냅샷을 찍으세요. 꾸준히 증가하는 "retained size"가 무엇이 해제되지 않는지 드러냅니다.

## 객체를 고정하지 않기 위한 도구

```js
const meta = new WeakMap(); // 키가 약하게 유지됨 — GC가 수집 가능
meta.set(domNode, data);    // domNode가 가비지 컬렉션되는 것을 막지 않음
```

## 왜 중요한가

장시간 실행되는 앱(SPA, Node 서버)은 누수로 인해 충돌하거나 느려집니다.

해결책은 규율 있는 정리입니다 — 리스너/타이머 제거, 캐시 제한(LRU), 남아있는 참조 피하기, 그리고 객체를 살려두면 안 되는 메타데이터에는 `WeakMap`/`WeakSet` 사용.