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

도입

Memory leak in JavaScript applications는 웹 애플리케이션 개발에서 가장 흔하게 발생하면서도 찾아내기 어려운 문제 중 하나입니다. 메모리 누수는 애플리케이션이 더 이상 필요하지 않은 메모리를 해제하지 않고 계속 점유하고 있는 상태를 의미합니다. 시간이 지남에 따라 사용 가능한 메모리가 점점 줄어들어 결국 브라우저가 느려지거나 탭이 충돌하는 심각한 문제를 초래할 수 있습니다. 특히 Single Page Application(SPA)이나 장시간 실행되는 웹 애플리케이션에서는 작은 메모리 누수도 시간이 지나면서 큰 성능 저하로 이어질 수 있습니다. 이 글에서는 JavaScript 메모리 누수의 원인과 해결 방법, 그리고 예방법까지 상세히 다루겠습니다.

에러 상세 분석

JavaScript는 가비지 컬렉션(Garbage Collection)을 통해 자동으로 메모리를 관리합니다. 가비지 컬렉터는 더 이상 참조되지 않는 객체를 찾아 메모리에서 제거합니다. 하지만 개발자가 의도치 않게 객체에 대한 참조를 유지하고 있으면 가비지 컬렉터가 해당 메모리를 회수할 수 없게 됩니다. 메모리 누수는 눈에 보이지 않게 발생하기 때문에 초기에는 문제를 인식하기 어렵습니다. 사용자가 페이지를 장시간 사용하거나 여러 작업을 반복할 때 점진적으로 메모리 사용량이 증가하며, 결국 브라우저의 응답 속도가 느려지고 최악의 경우 탭이 멈추거나 크래시가 발생합니다. Chrome DevTools의 Memory Profiler를 사용하면 메모리 사용 패턴을 분석하고 누수가 발생하는 지점을 찾아낼 수 있습니다. Heap Snapshot을 비교하면 시간이 지남에 따라 메모리에 남아있는 객체들을 추적할 수 있습니다.

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

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

전역 변수는 애플리케이션이 종료될 때까지 메모리에 남아있습니다. 특히 의도하지 않게 생성된 전역 변수는 메모리 누수의 주요 원인입니다. strict mode를 사용하지 않으면 변수 선언 없이 값을 할당할 때 자동으로 전역 변수가 생성됩니다.

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

DOM 요소에 이벤트 리스너를 추가한 후 요소를 제거하더라도 리스너를 명시적으로 제거하지 않으면 해당 리스너와 연관된 객체들이 메모리에 남아있습니다. 특히 클로저를 사용하는 이벤트 핸들러는 외부 스코프의 변수들을 계속 참조하게 됩니다.

3. 타이머와 콜백 함수

setTimeout이나 setInterval로 설정한 타이머를 clearTimeout, clearInterval로 정리하지 않으면 콜백 함수가 계속 메모리에 남습니다. 특히 setInterval은 명시적으로 중지하지 않는 한 무한히 실행되며 참조를 유지합니다.

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

클로저는 외부 함수의 변수를 내부 함수에서 참조할 수 있게 하는 강력한 기능이지만, 잘못 사용하면 불필요한 메모리를 계속 점유하게 됩니다. 특히 큰 데이터 구조를 클로저에서 참조하면 해당 데이터가 계속 메모리에 남습니다.

5. DOM 참조 유지

JavaScript 객체나 배열에서 DOM 요소를 참조하고 있으면, 해당 DOM 요소를 화면에서 제거하더라도 메모리에서는 해제되지 않습니다. 특히 테이블이나 리스트의 셀을 객체에 저장해두는 경우가 많은데, 이런 참조들이 누적되면 심각한 메모리 누수가 발생합니다.

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

해결방법 1: 전역 변수 사용 최소화

전역 변수 대신 모듈 패턴이나 IIFE를 사용하여 스코프를 제한합니다.

// 잘못된 예
function createUser() {
  user = { name: 'John', age: 30 }; // 전역 변수 생성
}

// 올바른 예
function createUser() {
  const user = { name: 'John', age: 30 }; // 지역 변수
  return user;
}

// 또는 모듈 패턴 사용
const UserModule = (function() {
  let user = null;
  
  return {
    create: function(name, age) {
      user = { name, age };
    },
    destroy: function() {
      user = null; // 명시적 해제
    }
  };
})();

해결방법 2: 이벤트 리스너 제거

컴포넌트가 언마운트되거나 DOM 요소가 제거될 때 반드시 이벤트 리스너를 제거합니다.

// 잘못된 예
const button = document.getElementById('myButton');
button.addEventListener('click', function handleClick() {
  console.log('Clicked');
});
// 리스너가 제거되지 않음

// 올바른 예
class ButtonHandler {
  constructor(buttonId) {
    this.button = document.getElementById(buttonId);
    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; // 참조 제거
  }
}

해결방법 3: 타이머 정리

설정한 모든 타이머는 사용 후 반드시 정리합니다.

// 잘못된 예
function startPolling() {
  setInterval(() => {
    fetchData();
  }, 5000);
}

// 올바른 예
class DataPoller {
  constructor() {
    this.intervalId = null;
  }
  
  start() {
    this.intervalId = setInterval(() => {
      fetchData();
    }, 5000);
  }
  
  stop() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  }
}

