Blog

도입: Memory leak in JavaScript applications란?

Memory leak in JavaScript applications는 현대 웹 애플리케이션 개발에서 가장 흔하게 마주치는 성능 문제 중 하나입니다. 메모리 누수는 애플리케이션이 더 이상 필요하지 않은 메모리를 해제하지 않고 계속 점유하는 현상으로, 시간이 지날수록 사용 가능한 메모리가 줄어들어 브라우저가 느려지거나 심지어 크래시가 발생할 수 있습니다. 특히 Single Page Application(SPA)처럼 오랜 시간 동안 실행되는 애플리케이션에서는 작은 메모리 누수도 누적되어 심각한 문제를 야기할 수 있습니다. 사용자 경험을 저하시키고 서비스 신뢰도에 영향을 미치기 때문에, 개발자라면 반드시 이해하고 해결할 수 있어야 하는 필수 지식입니다.

에러 상세 분석

JavaScript는 가비지 컬렉션(Garbage Collection) 메커니즘을 통해 자동으로 메모리를 관리하지만, 이것이 완벽하지는 않습니다. 가비지 컬렉터는 참조되지 않는 객체를 메모리에서 제거하는데, 개발자가 의도치 않게 객체에 대한 참조를 유지하면 가비지 컬렉터가 해당 메모리를 회수할 수 없습니다. 메모리 누수의 주요 증상으로는 페이지 성능 저하, 브라우저 응답 지연, 메모리 사용량 지속적 증가, 최악의 경우 ‘Out of Memory’ 에러가 발생합니다. Chrome DevTools의 Performance Monitor나 Memory Profiler를 사용하면 메모리 사용 패턴을 시각적으로 확인할 수 있으며, 힙 스냅샷(Heap Snapshot)을 비교하여 어떤 객체가 메모리에 누적되고 있는지 식별할 수 있습니다. 메모리 누수는 눈에 보이지 않기 때문에 프로파일링 도구 없이는 발견하기 어렵고, 프로덕션 환경에서 발생하면 사용자에게 직접적인 영향을 미칩니다.

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

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

전역 변수는 애플리케이션이 종료될 때까지 메모리에 남아있습니다. 특히 ‘this’를 잘못 사용하거나 ‘var’ 없이 변수를 선언하면 의도치 않게 전역 변수가 생성되어 메모리 누수의 원인이 됩니다. 대규모 객체나 배열을 전역으로 선언하면 불필요하게 많은 메모리를 차지하게 됩니다.

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

DOM 요소에 이벤트 리스너를 등록한 후 해당 요소가 제거되더라도 이벤트 리스너가 제거되지 않으면 메모리 누수가 발생합니다. 특히 SPA에서 컴포넌트가 마운트/언마운트를 반복할 때 이벤트 리스너를 정리하지 않으면 메모리가 계속 쌓입니다.

3. 타이머(setTimeout/setInterval) 미정리

setTimeout이나 setInterval로 설정한 타이머를 clearTimeout이나 clearInterval로 정리하지 않으면, 콜백 함수와 그 함수가 참조하는 모든 변수가 메모리에 계속 남아있게 됩니다. 특히 클로저로 인해 예상보다 많은 메모리를 점유할 수 있습니다.

4. DOM 참조 유지

JavaScript 코드에서 DOM 요소에 대한 참조를 변수에 저장한 후, 해당 DOM이 화면에서 제거되어도 변수가 여전히 참조를 유지하면 DOM 요소와 그 하위 트리 전체가 메모리에 남습니다. 이를 ‘Detached DOM’이라고 합니다.

5. 클로저의 잘못된 사용

클로저는 외부 함수의 변수를 참조할 수 있는데, 클로저가 계속 유지되면 참조하는 모든 변수도 메모리에 남게 됩니다. 특히 큰 객체나 배열을 클로저에서 참조하면 예상치 못한 메모리 누수가 발생할 수 있습니다.

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

1. 이벤트 리스너 정리하기

// 문제가 있는 코드
function setupButton() {
  const button = document.getElementById('myButton');
  button.addEventListener('click', handleClick);
}

// 해결 코드
class ButtonHandler {
  constructor() {
    this.button = document.getElementById('myButton');
    this.handleClick = this.handleClick.bind(this);
    this.button.addEventListener('click', this.handleClick);
  }
  
  handleClick() {
    console.log('Button clicked');
  }
  
