icon안동민 개발노트

메모리 관리와 가비지 컬렉션

 자바스크립트는 자동 메모리 관리 기능을 제공하는 고수준 프로그래밍 언어입니다.

 이 절에서는 자바스크립트의 메모리 관리 모델과 가비지 컬렉션 메커니즘에 대해 자세히 알아보겠습니다.

메모리 관리 모델

 자바스크립트 엔진은 자동으로 메모리를 할당하고 해제합니다.

 변수를 선언하면 메모리가 자동으로 할당되고, 더 이상 사용되지 않는 메모리는 가비지 컬렉터에 의해 자동으로 회수됩니다.

가비지 컬렉션의 기본 개념

 가비지 컬렉션은 더 이상 필요하지 않은 메모리를 식별하고 해제하는 프로세스입니다.

 자바스크립트 엔진은 주기적으로 가비지 컬렉션을 수행하여 메모리를 관리합니다.

주요 가비지 컬렉션 알고리즘

 1. 참조 카운팅 (Reference Counting)

  • 원리 : 각 객체에 대한 참조 수를 추적하고, 참조 수가 0이 되면 해당 객체를 메모리에서 해제합니다.
  • 장점 : 즉시 메모리 해제 가능
  • 단점 : 순환 참조 문제를 해결하지 못함

 2. 마크-앤-스위프 (Mark-and-Sweep)

  • 원리 : 루트(전역 객체 등)에서 시작하여 도달 가능한 모든 객체를 마크하고, 마크되지 않은 객체를 메모리에서 해제합니다.
  • 장점 : 순환 참조 문제 해결 가능
  • 단점 : 주기적으로 전체 객체 그래프를 순회해야 하므로 성능 오버헤드 발생 가능

 현대 자바스크립트 엔진들은 주로 마크-앤-스위프 알고리즘의 변형을 사용합니다.

메모리 누수 상황과 방지법

 1. 순환 참조

let obj1 = {};
let obj2 = {};
obj1.ref = obj2;
obj2.ref = obj1;

 방지법 : 순환 참조를 피하거나, 필요 없어진 참조를 명시적으로 null로 설정

 2. 클로저 미사용

function outer() {
  let largeData = new Array(1000000);
  return function inner() {
    // largeData를 사용하지 않음
  };
}
let closure = outer();

 방지법 : 클로저에서 실제로 사용하는 데이터만 캡처

 3. 분리된 DOM 노드

let element = document.getElementById('button');
element.onclick = function() {
  // 이벤트 처리
};
document.body.removeChild(element); // DOM에서는 제거되었지만 자바스크립트에서는 여전히 참조 중

 방지법 : DOM 요소 제거 시 관련 이벤트 리스너도 함께 제거

WeakMap과 WeakSet

 WeakMap과 WeakSet은 약한 참조를 사용하여 키(WeakMap의 경우)나 값(WeakSet의 경우)이 가비지 컬렉션의 대상이 될 수 있게 합니다.

let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, "data");
// obj = null; 로 설정하면 WeakMap의 항목도 가비지 컬렉션의 대상이 됨

 이들은 캐시나 큰 데이터 구조를 다룰 때 메모리 누수를 방지하는 데 유용합니다.

효율적인 메모리 관리 전략

  1. 불필요한 전역 변수 사용 피하기
  2. 큰 객체는 사용 후 즉시 null로 설정하여 참조 해제
  3. 이벤트 리스너 사용 후 명시적으로 제거
  4. 대량의 DOM 조작 시 DocumentFragment 사용
  5. 메모리 사용량이 큰 작업은 Web Worker 활용

메모리 프로파일링과 디버깅

 Chrome DevTools를 사용한 메모리 프로파일링

  1. Performance 탭에서 메모리 사용량 추적
  2. Memory 탭에서 힙 스냅샷 생성 및 비교
  3. Allocation instrumentation on timeline을 사용하여 시간에 따른 메모리 할당 추적

 메모리 누수 디버깅 팁

  • 주기적으로 힙 스냅샷을 찍어 비교
  • 의심되는 코드 실행 전후의 메모리 사용량 확인
  • 비정상적으로 크기가 증가하는 객체 찾기

성능 최적화와 메모리 관리

 메모리 관리는 애플리케이션의 성능과 직결됩니다.

 효율적인 메모리 관리를 통해 다음과 같은 이점을 얻을 수 있습니다.

  1. 더 빠른 응답 시간 : 가비지 컬렉션 주기가 줄어들어 애플리케이션의 반응성이 향상됩니다.
  2. 안정성 향상 : 메모리 누수로 인한 크래시나 성능 저하를 방지할 수 있습니다.
  3. 리소스 효율성 : 특히 모바일 환경에서 중요한 배터리 수명과 데이터 사용량을 최적화할 수 있습니다.

 실제 애플리케이션 개발 시 고려사항

  1. 데이터 구조 최적화 : 불필요한 중복을 피하고, 적절한 자료구조 선택
// 비효율적
let array = [1, 2, 3, 4, 5, ...]; // 많은 요소
 
// 효율적
let set = new Set([1, 2, 3, 4, 5, ...]); // 고유한 값들의 집합
  1. 지연 로딩 : 필요한 시점에 데이터나 모듈을 로드
// 필요할 때 동적으로 모듈 import
if (condition) {
  import('./heavyModule.js').then(module => {
    // 모듈 사용
  });
}
  1. 객체 풀링 : 자주 생성되고 삭제되는 객체의 경우, 객체 풀을 사용하여 재사용
class ObjectPool {
  constructor() {
    this.pool = [];
  }
  
  acquire() {
    return this.pool.pop() || new SomeObject();
  }
  
  release(obj) {
    this.pool.push(obj);
  }
}
  1. 가상화 : 대량의 데이터를 표시할 때, 화면에 보이는 부분만 렌더링
// 무한 스크롤 구현 시 가상화 기법 사용

 자바스크립트의 자동 메모리 관리는 개발자의 부담을 크게 줄여주지만, 효율적인 메모리 사용을 위해서는 여전히 개발자의 주의가 필요합니다. 가비지 컬렉션의 동작 원리를 이해하고, 잠재적인 메모리 누수 상황을 인지하며, 적절한 데이터 구조와 프로그래밍 패턴을 사용하는 것이 중요합니다.

 특히 대규모 애플리케이션이나 장기간 실행되는 애플리케이션(예: 단일 페이지 애플리케이션)에서는 메모리 관리가 더욱 중요해집니다. 정기적인 메모리 프로파일링과 성능 모니터링을 통해 잠재적인 문제를 조기에 발견하고 해결할 수 있습니다.

 결론적으로, 효과적인 메모리 관리는 고성능, 안정적인 자바스크립트 애플리케이션을 개발하는 데 필수적인 요소입니다. 이는 단순히 메모리 누수를 방지하는 것을 넘어, 전반적인 애플리케이션의 성능과 사용자 경험을 향상시키는 핵심 요소입니다.

이전으로다음으로