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

도입: Memory leak in JavaScript applications란?

Memory leak in JavaScript applications는 현대 웹 애플리케이션 개발에서 가장 흔하게 마주치는 성능 문제 중 하나입니다. 메모리 누수는 애플리케이션이 더 이상 필요하지 않은 메모리를 해제하지 못하고 계속 점유하는 현상을 의미합니다. 시간이 지날수록 사용 가능한 메모리가 줄어들어 브라우저나 Node.js 애플리케이션의 성능이 저하되고, 심한 경우 크래시가 발생할 수 있습니다. 특히 SPA(Single Page Application)나 장시간 실행되는 서버 애플리케이션에서 이 문제는 더욱 심각하게 나타납니다. 이 글에서는 메모리 누수의 원인을 정확히 파악하고 효과적으로 해결하는 방법을 단계별로 알아보겠습니다.

에러 상세 분석

JavaScript는 가비지 컬렉션(Garbage Collection)을 통해 자동으로 메모리를 관리합니다. 그러나 개발자가 의도치 않게 객체에 대한 참조를 유지하면 가비지 컬렉터가 해당 메모리를 회수할 수 없게 됩니다. 메모리 누수의 주요 징후로는 페이지 로딩 속도 저하, 브라우저 응답 지연, CPU 사용률 증가, 그리고 최종적으로 “Out of Memory” 에러가 발생합니다. Chrome DevTools의 Memory Profiler나 Performance 탭을 사용하면 메모리 사용량이 시간에 따라 지속적으로 증가하는 패턴을 확인할 수 있습니다. Heap Snapshot을 비교 분석하면 어떤 객체들이 예상과 달리 메모리에 남아있는지 식별할 수 있습니다. Node.js 환경에서는 process.memoryUsage()를 통해 메모리 사용량을 모니터링할 수 있으며, --inspect 플래그로 실행하여 Chrome DevTools를 연결해 프로파일링이 가능합니다.

발생 원인 5가지

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

전역 스코프에 선언된 변수는 애플리케이션이 종료될 때까지 메모리에 남아있습니다. 특히 var 키워드 없이 변수를 선언하거나 window 객체에 속성을 추가하면 의도치 않은 전역 변수가 생성되어 메모리 누수의 원인이 됩니다.

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

DOM 요소에 이벤트 리스너를 등록한 후 해당 요소를 제거하더라도 이벤트 리스너가 남아있으면 클로저를 통해 참조된 모든 변수가 메모리에 유지됩니다. SPA에서 컴포넌트가 언마운트될 때 이벤트 리스너를 제거하지 않으면 심각한 메모리 누수가 발생합니다.

3. 타이머 함수 미정리

setInterval이나 setTimeout으로 등록한 콜백 함수는 명시적으로 clearInterval이나 clearTimeout을 호출하지 않으면 계속 실행되며, 콜백 내부에서 참조하는 모든 변수를 메모리에 유지합니다.

4. 클로저의 잘못된 사용

클로저는 외부 함수의 변수에 접근할 수 있는 내부 함수입니다. 클로저가 더 이상 필요하지 않은 큰 객체를 참조하고 있으면 해당 객체가 가비지 컬렉션되지 않아 메모리 누수가 발생합니다.

5. DOM 참조 유지

JavaScript 변수에 DOM 요소를 저장한 후 해당 DOM을 삭제하더라도, 변수가 여전히 요소를 참조하고 있으면 메모리에서 해제되지 않습니다. 특히 detached DOM tree는 메모리 누수의 주요 원인입니다.

해결방법 7가지

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

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

// 해결 코드
class ComponentManager {
  constructor() {
    this.listeners = [];
  }
  
  addListener(element, event, handler) {
    element.addEventListener(event, handler);
    this.listeners.push({ element, event, handler });
  }
  
  cleanup() {
    this.listeners.forEach(({ element, event, handler }) => {
      element.removeEventListener(event, handler);
    });
    this.listeners = [];
  }
}

const manager = new ComponentManager();
manager.addListener(button, 'click', handleClick);
// 컴포넌트 제거 시
manager.cleanup();

2. 타이머 함수 정리하기

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

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

const polling = new PollingService();
polling.start();
// 정리 시
polling.stop();

3. WeakMap과 WeakSet 활용하기