// 사용 예
const poller = new DataPoller();
poller.start();
// 나중에...
poller.stop(); // 메모리 해제

해결방법 4: WeakMap과 WeakSet 활용

객체에 대한 약한 참조가 필요한 경우 WeakMap이나 WeakSet을 사용합니다.

// 잘못된 예 - 일반 Map 사용
const cache = new Map();
function cacheElement(element, data) {
  cache.set(element, data); // 강한 참조로 메모리 누수 발생
}

// 올바른 예 - WeakMap 사용
const cache = new WeakMap();
function cacheElement(element, data) {
  cache.set(element, data); // 약한 참조, element가 제거되면 자동으로 GC
}

// 활용 예
const elementMetadata = new WeakMap();
const div = document.createElement('div');
elementMetadata.set(div, { created: Date.now(), clicks: 0 });
// div가 DOM에서 제거되고 다른 참조가 없으면 자동으로 메모리 해제

해결방법 5: DOM 참조 해제

DOM 요소에 대한 참조를 저장한 경우 사용 후 명시적으로 null로 설정합니다.

// 잘못된 예
const elements = {
  header: document.getElementById('header'),
  content: document.getElementById('content')
};
// 요소가 제거되어도 참조가 남아있음

// 올바른 예
class ComponentManager {
  constructor() {
    this.elements = {};
  }
  
  initialize() {
    this.elements.header = document.getElementById('header');
    this.elements.content = document.getElementById('content');
  }
  
  destroy() {
    // 모든 DOM 참조 제거
    Object.keys(this.elements).forEach(key => {
      this.elements[key] = null;
    });
    this.elements = {};
  }
}

해결방법 6: 클로저 최적화

클로저에서 큰 객체를 참조할 때는 필요한 데이터만 추출하여 사용합니다.

// 잘못된 예
function createHandler(largeData) {
  return function() {
    console.log(largeData.id); // 전체 largeData 객체를 참조
  };
}

// 올바른 예
function createHandler(largeData) {
  const id = largeData.id; // 필요한 데이터만 추출
  return function() {
    console.log(id); // 작은 데이터만 클로저에 포함
  };
}

// 실전 예제
function setupUserHandlers(userData) {
  // userData가 매우 큰 객체라고 가정
  const userId = userData.id;
  const userName = userData.name;
  
  document.getElementById('profile').addEventListener('click', () => {
    // 전체 userData 대신 필요한 값만 사용
    showProfile(userId, userName);
  });
}

해결방법 7: 순환 참조 제거

객체 간 순환 참조를 방지하고, 필요한 경우 명시적으로 참조를 끊습니다.

// 잘못된 예
function createCircularReference() {
  const obj1 = {};
  const obj2 = {};
  obj1.ref = obj2;
  obj2.ref = obj1; // 순환 참조
  return obj1;
}

// 올바른 예
function createManagedReference() {
  const obj1 = {};
  const obj2 = {};
  obj1.ref = obj2;
  obj2.ref = obj1;
  
  // 정리 함수 제공
  return {
    data: obj1,
    cleanup: function() {
      obj1.ref = null;
      obj2.ref = null;
    }
  };
}

// 사용 예
const managed = createManagedReference();
// 사용 후...
managed.cleanup(); // 순환 참조 제거

예방법과 베스트 프랙티스

Memory leak in JavaScript applications를 예방하기 위해서는 다음과 같은 베스트 프랙티스를 따라야 합니다. 첫째, Chrome DevTools의 Performance Monitor와 Memory Profiler를 정기적으로 사용하여 메모리 사용 패턴을 모니터링합니다. Heap Snapshot을 주기적으로 찍어 비교하면 메모리 누수를 조기에 발견할 수 있습니다. 둘째, React, Vue, Angular 같은 프레임워크를 사용할 때는 컴포넌트 라이프사이클을 활용하여 cleanup 로직을 구현합니다. useEffect의 cleanup function이나 componentWillUnmount에서 리스너와 타이머를 제거합니다. 셋째, ESLint 플러그인을 활용하여 잠재적인 메모리 누수 패턴을 정적 분석으로 탐지합니다. 넷째, 코드 리뷰 시 이벤트 리스너, 타이머, DOM 참조에 대한 정리 코드가 있는지 확인합니다. 다섯째, 단위 테스트와 통합 테스트에서 메모리 누수 여부를 검증하는 테스트 케이스를 추가합니다. 마지막으로, 대용량 데이터를 다룰 때는 가상 스크롤링(Virtual Scrolling)이나 페이지네이션을 활용하여 한 번에 렌더링되는 DOM 요소 수를 제한합니다.

마무리

Memory leak in JavaScript applications는 애플리케이션의 성능과 안정성에 직접적인 영향을 미치는 중요한 문제입니다. 하지만 원인을 이해하고 적절한 해결 방법을 적용하면 충분히 예방하고 해결할 수 있습니다. 이벤트 리스너와 타이머를 반드시 정리하고, 전역 변수 사용을 최소화하며, DOM 참조를 적절히 관리하는 것이 핵심입니다. Chrome DevTools를 활용한 정기적인 모니터링과 코드 리뷰를 통해 메모리 누수를 조기에 발견하고 해결할 수 있습니다. 이 글에서 소개한 베스트 프랙티스를 프로젝트에 적용하여 안정적이고 성능이 우수한 JavaScript 애플리케이션을 개발하시기 바랍니다.