AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

JavaScript 객체의 메모리 생명주기 이해

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

  • JavaScript 개발자, 특히 메모리 최적화, 성능 향상, 고급 디버깅에 관심 있는 중급 이상 개발자
  • 난이도: 중급 이상 (가비지 컬렉션, 메모리 누수, 객체 풀링 등 기술적 개념 포함)

핵심 요약

  • JavaScript 객체의 메모리 생명주기생성 -> 사용 -> 파괴로 구성되며, 스택 메모리(원시 값)와 힙 메모리(객체, 배열)를 통해 관리됨
  • 가비지 컬렉션(GC)은 마크-스윕 알고리즘을 기반으로, 참조 카운팅참조 불가능한 객체를 정리함
  • 메모리 누수 예방을 위한 전략: 전역 변수 최소화, WeakMap/WeakSet 사용, 객체 풀링, SPA 및 게임 개발 시 정리 함수 구현

섹션별 세부 요약

1. 객체 생성 방법

  • 객체 리터럴(Object Literal):

```javascript

const person = { name: "Jane Doe", age: 30 };

```

  • 직접적인 속성과 메서드 정의, 메모리 할당이 간단
  • 생성자 함수(Constructor Function):

```javascript

function Person(name, age) { this.name = name; }

const jane = new Person("Jane Doe", 30);

```

  • 프로토타입 공유로 메서드 공유 가능, 인스턴스별 속성은 별도 저장
  • ES6 클래스(Class Syntax):

```javascript

class Person { constructor(name, age) { this.name = name; } }

const jane = new Person("Jane Doe", 30);

```

  • ES6 이후 표준, 프로토타입 연결 이해 필수

2. 메모리 할당 전략

  • 스택 메모리:
  • 원시 값(숫자, 문자열) 저장, 고정 크기, 범위 제한
  • 예: 함수 매개변수는 스택에 저장
  • 힙 메모리:
  • 객체 및 배열 저장, 크기 유동적, 포인터로 참조
  • V8 엔진은 메모리 최적화 및 파편화 감소를 위해 복잡한 기법 사용

3. 객체 생명주기 단계

  1. 생성:
  • Object Literal, Constructor, Class 등 생성 방식에 따라 메모리 할당
  • 예: const user = { id: 1, name: 'Alice' };
  1. 사용:
  • 속성 추가/수정 가능, 메모리 동적 증가 유발

```javascript

user.age = 28; // 새 속성 추가

user.name = "Bob"; // 기존 속성 수정

```

  1. 파괴:
  • 참조가 없어지면 가비지 컬렉션에 의해 자동 해제

4. 가비지 컬렉션(이론 및 예시)

  • 마크:
  • 루트(전역 변수)부터 참조 가능한 객체를 탐색하여 마킹
  • 스윕:
  • 마커되지 않은 객체는 메모리에서 제거
  • 예시:

```javascript

let a = { name: "Alice" };

let b = a; // 참조 카운트 증가

a = null; // b의 참조 카운트 유지

b = null; // GC 대상 가능

```

5. 메모리 누수 예방 및 대응

  • 원인:
  • 전역 변수 유지, 불필요한 클로저, 순환 참조
  • 해결 방법:
  • WeakMap/WeakSet 사용:

```javascript

let weakMap = new WeakMap();

let obj1 = {};

weakMap.set(obj1, 'value');

obj1 = null; // GC 대상 가능

```

  • 객체 풀링(Object Pooling):
  • 빈번한 객체 생성/파괴 대신 미리 할당 및 재사용
  • SPA/게임 개발:
  • 컴포넌트/객체 정리 함수 사용 필수

6. 메모리 디버깅 도구 및 기법

  • Chrome DevTools:
  • 메모리 패널을 통해 스냅샷 분석, 분리된 DOM 노드 추적
  • 힙 프로파일링:
  • 힙 스냅샷 비교로 메모리 보유 상황 파악

결론

  • JavaScript 메모리 관리가비지 컬렉션, 객체 생성 방식, 메모리 누수 예방을 통해 최적화 가능
  • 실무 팁: WeakMap 사용, 전역 변수 최소화, SPA/게임에서 정리 함수 구현, Chrome DevTools 활용
  • 핵심 원칙: 메모리 할당/해제 과정을 명확히 이해하고, 객체 생명주기를 효율적으로 관리하여 성능 향상 및 안정성 확보