Memory leak in JavaScript applications 완벽 해결 가이드

도입

Memory leak in JavaScript applications는 웹 애플리케이션 개발에서 가장 까다로운 문제 중 하나입니다. 메모리 누수는 애플리케이션이 더 이상 필요하지 않은 메모리를 해제하지 않아 시간이 지남에 따라 사용 가능한 메모리가 점점 줄어드는 현상을 말합니다. 이는 브라우저의 성능 저하, 페이지 응답 지연, 심각한 경우 브라우저 크래시까지 초래할 수 있습니다. 특히 Single Page Application(SPA)이나 장시간 실행되는 웹 애플리케이션에서는 작은 메모리 누수도 시간이 지나면서 큰 문제로 발전할 수 있습니다. 따라서 개발자는 메모리 관리의 중요성을 인식하고 적절한 대응 방법을 숙지해야 합니다.

에러 상세 분석

JavaScript는 가비지 컬렉션(Garbage Collection)을 통해 자동으로 메모리를 관리하지만, 특정 상황에서는 개발자의 실수로 인해 메모리 누수가 발생할 수 있습니다. 가비지 컬렉터는 도달 가능성(reachability) 개념을 사용하여 더 이상 참조되지 않는 객체를 메모리에서 제거합니다. 그러나 의도치 않은 참조가 남아있으면 가비지 컬렉터가 해당 메모리를 회수할 수 없게 됩니다.

메모리 누수의 주요 증상으로는 페이지 로딩 속도 저하, 스크롤이나 애니메이션의 끊김 현상, CPU 사용률 증가, 그리고 최악의 경우 “Out of Memory” 에러가 발생합니다. Chrome DevTools의 Performance Monitor나 Memory Profiler를 사용하면 메모리 사용량이 지속적으로 증가하는 패턴을 확인할 수 있으며, 이는 메모리 누수의 명확한 신호입니다. 특히 힙 스냅샷(Heap Snapshot)을 비교 분석하면 어떤 객체가 예상과 달리 메모리에 남아있는지 파악할 수 있습니다.

발생 원인 5가지

1. 전역 변수의 무분별한 사용

전역 변수는 애플리케이션이 종료될 때까지 메모리에 유지됩니다. 의도하지 않게 전역 변수를 생성하거나, 필요 이상으로 많은 데이터를 전역 스코프에 저장하면 메모리 누수의 원인이 됩니다. 특히 ‘use strict’ 모드를 사용하지 않을 때 변수 선언 없이 할당하면 자동으로 전역 변수가 생성되어 문제가 될 수 있습니다.

2. 제거되지 않은 이벤트 리스너

DOM 요소에 이벤트 리스너를 추가한 후 해당 요소를 제거해도 이벤트 리스너가 여전히 메모리에 남아있을 수 있습니다. 특히 동적으로 생성되고 삭제되는 DOM 요소에 이벤트 리스너를 반복적으로 추가하는 경우, 리스너를 명시적으로 제거하지 않으면 심각한 메모리 누수가 발생합니다. SPA 프레임워크를 사용할 때 컴포넌트 언마운트 시 이벤트 리스너 정리를 잊어버리는 경우가 많습니다.

3. 클로저(Closure)의 부적절한 사용

클로저는 외부 함수의 변수를 참조하는 내부 함수를 말합니다. 클로저가 큰 객체나 DOM 요소를 참조하고 있고, 이 클로저가 계속 유지되면 참조된 객체들도 가비지 컬렉션되지 않습니다. 특히 타이머나 콜백 함수에서 클로저를 사용할 때 주의가 필요합니다.

4. 타이머 함수의 미정리

setInterval, setTimeout으로 설정한 타이머를 clearInterval, clearTimeout으로 정리하지 않으면 타이머 콜백이 참조하는 모든 변수와 객체가 메모리에 계속 남아있습니다. 특히 setInterval은 명시적으로 중지하지 않으면 무한히 실행되므로 더욱 위험합니다.

5. 순환 참조(Circular Reference)

두 개 이상의 객체가 서로를 참조하는 순환 참조 구조는 과거 브라우저에서 심각한 메모리 누수를 일으켰습니다. 현대 브라우저의 가비지 컬렉터는 순환 참조를 처리할 수 있지만, DOM 요소와 JavaScript 객체 간의 순환 참조는 여전히 문제가 될 수 있습니다.

해결방법 7가지

1. 이벤트 리스너 명시적 제거

// 문제가 되는 코드
const button = document.getElementById('myButton');
button.addEventListener('click', handleClick);

