Memory leak in JavaScript applications 완벽 해결법

Memory leak in JavaScript applications는 현대 웹 개발에서 가장 골치 아픈 문제 중 하나입니다. 애플리케이션이 시간이 지남에 따라 점점 느려지고, 결국 브라우저가 멈추거나 크래시되는 경험을 해보셨나요? 이는 메모리 누수로 인해 더 이상 필요하지 않은 객체들이 메모리에서 해제되지 않고 계속 쌓이기 때문입니다. JavaScript는 가비지 컬렉션을 통해 자동으로 메모리를 관리하지만, 잘못된 코딩 패턴은 가비지 컬렉터가 메모리를 회수하지 못하게 만듭니다. 이 글에서는 메모리 누수의 근본 원인부터 실전 해결법, 그리고 예방 전략까지 완벽하게 다룹니다.

메모리 누수 에러 상세 분석

메모리 누수는 명시적인 에러 메시지를 던지지 않기 때문에 발견하기 어렵습니다. 대신 다음과 같은 증상들이 나타납니다: 페이지가 시간이 지남에 따라 느려짐, 브라우저 탭이 과도한 메모리 사용, 최종적으로는 “Out of Memory” 에러 발생 등입니다. Chrome DevTools의 Performance Monitor나 Memory Profiler를 사용하면 힙 메모리가 계속 증가하는 패턴을 확인할 수 있습니다. JavaScript의 가비지 컬렉터는 도달 가능성(reachability) 알고리즘을 사용하는데, 루트(글로벌 객체, 현재 실행 중인 함수의 지역 변수 등)에서 참조 체인을 따라갈 수 있는 객체들은 메모리에 유지됩니다. 문제는 개발자가 의도치 않게 참조를 유지하여 더 이상 필요 없는 객체가 도달 가능한 상태로 남아있을 때 발생합니다. 이러한 Memory leak in JavaScript applications 문제는 SPA(Single Page Application)에서 특히 심각한데, 페이지 새로고침 없이 장시간 실행되기 때문입니다.

메모리 누수 발생 원인 5가지

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

DOM 요소를 제거할 때 이벤트 리스너를 함께 제거하지 않으면, 리스너가 DOM 요소에 대한 참조를 계속 유지합니다. 특히 클로저를 사용하는 이벤트 핸들러는 외부 스코프의 변수들까지 참조하여 메모리 누수를 악화시킵니다.

2. 타이머와 콜백 정리 누락

setInterval, setTimeout, requestAnimationFrame 등이 정리되지 않으면 콜백 함수와 그 클로저가 참조하는 모든 객체가 메모리에 남습니다. 컴포넌트가 언마운트될 때 타이머를 클리어하지 않는 것은 흔한 실수입니다.

3. 클로저의 과도한 참조

클로저는 외부 스코프의 변수를 캡처하는데, 이 클로저가 장시간 유지되면 캡처된 모든 변수들이 메모리에서 해제되지 않습니다. 특히 큰 객체나 DOM 요소를 클로저가 참조하는 경우 문제가 됩니다.

4. 전역 변수와 캐시 무한 증가

전역 스코프의 변수나 객체 속성에 데이터를 계속 추가하면서 삭제하지 않으면, 메모리 사용량이 무한정 증가합니다. 캐시를 구현할 때 크기 제한이나 만료 정책 없이 계속 데이터를 저장하는 경우가 대표적입니다.

5. 분리된 DOM 노드

DOM에서 제거된 노드를 JavaScript 코드에서 여전히 참조하고 있으면, 해당 노드와 그 자식 노드들이 모두 메모리에 남습니다. 이를 “detached DOM tree”라고 부르며, 대규모 DOM 조작 시 심각한 메모리 누수를 유발합니다.

메모리 누수 해결방법 7가지

1. 이벤트 리스너 정리

컴포넌트나 페이지를 벗어날 때 반드시 이벤트 리스너를 제거하세요:

class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
    this.element = document.getElementById('button');
    this.element.addEventListener('click', this.handleClick);
  }

  handleClick() {
    console.log('Clicked!');
  }

  destroy() {
    // 반드시 이벤트 리스너 제거
    this.element.removeEventListener('click', this.handleClick);
    this.element = null;
  }
}

2. 타이머 정리

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

class Timer {
  start() {
    this.intervalId = setInterval(() => {
      console.log('Tick');
    }, 1000);

    this.timeoutId = setTimeout(() => {
      console.log('Delayed');
    }, 5000);
  }

  stop() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
      this.timeoutId = null;
    }
  }
}

3. WeakMap과 WeakSet 사용

객체를 키로 사용할 때는 WeakMap을 사용하여 자동 가비지 컬렉션을 활용하세요:

// 나쁜 예: 일반 Map 사용
const cache = new Map();
function process(element) {
  cache.set(element, { data: 'large data' });
  // element가 DOM에서 제거되어도 cache가 참조를 유지
}