  destroy() {
    this.button.removeEventListener('click', this.handleClick);
    this.button = null;
  }
}

2. 타이머 정리하기

// 문제가 있는 코드
function startPolling() {
  setInterval(() => {
    fetchData();
  }, 1000);
}

// 해결 코드
class DataPoller {
  constructor() {
    this.timerId = null;
  }
  
  start() {
    this.timerId = setInterval(() => {
      fetchData();
    }, 1000);
  }
  
  stop() {
    if (this.timerId) {
      clearInterval(this.timerId);
      this.timerId = null;
    }
  }
}

3. WeakMap과 WeakSet 활용

// 문제가 있는 코드
const cache = new Map();
function cacheUser(user) {
  cache.set(user.id, user); // user 객체가 계속 메모리에 남음
}

// 해결 코드
const cache = new WeakMap();
function cacheUser(userElement, userData) {
  cache.set(userElement, userData); // userElement가 GC되면 자동으로 제거
}

4. DOM 참조 해제

// 문제가 있는 코드
let elements = [];
function storeElements() {
  elements = document.querySelectorAll('.item');
}

// 해결 코드
function processElements() {
  const elements = document.querySelectorAll('.item');
  // 작업 수행
  elements.forEach(el => el.dataset.processed = 'true');
  // 함수 종료 시 자동으로 참조 해제
}

5. 전역 변수 최소화

// 문제가 있는 코드
var globalData = [];
function addData(item) {
  globalData.push(item);
}

// 해결 코드
const DataManager = (() => {
  let privateData = [];
  
  return {
    add(item) {
      privateData.push(item);
    },
    clear() {
      privateData = [];
    }
  };
})();

6. 클로저 최적화

// 문제가 있는 코드
function createHandler() {
  const largeData = new Array(1000000).fill('data');
  return function() {
    console.log('Handler called');
    // largeData를 사용하지 않지만 클로저로 인해 메모리에 유지됨
  };
}

// 해결 코드
function createHandler() {
  const largeData = new Array(1000000).fill('data');
  processData(largeData);
  // largeData 사용 완료
  
  return function() {
    console.log('Handler called');
    // 필요한 데이터만 참조
  };
}

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

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

function MyComponent() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Tick');
    }, 1000);
    
    const handleResize = () => {
      console.log('Resized');
    };
    window.addEventListener('resize', handleResize);
    
    // 클린업 함수
    return () => {
      clearInterval(timer);
      window.removeEventListener('resize', handleResize);
    };
  }, []);
  
  return 
My Component
;
}

메모리 누수 예방법과 베스트 프랙티스

Memory leak in JavaScript applications를 예방하기 위해서는 개발 단계부터 체계적인 접근이 필요합니다. 첫째, Chrome DevTools의 Performance Monitor를 정기적으로 사용하여 메모리 사용 패턴을 모니터링하세요. 둘째, 컴포넌트나 모듈에서 리소스를 생성할 때는 항상 정리(cleanup) 로직을 함께 구현하는 습관을 들이세요. 셋째, ESLint 플러그인을 활용하여 잠재적인 메모리 누수 패턴을 정적 분석으로 미리 발견하세요. 넷째, 코드 리뷰 시 이벤트 리스너, 타이머, 구독(subscription) 등의 정리 여부를 체크리스트에 포함시키세요. 다섯째, 무한 스크롤이나 대량의 DOM 요소를 다룰 때는 가상 스크롤링(Virtual Scrolling) 기법을 사용하여 실제 렌더링되는 요소 수를 제한하세요. 여섯째, 개발 환경에서 메모리 프로파일링을 정기적으로 수행하고, 프로덕션 배포 전 장시간 실행 테스트를 진행하세요.

마무리

Memory leak in JavaScript applications는 애플리케이션 성능과 사용자 경험에 직접적인 영향을 미치는 중요한 이슈입니다. 가비지 컬렉션이 자동으로 이루어진다고 해서 메모리 관리를 소홀히 하면 안 됩니다. 이벤트 리스너 정리, 타이머 해제, DOM 참조 관리 등 기본적인 원칙을 지키고, 프로파일링 도구를 적극 활용하면 대부분의 메모리 누수를 예방하고 해결할 수 있습니다. 개발 초기부터 메모리 효율적인 코드를 작성하는 습관을 들이고, 팀 차원에서 베스트 프랙티스를 공유한다면 안정적이고 빠른 애플리케이션을 만들 수 있을 것입니다.