// 문제 코드 - 강한 참조
const cache = new Map();
function cacheUser(user) {
  cache.set(user.id, user); // user 객체가 영구히 메모리에 유지됨
}

// 해결 코드 - 약한 참조
const cache = new WeakMap();
function cacheUser(userObj) {
  cache.set(userObj, userObj.data);
  // userObj가 다른 곳에서 참조되지 않으면 자동으로 GC됨
}

4. DOM 참조 해제하기

// 문제 코드
const elements = [];
function storeElement() {
  const div = document.createElement('div');
  document.body.appendChild(div);
  elements.push(div); // DOM 참조 유지
}

// 해결 코드
class DOMManager {
  constructor() {
    this.elements = new WeakMap();
  }
  
  createElement(tag, id) {
    const element = document.createElement(tag);
    document.body.appendChild(element);
    this.elements.set(element, { id });
    return element;
  }
  
  removeElement(element) {
    element.remove();
    // WeakMap이므로 자동으로 정리됨
  }
}

5. 클로저 최적화하기

// 문제 코드
function createHandler(largeData) {
  return function() {
    console.log(largeData.id); // largeData 전체를 참조
  };
}

// 해결 코드
function createHandler(largeData) {
  const id = largeData.id; // 필요한 값만 추출
  return function() {
    console.log(id); // 작은 값만 참조
  };
}

6. 전역 변수 최소화하기

// 문제 코드
var userData = fetchUserData();
function processUser() {
  globalUserCache = userData; // 의도치 않은 전역 변수
}

// 해결 코드
const App = (() => {
  let userData = null;
  
  return {
    init() {
      userData = fetchUserData();
    },
    cleanup() {
      userData = null;
    }
  };
})();

7. Chrome DevTools로 메모리 프로파일링하기

// 메모리 누수 감지 코드
class MemoryMonitor {
  constructor() {
    this.snapshots = [];
  }
  
  takeSnapshot() {
    if (performance.memory) {
      this.snapshots.push({
        timestamp: Date.now(),
        usedJSHeapSize: performance.memory.usedJSHeapSize,
        totalJSHeapSize: performance.memory.totalJSHeapSize
      });
    }
  }
  
  analyzeLeaks() {
    const growth = this.snapshots[this.snapshots.length - 1].usedJSHeapSize - 
                   this.snapshots[0].usedJSHeapSize;
    return growth > 10 * 1024 * 1024; // 10MB 이상 증가 시 경고
  }
}

const monitor = new MemoryMonitor();
setInterval(() => monitor.takeSnapshot(), 10000);

예방법과 베스트 프랙티스

Memory leak in JavaScript applications를 예방하기 위해서는 몇 가지 베스트 프랙티스를 따라야 합니다. 첫째, 컴포넌트 생명주기를 명확히 관리하고 cleanup 함수를 항상 구현하세요. React의 useEffect cleanup, Vue의 beforeDestroy, Angular의 ngOnDestroy를 활용하세요. 둘째, ESLint 플러그인을 사용하여 잠재적인 메모리 누수 패턴을 코드 작성 단계에서 감지하세요. 셋째, 정기적으로 메모리 프로파일링을 수행하여 메모리 사용 패턴을 모니터링하세요. 넷째, 큰 데이터 구조는 필요할 때만 로드하고 즉시 해제하는 lazy loading 패턴을 적용하세요. 다섯째, 코드 리뷰 시 이벤트 리스너, 타이머, 외부 라이브러리 사용에 대한 정리 로직이 있는지 확인하세요. 마지막으로 CI/CD 파이프라인에 메모리 누수 테스트를 포함시켜 자동으로 감지할 수 있도록 하세요.

마무리

Memory leak in JavaScript applications는 적절한 지식과 도구만 있다면 충분히 예방하고 해결할 수 있는 문제입니다. 이벤트 리스너와 타이머를 적절히 정리하고, WeakMap/WeakSet을 활용하며, 정기적인 메모리 프로파일링을 통해 건강한 애플리케이션을 유지하세요. 메모리 관리는 단순히 버그 수정이 아니라 사용자 경험을 개선하는 핵심 요소입니다. 이 가이드를 참고하여 안정적이고 효율적인 JavaScript 애플리케이션을 개발하시기 바랍니다.