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

도입

Memory leak in JavaScript applications는 현대 웹 개발에서 가장 까다로운 문제 중 하나입니다. 애플리케이션이 더 이상 필요하지 않은 메모리를 해제하지 못하고 계속 보유하게 되면, 시간이 지남에 따라 사용 가능한 메모리가 점점 줄어들고 결국 브라우저가 느려지거나 크래시가 발생합니다. 특히 SPA(Single Page Application)나 장시간 실행되는 웹 애플리케이션에서 메모리 누수는 사용자 경험을 크게 저하시킵니다. JavaScript는 가비지 컬렉션을 자동으로 수행하지만, 잘못된 코드 패턴은 가비지 컬렉터가 메모리를 회수하지 못하게 만듭니다. 이 글에서는 메모리 누수의 원인부터 실전 해결법, 그리고 예방 전략까지 체계적으로 알아보겠습니다.

에러 상세 분석

Memory leak in JavaScript applications는 명시적인 에러 메시지로 나타나지 않는 경우가 많습니다. 대신 다음과 같은 증상으로 나타납니다:

• 점진적인 성능 저하: 애플리케이션을 오래 사용할수록 반응 속도가 느려집니다
• 메모리 사용량 증가: 브라우저의 작업 관리자에서 탭의 메모리 사용량이 계속 증가합니다
• 브라우저 크래시: 심한 경우 “Out of Memory” 오류와 함께 탭이나 브라우저가 종료됩니다
• UI 프리징: 페이지가 일시적으로 멈추거나 응답하지 않습니다

Chrome DevTools의 Performance Monitor나 Memory Profiler를 사용하면 메모리 사용량이 계단식으로 증가하는 패턴을 확인할 수 있습니다. 정상적인 애플리케이션은 메모리를 사용하다가 가비지 컬렉션으로 다시 감소하는 톱니 모양의 그래프를 보이지만, 메모리 누수가 있는 경우 전체적으로 우상향하는 그래프가 나타납니다.

발생 원인 5가지

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

DOM 요소를 제거했지만 해당 요소에 등록된 이벤트 리스너를 제거하지 않으면, 리스너가 요소를 참조하고 있어 가비지 컬렉션되지 않습니다. 특히 동적으로 생성되고 제거되는 요소들에서 자주 발생합니다.

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

전역 스코프에 선언된 변수는 페이지가 닫힐 때까지 메모리에 남아있습니다. 실수로 var를 빠뜨려서 암묵적으로 전역 변수가 생성되거나, window 객체에 직접 속성을 추가하는 경우 메모리 누수가 발생할 수 있습니다.

3. 클로저(Closure)의 잘못된 사용

클로저는 외부 함수의 변수를 계속 참조하기 때문에, 큰 객체나 DOM 요소를 클로저에서 참조하면 해당 데이터가 메모리에 계속 남게 됩니다. 특히 타이머나 콜백 함수에서 클로저를 사용할 때 주의해야 합니다.

4. 해제되지 않은 타이머와 콜백

setInterval이나 setTimeout으로 설정한 타이머를 clearInterval이나 clearTimeout으로 정리하지 않으면, 콜백 함수와 그 함수가 참조하는 모든 데이터가 메모리에 남습니다. 특히 컴포넌트가 언마운트된 후에도 타이머가 실행되는 경우가 많습니다.

5. DOM 참조 캐싱

DOM 요소에 대한 참조를 변수에 저장해두고 나중에 해당 요소가 DOM에서 제거되어도 변수를 정리하지 않으면, 분리된 DOM 트리 전체가 메모리에 남게 됩니다. 이를 “detached DOM tree” 문제라고 합니다.

해결방법 7가지 (코드 포함)

1. 이벤트 리스너 제거

addEventListener로 등록한 리스너는 반드시 removeEventListener로 제거해야 합니다:

// 문제가 있는 코드
function attachListener() {
  const button = document.getElementById('myButton');
  button.addEventListener('click', handleClick);
  // button이 제거되어도 리스너가 남아있음
}

// 올바른 코드
class Component {
  constructor() {
    this.button = document.getElementById('myButton');
    this.handleClick = this.handleClick.bind(this);
    this.button.addEventListener('click', this.handleClick);
  }
  
  handleClick() {
    console.log('Clicked!');
  }
  
  destroy() {
    this.button.removeEventListener('click', this.handleClick);
    this.button = null;
  }
}

2. WeakMap과 WeakSet 사용

객체를 키로 사용하되 가비지 컬렉션을 방해하지 않으려면 WeakMap을 사용합니다:

