🛠️ Memory leak in JavaScript applications 완벽 해결법 – 원인부터 예방까지

도입

Memory leak in JavaScript applications는 현대 웹 개발에서 가장 흔하게 발생하면서도 찾기 어려운 문제 중 하나입니다. 애플리케이션이 실행되는 동안 메모리 사용량이 계속 증가하여 결국 브라우저가 느려지거나 멈추는 현상을 경험해본 적이 있을 것입니다. 메모리 누수는 더 이상 사용하지 않는 객체가 가비지 컬렉터에 의해 수집되지 않고 메모리에 계속 남아있을 때 발생합니다. SPA(Single Page Application)가 보편화되면서 페이지를 새로고침하지 않고 장시간 실행되는 애플리케이션이 많아졌고, 이로 인해 메모리 관리의 중요성이 더욱 커졌습니다. 이 글에서는 메모리 누수의 원인을 파악하고 효과적으로 해결하는 방법을 상세히 알아보겠습니다.

에러 상세 분석

JavaScript는 자동 메모리 관리를 제공하는 언어로, 가비지 컬렉터가 더 이상 참조되지 않는 객체를 자동으로 정리합니다. 하지만 개발자가 의도치 않게 객체에 대한 참조를 유지하면 가비지 컬렉터가 해당 메모리를 회수할 수 없습니다. 메모리 누수는 즉각적으로 드러나지 않고 시간이 지남에 따라 누적되어 나타나기 때문에 탐지가 어렵습니다. 증상으로는 페이지 응답 속도 저하, 브라우저 탭 크래시, CPU 사용률 증가 등이 있습니다. Chrome DevTools의 Memory 프로파일러나 Performance 탭을 사용하면 메모리 사용 패턴을 분석하고 누수를 식별할 수 있습니다. 특히 힙 스냅샷을 비교하면 어떤 객체가 예상과 달리 메모리에 남아있는지 확인할 수 있습니다.

발생 원인 5가지

1. 이벤트 리스너 미제거

DOM 요소에 이벤트 리스너를 등록한 후 제거하지 않으면, 해당 요소가 DOM에서 제거되어도 메모리에 남아있습니다. 특히 SPA에서 컴포넌트가 마운트/언마운트될 때 이벤트 리스너 정리를 잊어버리기 쉽습니다.

2. 타이머 함수 미정리

setInterval이나 setTimeout으로 설정한 타이머가 clearInterval이나 clearTimeout으로 정리되지 않으면 콜백 함수와 그 클로저가 참조하는 모든 변수가 메모리에 유지됩니다. 특히 setInterval은 명시적으로 중단하지 않으면 무한히 실행됩니다.

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

클로저는 외부 스코프의 변수를 참조할 수 있는데, 이 참조가 예상보다 오래 유지되면 메모리 누수가 발생합니다. 특히 큰 데이터 구조를 클로저 내부에서 참조하면 해당 데이터가 계속 메모리에 남게 됩니다.

4. 전역 변수의 과도한 사용

전역 스코프에 선언된 변수는 페이지가 닫힐 때까지 메모리에 유지됩니다. 실수로 var 없이 변수를 선언하거나 window 객체에 프로퍼티를 추가하면 의도치 않게 전역 변수가 생성될 수 있습니다.

5. DOM 참조 유지

JavaScript 객체가 DOM 요소를 참조하고 있으면, 해당 DOM 요소가 제거되어도 메모리에서 해제되지 않습니다. 특히 캐시나 배열에 DOM 참조를 저장하는 경우 주의해야 합니다.

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

1. 이벤트 리스너 적절히 제거하기

// ❌ 잘못된 예
class Component {
  mount() {
    document.addEventListener('click', this.handleClick);
  }
}

// ✅ 올바른 예
class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }
  
  mount() {
    document.addEventListener('click', this.handleClick);
  }
  
  unmount() {
    document.removeEventListener('click', this.handleClick);
  }
  
  handleClick(e) {
    console.log('Clicked', e);
  }
}

2. 타이머 정리하기

// ✅ setInterval 정리
class Timer {
  start() {
    this.intervalId = setInterval(() => {
      console.log('Tick');
    }, 1000);
  }
  
  stop() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  }
}

