javascript
Memory Leak.
프론트엔드에서 흔한 메모리 누수 패턴과 탐지, 예방 방법
Memory Leak은 더 이상 필요 없는 데이터가 참조 때문에 GC되지 않고 쌓이는 현상입니다.
🕳️ 흔한 원인 (프론트엔드)
| 패턴 | 예시 |
|---|---|
| 분리된 DOM | remove된 노드를 JS 변수가 계속 참조 |
| 이벤트 리스너 미제거 | addEventListener 후 cleanup 없음 |
| 타이머/인터벌 | clearInterval 누락 |
| 전역 변수 축적 | window.cache = ... 무한 성장 |
| 클로저 | 큰 객체를 불필요하게 붙잡음 |
| Observer 미해제 | IntersectionObserver, MutationObserver |
| SPA 라우트 전환 | 이전 페이지 subscription, chart instance 잔존 |
🔎 탐지 방법
- Chrome DevTools → Memory → Heap snapshot 비교 (두 시점 diff)
- Performance → Memory 체크 후 계단형 상승 패턴 확인
- React: Strict Mode double mount로 cleanup 누락 노출
🛡️ 예방
- React
useEffectcleanup 함수 반환 - WeakMap/WeakRef로 캐시 (적절할 때)
- 라우트 unmount 시 chart, socket, observer 해제
- 전역 캐시에 크기 상한, TTL
useEffect(() => {
const observer = new IntersectionObserver(callback);
observer.observe(el);
return () => observer.disconnect();
}, []);
🔗 참고 자료
- Fix memory problems (Chrome DevTools) — 누수, detached DOM, Allocation Timeline 탐지 방법을 안내한다.
- Memory management (MDN) — 도달 불가능하지 않은 참조가 회수를 막는 원리를 설명한다.
- WeakRef (MDN) — 캐시 등에서 강한 참조를 줄이는 선택지를 다룬다.
- IntersectionObserver (MDN) — Observer 사용 후
disconnect로 참조를 끊는 패턴의 기반 API다.