// 문제: Map은 강한 참조를 유지
const cache = new Map();
let element = document.getElementById('heavy');
cache.set(element, heavyData);
element.remove();
element = null; // element는 여전히 cache에 의해 참조됨

// 해결: WeakMap 사용
const cache = new WeakMap();
let element = document.getElementById('heavy');
cache.set(element, heavyData);
element.remove();
element = null; // element가 가비지 컬렉션됨

3. 타이머 정리

모든 타이머는 사용 후 반드시 정리해야 합니다:

class DataPoller {
  constructor() {
    this.intervalId = null;
  }
  
  start() {
    this.intervalId = setInterval(() => {
      this.fetchData();
    }, 5000);
  }
  
  stop() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  }
  
  fetchData() {
    // 데이터 가져오기
  }
}

4. DOM 참조 해제

DOM 요소 참조를 캐싱할 때는 사용 후 null로 설정합니다:

class ListView {
  constructor() {
    this.items = [];
    this.itemElements = new Map();
  }
  
  removeItem(id) {
    const element = this.itemElements.get(id);
    if (element) {
      element.remove();
      this.itemElements.delete(id); // 참조 제거
    }
  }
  
  destroy() {
    this.itemElements.clear();
    this.items = [];
  }
}

5. 클로저에서 참조 최소화

클로저에서는 필요한 데이터만 참조하고 큰 객체는 피합니다:

// 문제: 전체 객체를 클로저에서 참조
function createHandler(largeObject) {
  return function() {
    console.log(largeObject.id); // largeObject 전체가 메모리에 유지됨
  };
}

// 해결: 필요한 값만 추출
function createHandler(largeObject) {
  const id = largeObject.id; // 필요한 값만 복사
  return function() {
    console.log(id);
  };
}

6. React/Vue 등 프레임워크에서의 정리

React의 useEffect cleanup 함수를 활용합니다:

// React 예제
import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    const handleResize = () => console.log('resized');
    window.addEventListener('resize', handleResize);
    
    const timer = setInterval(() => {
      console.log('tick');
    }, 1000);
    
    // cleanup 함수
    return () => {
      window.removeEventListener('resize', handleResize);
      clearInterval(timer);
    };
  }, []);
  
  return 
Component
;
}

7. Chrome DevTools로 메모리 누수 찾기

실제 누수 지점을 찾는 방법:

// 1. Chrome DevTools > Memory 탭 열기
// 2. Heap snapshot 찍기
// 3. 작업 수행 (페이지 전환, 버튼 클릭 등)
// 4. 다시 Heap snapshot 찍기
// 5. Comparison 뷰에서 증가한 객체 확인

// 예제: 누수를 재현하는 코드
let leakyArray = [];
function createLeak() {
  const hugeString = new Array(1000000).join('x');
  leakyArray.push(hugeString); // 계속 누적됨
}

setInterval(createLeak, 1000);

예방법과 베스트 프랙티스

• 라이프사이클 관리: 모든 컴포넌트나 모듈에 초기화(init)와 정리(destroy) 메서드를 구현하여 리소스를 체계적으로 관리합니다
• 코드 리뷰: addEventListener, setInterval, setTimeout이 사용된 곳마다 정리 코드가 있는지 확인합니다
• 자동화된 테스트: 메모리 사용량을 모니터링하는 성능 테스트를 CI/CD 파이프라인에 포함시킵니다
• 린터 규칙: ESLint 플러그인을 사용하여 일반적인 메모리 누수 패턴을 자동으로 감지합니다
• 정기적인 프로파일링: 개발 중 주기적으로 Memory Profiler를 실행하여 메모리 사용 패턴을 확인합니다
• 약한 참조 활용: 캐싱이 필요한 경우 Map 대신 WeakMap, Set 대신 WeakSet을 우선 고려합니다
• 전역 변수 최소화: 모듈 패턴이나 IIFE를 사용하여 스코프를 제한하고 전역 오염을 방지합니다

마무리

Memory leak in JavaScript applications는 예방과 조기 발견이 가장 중요합니다. 이벤트 리스너 제거, 타이머 정리, DOM 참조 해제 등 기본적인 원칙을 지키고, Chrome DevTools를 활용하여 정기적으로 메모리 사용을 모니터링하면 대부분의 메모리 누수를 방지할 수 있습니다. 특히 SPA 환경에서는 컴포넌트 라이프사이클에 맞춰 리소스를 철저히 정리하는 습관이 필수적입니다. 메모리 누수는 당장 눈에 보이지 않지만 사용자 경험에 치명적인 영향을 미치므로, 개발 초기 단계부터 메모리 관리를 염두에 두고 코드를 작성하는 것이 중요합니다.