// 해결 방법
function cleanup() {
  const button = document.getElementById('myButton');
  if (button) {
    button.removeEventListener('click', handleClick);
  }
}

// React 예시
useEffect(() => {
  const button = document.getElementById('myButton');
  const handleClick = () => console.log('clicked');
  
  button.addEventListener('click', handleClick);
  
  return () => {
    button.removeEventListener('click', handleClick);
  };
}, []);

2. 타이머 정리

// 문제가 되는 코드
setInterval(() => {
  console.log('Running...');
}, 1000);

// 해결 방법
const intervalId = setInterval(() => {
  console.log('Running...');
}, 1000);

// 컴포넌트 언마운트 시
clearInterval(intervalId);

// React 예시
useEffect(() => {
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);
  
  return () => clearInterval(timer);
}, []);

3. WeakMap과 WeakSet 활용

// 문제가 되는 코드
const cache = new Map();
function processElement(element) {
  cache.set(element, { data: 'some data' });
}

// 해결 방법
const cache = new WeakMap();
function processElement(element) {
  cache.set(element, { data: 'some data' });
  // element가 제거되면 자동으로 가비지 컬렉션됨
}

4. 전역 변수 최소화

// 문제가 되는 코드
function createUser() {
  currentUser = { name: 'John', data: new Array(1000000) };
}

// 해결 방법
function createUser() {
  'use strict';
  const currentUser = { name: 'John', data: new Array(1000000) };
  return currentUser;
}

// 또는 모듈 패턴 사용
const UserModule = (() => {
  let currentUser = null;
  
  return {
    setUser: (user) => { currentUser = user; },
    clearUser: () => { currentUser = null; }
  };
})();

5. DOM 참조 해제

// 문제가 되는 코드
const elements = [];
function addElement() {
  const div = document.createElement('div');
  document.body.appendChild(div);
  elements.push(div);
}

// 해결 방법
const elements = [];
function addElement() {
  const div = document.createElement('div');
  document.body.appendChild(div);
  elements.push(div);
}

function cleanup() {
  elements.forEach(el => el.remove());
  elements.length = 0; // 배열 비우기
}

6. Observer 패턴 정리

// Intersection Observer 정리
const observer = new IntersectionObserver(callback);
observer.observe(element);

// 정리
observer.unobserve(element);
observer.disconnect();

// Mutation Observer도 동일
const mutationObserver = new MutationObserver(callback);
mutationObserver.observe(element, config);

// 정리
mutationObserver.disconnect();

7. 큰 객체 참조 해제

// 문제가 되는 코드
let largeData = null;

fetch('/api/large-data')
  .then(response => response.json())
  .then(data => {
    largeData = data;
    processData(data);
  });

// 해결 방법
fetch('/api/large-data')
  .then(response => response.json())
  .then(data => {
    processData(data);
    // 처리 후 명시적으로 null 할당
    data = null;
  });

예방법과 베스트 프랙티스

1. Chrome DevTools 활용

정기적으로 Memory Profiler를 사용하여 힙 스냅샷을 찍고 비교 분석하세요. Performance Monitor로 메모리 사용량을 실시간으로 모니터링하고, 증가 추세를 확인합니다.

2. 라이프사이클 관리

프레임워크의 라이프사이클 메서드(componentWillUnmount, useEffect cleanup 등)를 활용하여 컴포넌트가 제거될 때 리소스를 정리합니다.

3. 코드 리뷰 체크리스트

이벤트 리스너 추가 시 제거 로직 확인, 타이머 설정 시 정리 로직 확인, 큰 객체 사용 후 참조 해제 확인 등을 코드 리뷰 시 필수로 체크합니다.

4. ESLint 규칙 활용

no-unused-vars, no-global-assign 등의 ESLint 규칙을 활용하여 잠재적인 메모리 누수 원인을 사전에 차단합니다.

마무리

Memory leak in JavaScript applications는 예방과 조기 발견이 가장 중요합니다. 개발 단계에서부터 메모리 관리를 염두에 두고 코드를 작성하며, 정기적으로 메모리 프로파일링을 수행하여 문제를 조기에 발견해야 합니다. 이벤트 리스너 정리, 타이머 해제, WeakMap 활용 등의 베스트 프랙티스를 일상적으로 적용하면 대부분의 메모리 누수를 예방할 수 있습니다. 메모리 관리는 사용자 경험 향상과 직결되므로 항상 신경 써야 할 중요한 영역입니다.