// 좋은 예: WeakMap 사용
const cache = new WeakMap();
function process(element) {
  cache.set(element, { data: 'large data' });
  // element가 다른 곳에서 참조되지 않으면 자동으로 가비지 컬렉션됨
}

4. 클로저 최소화

클로저가 필요한 변수만 캡처하도록 스코프를 최소화하세요:

// 나쁜 예: 불필요한 참조 유지
function setupHandler() {
  const largeData = new Array(1000000).fill('data');
  const element = document.getElementById('button');
  
  element.addEventListener('click', function() {
    console.log('Clicked');
    // largeData를 사용하지 않지만 클로저가 참조 유지
  });
}

// 좋은 예: 필요한 것만 참조
function setupHandler() {
  const element = document.getElementById('button');
  
  element.addEventListener('click', function() {
    console.log('Clicked');
  });
  // largeData는 스코프 밖에 있어 가비지 컬렉션 가능
}

5. DOM 참조 정리

DOM 노드 참조를 명시적으로 null로 설정하세요:

class ListView {
  constructor() {
    this.items = [];
    this.container = document.getElementById('list');
  }

  clear() {
    // DOM에서 제거
    this.container.innerHTML = '';
    
    // JavaScript 참조도 제거
    this.items = [];
    this.container = null;
  }
}

6. 캐시 크기 제한

LRU(Least Recently Used) 캐시로 메모리 사용량을 제한하세요:

class LRUCache {
  constructor(maxSize = 100) {
    this.maxSize = maxSize;
    this.cache = new Map();
  }

  set(key, value) {
    // 이미 존재하면 삭제 후 재추가 (순서 갱신)
    if (this.cache.has(key)) {
      this.cache.delete(key);
    }
    
    this.cache.set(key, value);
    
    // 크기 초과 시 가장 오래된 항목 제거
    if (this.cache.size > this.maxSize) {
      const firstKey = this.cache.keys().next().value;
      this.cache.delete(firstKey);
    }
  }

  get(key) {
    if (!this.cache.has(key)) return null;
    
    // 접근 시 순서 갱신
    const value = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, value);
    return value;
  }
}

7. AbortController 활용

fetch 요청과 이벤트 리스너를 한 번에 정리할 수 있습니다:

class DataFetcher {
  constructor() {
    this.controller = new AbortController();
  }

  async fetchData() {
    try {
      const response = await fetch('/api/data', {
        signal: this.controller.signal
      });
      return await response.json();
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Fetch aborted');
      }
    }
  }

  setupListener() {
    document.addEventListener('click', this.handleClick, {
      signal: this.controller.signal
    });
  }

  handleClick = () => {
    console.log('Clicked');
  }

  cleanup() {
    // 모든 fetch와 이벤트 리스너를 한 번에 취소
    this.controller.abort();
  }
}

예방법과 베스트 프랙티스

Memory leak in JavaScript applications를 예방하기 위해서는 개발 단계부터 메모리 관리를 고려해야 합니다. 첫째, Chrome DevTools의 Memory Profiler를 정기적으로 사용하여 힙 스냅샷을 비교하고 메모리 증가 패턴을 모니터링하세요. 둘째, 컴포넌트 생명주기를 명확히 정의하고 cleanup 함수를 반드시 구현하세요. React의 useEffect cleanup, Vue의 beforeUnmount, Angular의 ngOnDestroy 같은 훅을 활용합니다. 셋째, ESLint 플러그인을 사용하여 일반적인 메모리 누수 패턴을 정적으로 감지하세요. 넷째, 이벤트 위임(event delegation)을 사용하여 개별 요소마다 리스너를 추가하지 않도록 합니다. 다섯째, 전역 상태 관리 라이브러리를 사용할 때는 구독(subscription)을 항상 해제하세요. 마지막으로, 프로덕션 환경에서도 메모리 모니터링 도구를 사용하여 실제 사용자 환경에서의 메모리 사용 패턴을 추적하는 것이 중요합니다.

마무리

메모리 누수는 조용히 애플리케이션을 망가뜨리는 버그입니다. 이 글에서 다룬 원인 분석과 해결법을 실천하면 안정적이고 성능 좋은 JavaScript 애플리케이션을 만들 수 있습니다. 이벤트 리스너 정리, 타이머 클리어, WeakMap 활용, 클로저 최적화, DOM 참조 해제, 캐시 크기 제한, AbortController 사용 등의 기법을 프로젝트에 적용해보세요. 무엇보다 중요한 것은 개발 단계부터 메모리 프로파일링을 습관화하는 것입니다. Chrome DevTools로 정기적으로 메모리를 점검하고, 문제를 조기에 발견하여 해결하세요. 깨끗한 코드는 빠른 애플리케이션을 만듭니다.