Memory leak in JavaScript applications 완벽 해결법

JavaScript 애플리케이션을 개발하다 보면 성능이 점점 저하되고 브라우저가 느려지는 경험을 하게 됩니다. 이는 대부분 Memory leak in JavaScript applications 문제 때문입니다. 메모리 누수는 더 이상 사용되지 않는 객체가 가비지 컬렉터에 의해 회수되지 않고 메모리에 계속 남아있는 현상을 말합니다. 특히 SPA(Single Page Application)나 장시간 실행되는 웹 애플리케이션에서 심각한 성능 저하를 일으킬 수 있습니다. 이 글에서는 메모리 누수의 원인부터 해결법, 예방법까지 완벽하게 다루겠습니다.

메모리 누수 에러 상세 분석

메모리 누수는 명시적인 에러 메시지를 발생시키지 않기 때문에 발견하기 어렵습니다. 대신 다음과 같은 증상으로 나타납니다:

• 애플리케이션 성능 저하: 시간이 지날수록 페이지 반응 속도가 느려집니다
• 메모리 사용량 증가: Chrome DevTools의 Memory 탭에서 힙 크기가 계속 증가합니다
• 브라우저 크래시: 심한 경우 “Out of Memory” 에러와 함께 탭이나 브라우저가 종료됩니다
• UI 프리징: 사용자 인터랙션에 대한 응답이 지연되거나 멈춥니다

JavaScript는 가비지 컬렉션을 자동으로 수행하지만, 참조가 남아있는 객체는 회수할 수 없습니다. 따라서 개발자가 의도치 않게 참조를 유지하면 메모리 누수가 발생합니다.

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

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

전역 스코프에 선언된 변수는 애플리케이션이 종료될 때까지 메모리에 남아있습니다. 특히 실수로 var 없이 변수를 선언하면 자동으로 전역 변수가 됩니다.

2. 이벤트 리스너 미제거

DOM 요소에 이벤트 리스너를 등록하고 제거하지 않으면, 해당 요소와 리스너 함수가 메모리에 계속 남습니다. SPA에서 컴포넌트를 제거할 때 특히 주의해야 합니다.

3. 타이머 함수 미정리

setInterval이나 setTimeout으로 등록한 타이머를 clearInterval/clearTimeout으로 정리하지 않으면 콜백 함수와 그것이 참조하는 모든 객체가 메모리에 유지됩니다.

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

클로저는 외부 스코프의 변수를 계속 참조하기 때문에, 큰 객체를 클로저 내부에서 참조하면 해당 객체가 가비지 컬렉션되지 않습니다.

5. DOM 참조 유지

DOM 요소를 변수에 저장해두고 해당 요소가 DOM 트리에서 제거된 후에도 변수를 유지하면, 분리된 DOM 트리(Detached DOM Tree)가 메모리에 남게 됩니다.

Memory leak in JavaScript applications 해결방법 7가지

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

// 문제가 있는 코드
class Component {
  constructor() {
    document.addEventListener('click', this.handleClick);
  }
  
  handleClick() {
    console.log('Clicked');
  }
}

// 해결 코드
class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
    document.addEventListener('click', this.handleClick);
  }
  
  handleClick() {
    console.log('Clicked');
  }
  
  destroy() {
    document.removeEventListener('click', this.handleClick);
  }
}

2. 타이머 정리하기

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

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

3. DOM 참조 해제하기

// 문제가 있는 코드
const cache = {};
function cacheElement(id) {
  cache[id] = document.getElementById(id);
}

// 해결 코드
class ElementCache {
  constructor() {
    this.cache = new WeakMap();
  }
  
  set(key, element) {
    this.cache.set(key, element);
  }
  
  clear() {
    this.cache = new WeakMap();
  }
}

4. WeakMap과 WeakSet 활용하기

// 일반 Map은 메모리 누수 발생
const userCache = new Map();
let user = { name: 'John', data: new Array(1000000) };
userCache.set('user1', user);
user = null; // user 객체는 여전히 Map에 참조됨

// WeakMap 사용으로 해결
const userCache = new WeakMap();
let user = { name: 'John', data: new Array(1000000) };
userCache.set(user, 'some data');
user = null; // user 객체가 가비지 컬렉션됨

5. 클로저 최적화하기

// 문제가 있는 코드
function createClosure() {
  const largeData = new Array(1000000).fill('data');
  
  return function() {
    console.log(largeData[0]); // 전체 배열을 참조
  };
}

// 해결 코드
function createClosure() {
  const largeData = new Array(1000000).fill('data');
  const firstItem = largeData[0]; // 필요한 부분만 추출
  
  return function() {
    console.log(firstItem); // 작은 데이터만 참조
  };
}

6. 전역 변수 최소화하기

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

// 해결 코드
const AppModule = (function() {
  let appData = [];
  
  return {
    addData(item) {
      appData.push(item);
    },
    clearData() {
      appData = [];
    }
  };
})();

7. 순환 참조 제거하기

// 문제가 있는 코드
function createNodes() {
  const parent = { children: [] };
  const child = { parent: parent };
  parent.children.push(child); // 순환 참조
}

// 해결 코드
function createNodes() {
  const parent = { children: [] };
  const child = { parentId: 'parent-1' }; // ID로 참조
  parent.children.push(child);
  
  // 사용 후 정리
  parent.children = [];
}

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

Memory leak in JavaScript applications를 예방하기 위한 베스트 프랙티스는 다음과 같습니다:

• Chrome DevTools 활용: Performance 탭과 Memory 탭을 사용하여 정기적으로 메모리 프로파일링을 수행하세요
• 생명주기 관리: React, Vue 등 프레임워크의 생명주기 메서드(componentWillUnmount, onBeforeUnmount)에서 리소스를 정리하세요
• Null 할당: 큰 객체를 사용한 후 명시적으로 null을 할당하여 참조를 해제하세요
• 메모리 제한 테스트: 장시간 실행 테스트를 통해 메모리 사용량이 안정적인지 확인하세요
• 코드 리뷰: 이벤트 리스너, 타이머, 구독 등이 적절히 정리되는지 검토하세요

마무리

JavaScript 메모리 누수는 애플리케이션의 성능과 사용자 경험에 직접적인 영향을 미칩니다. 이벤트 리스너 제거, 타이머 정리, WeakMap 활용 등의 방법을 통해 Memory leak in JavaScript applications 문제를 효과적으로 해결할 수 있습니다. 정기적인 메모리 프로파일링과 코드 리뷰를 통해 메모리 누수를 사전에 예방하고, 안정적이고 빠른 웹 애플리케이션을 만들어보세요. 개발 초기 단계부터 메모리 관리를 염두에 두면 장기적으로 유지보수가 훨씬 수월해집니다.