// ✅ setTimeout 정리
const timeoutId = setTimeout(() => {
  console.log('Delayed action');
}, 5000);

// 필요시 취소
clearTimeout(timeoutId);

3. WeakMap과 WeakSet 활용

// ❌ 일반 Map 사용 (메모리 누수 가능)
const cache = new Map();
let element = document.getElementById('myElement');
cache.set(element, { data: 'some data' });
// element가 DOM에서 제거되어도 Map이 참조 유지

// ✅ WeakMap 사용 (자동 정리)
const cache = new WeakMap();
let element = document.getElementById('myElement');
cache.set(element, { data: 'some data' });
// element가 DOM에서 제거되면 가비지 컬렉션 가능

4. 클로저 사용 최적화

// ❌ 큰 데이터를 클로저에서 참조
function createHandler() {
  const largeData = new Array(1000000).fill('data');
  
  return function() {
    console.log(largeData[0]); // 전체 배열을 메모리에 유지
  };
}

// ✅ 필요한 데이터만 참조
function createHandler() {
  const largeData = new Array(1000000).fill('data');
  const firstItem = largeData[0];
  
  return function() {
    console.log(firstItem); // 첫 번째 항목만 유지
  };
}

5. DOM 참조 정리하기

// ✅ DOM 참조 관리
class ComponentManager {
  constructor() {
    this.components = [];
  }
  
  addComponent(element) {
    this.components.push(element);
  }
  
  removeComponent(element) {
    const index = this.components.indexOf(element);
    if (index > -1) {
      this.components.splice(index, 1);
    }
  }
  
  destroy() {
    // 모든 참조 정리
    this.components = [];
  }
}

6. AbortController로 요청 취소

// ✅ fetch 요청 취소 가능하게 만들기
class DataFetcher {
  constructor() {
    this.controller = new AbortController();
  }
  
  async fetchData(url) {
    try {
      const response = await fetch(url, {
        signal: this.controller.signal
      });
      return await response.json();
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Fetch aborted');
      }
    }
  }
  
  cancel() {
    this.controller.abort();
  }
}

7. React/Vue에서 cleanup 함수 사용

// ✅ React useEffect cleanup
import { useEffect } from 'react';

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

// ✅ Vue onBeforeUnmount
import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    let intervalId;
    
    onMounted(() => {
      intervalId = setInterval(() => {
        console.log('Tick');
      }, 1000);
    });
    
    onBeforeUnmount(() => {
      if (intervalId) {
        clearInterval(intervalId);
      }
    });
  }
}

예방법과 베스트 프랙티스

Memory leak in JavaScript applications를 예방하려면 개발 단계부터 메모리 관리를 고려해야 합니다. Chrome DevTools의 Performance Monitor를 사용해 개발 중 메모리 사용량을 모니터링하세요. 컴포넌트 라이프사이클을 명확히 관리하고, mount 시 생성한 리소스는 반드시 unmount 시 정리하는 습관을 들이세요. ESLint 플러그인을 활용해 메모리 누수를 유발할 수 있는 패턴을 자동으로 감지할 수 있습니다. 정기적으로 힙 스냅샷을 비교해 예상치 못한 메모리 증가가 없는지 확인하세요. 또한 코드 리뷰 시 이벤트 리스너, 타이머, 구독 등이 적절히 정리되는지 체크리스트에 포함시키는 것이 좋습니다. 라이브러리를 사용할 때도 destroy나 dispose 같은 정리 메서드가 있는지 확인하고 반드시 호출하세요.

마무리

메모리 누수는 JavaScript 애플리케이션의 성능과 사용자 경험에 직접적인 영향을 미치는 중요한 문제입니다. 이벤트 리스너 제거, 타이머 정리, WeakMap 활용 등 이 글에서 소개한 해결 방법들을 적용하면 대부분의 메모리 누수를 방지할 수 있습니다. 무엇보다 중요한 것은 생성한 리소스는 반드시 정리한다는 원칙을 지키는 것입니다. 개발 초기부터 메모리 관리를 염두에 두고 정기적으로 모니터링하면 안정적이고 효율적인 애플리케이션을 만들 수 있습니다. 메모리 프로파일링 도구를 적극 활용해 지속적으로 애플리케이션의 메모리 건강도를 체크하세요.