Javascript - 메모리누수와 가비지컬렉션: 원리와 대응방법

자바스크립트에서의 메모리 누수와 가비지 컬렉션: 원리와 대응 방법

 

자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 이 글에서는 자바스크립트에서 메모리 누수와 가비지 컬렉션에 대해 설명하고, 원리와 대응 방법을 살펴봅니다.

1. 메모리 누수란?

메모리 누수(Memory Leak)는 프로그램이 더 이상 사용되지 않는 메모리를 반환하지 않아 시스템 리소스가 낭비되는 현상을 말합니다. 메모리 누수가 발생하면, 시스템의 성능이 저하되고 웹 애플리케이션의 안정성이 떨어질 수 있습니다.

 

2. 가비지 컬렉션의 원리

가비지 컬렉션(Garbage Collection, GC)은 사용하지 않는 메모리를 자동으로 회수하는 메모리 관리 기법입니다. 자바스크립트 엔진은 가비지 컬렉션을 통해 메모리 누수를 방지하고자 합니다. 주요 가비지 컬렉션 알고리즘은 다음과 같습니다.

• 참조 추적(Reference Tracking): 자바스크립트 엔진은 객체에 대한 참조 횟수를 추적합니다. 참조 횟수가 0이 되면, 해당 객체는 가비지로 간주되어 가비지 컬렉터에 의해 메모리에서 제거됩니다.
• 표시-삭제(Mark and Sweep): 가비지 컬렉터는 객체들을 표시한 후, 미표시된 객체를 메모리에서 제거하는 방식으로 동작합니다. 루트(root) 객체부터 시작하여 접근 가능한 모든 객체를 표시하고, 접근 불가능한 객체는 가비지로 간주하여 메모리에서 삭제합니다.

3. 자바스크립트에서의 메모리 누수 예제와 해결 방법

• 전역 변수(Global Variables): 전역 변수는 프로그램이 실행되는 동안 계속해서 메모리에 남아있습니다. 전역 변수를 남용하면 메모리 누수가 발생할 수 있습니다.

해결 방법: 전역 변수 사용을 최소화하고, 필요한 경우에만 지역 변수나 즉시 실행 함수(IIFE)를 사용합니다.

• 이벤트 리스너(Event Listeners): DOM 요소에 이벤트 리스너를 등록하고, 요소를 제거해도 이벤트 리스너가 해제되지 않으면 메모리 누수가 발생할 수 있습니다.

해결 방법: 요소를 제거할 때 반드시 이벤트 리스너를 해제하거나, 이벤트 위임을 사용하여 상위 요소에 이벤트 리스너를 등록하여 관리합니다.

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Button clicked");
});

// 이벤트 리스너 제거
button.removeEventListener("click", () => {
  console.log("Button clicked");
});

• 클로저(Closures): 클로저를 사용하면 외부 함수의 변수에 접근할 수 있지만, 외부 함수가 종료된 이후에도 변수가 메모리에 남아있습니다. 이로 인해 메모리 누수가 발생할 수 있습니다.

해결 방법: 클로저를 사용할 때 주의하여 필요한 경우에만 클로저를 사용하고, 메모리 사용을 최적화합니다.

 

4. 메모리 누수를 방지하기 위한 최적화 기법

• 객체 풀링(Object Pooling): 객체를 재사용하기 위해 객체 풀을 사용하여 메모리 사용량을 줄입니다. 객체가 더 이상 필요하지 않으면 객체 풀에 반환하여 다시 사용할 수 있도록 합니다.

class ObjectPool {
  constructor(createFn) {
    this.createFn = createFn;
    this.pool = [];
  }

  acquire() {
    return this.pool.length > 0 ? this.pool.pop() : this.createFn();
  }

  release(obj) {
    this.pool.push(obj);
  }
}

• 요청 애니메이션 프레임(Request Animation Frame): 애니메이션 및 돔 조작 등을 최적화하여 메모리 사용량을 줄입니다. 요청 애니메이션 프레임은 애니메이션 작업을 브라우저의 리프레시 주기와 동기화하여 효율적으로 수행할 수 있습니다.

function animate() {
  // 애니메이션 로직

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

 

정리

이 글에서는 자바스크립트에서의 메모리 누수와 가비지 컬렉션의 원리, 대응 방법을 살펴보았습니다. 메모리 누수를 방지하고 최적화된 코드를 작성함으로써 웹 애플리케이션의 성능과 안정성을 향상시킬 수 있습니다. 이를 위해 알려진 문제 및 해결 방법을 숙지하고, 코드 최적화 기법을 적용하여 효과적인 프로그래밍을 진행하세요.