JavaScript 메모리 누수 디버깅

🐞 메모리 누수 디버깅 예제 (with Chrome DevTools)

자바스크립트는 자동으로 메모리를 관리하지만, 실무에서는 메모리 누수(memory leak)가 자주 발생합니다. 브라우저의 개발자 도구(DevTools)를 활용하면 누수를 탐지하고 해결할 수 있습니다.

💥 메모리 누수가 발생하는 예제 코드

const leakyArray = [];

function startLeaking() {
  const hugeObject = new Array(1000000).fill("😵"); // 큰 데이터 생성
  leakyArray.push(() => {
    console.log(hugeObject[0]);
  });
}

// 1초마다 계속 메모리에 쌓임
setInterval(startLeaking, 1000);

위 코드는 hugeObject를 클로저로 참조하고 있어, leakyArray에 계속 누적되며 메모리가 해제되지 않습니다.

🧭 DevTools로 누수 디버깅하는 단계

1. F12 또는 Ctrl + Shift + I를 눌러 DevTools 실행
2. Memory 탭 클릭 → Heap snapshot 선택
3. Take snapshot 버튼 클릭
4. 메모리 점유가 높은 객체를 확인 (ex. Array, Closure 등)
5. 1~2분 간격으로 Snapshot을 계속 비교하여 해제되지 않는 객체가 있는지 확인

🔧 해결 방법: 참조 해제

leakyArray가 참조를 계속 유지하므로, 클로저를 제거하거나 참조를 정리해줘야 합니다.

function startFixed() {
  const hugeObject = new Array(1000000).fill("😎");
  // 함수가 외부에 저장되지 않으므로 해제 가능
  setTimeout(() => {
    console.log(hugeObject[0]);
  }, 100);
}

💡 팁: 메모리 누수를 피하는 습관

• 전역 변수 사용 자제
• 이벤트 리스너는 removeEventListener로 해제
• setInterval은 clearInterval로 해제
• 클로저 사용 시, 불필요한 참조 정리
• WeakMap, WeakSet 등 GC 친화적 구조 사용

📘 정리

• 메모리 누수는 성능 저하, 브라우저 다운의 원인이 됩니다.
• DevTools의 Memory 탭과 Heap snapshot을 적극 활용하세요.
• 지속적으로 해제되지 않는 참조를 모니터링하세요.