# [[Memory Leak]]

## 📌 Brief Summary
메모리 누수(Memory Leak)란 애플리케이션이 메모리를 할당한 후 더 이상 필요하지 않음에도 불구하고 이를 해제하지 않아 메모리에 계속 축적되는 현상이다 [1]. 자바스크립트의 가비지 컬렉터(Garbage Collector)는 사용하지 않는 메모리를 자동으로 회수하지만, 변수 등에 참조가 남아있을 경우 이를 회수할 수 없어 누수가 발생한다 [1]. 이로 인해 애플리케이션을 장시간 사용할수록 메모리 사용량이 점진적으로 증가하며, 성능 저하, 탭의 멈춤 현상, 심각한 경우 앱 충돌(Crash)을 유발하게 된다 [2-4].

## 📖 Core Content
*   **발생 메커니즘과 주요 원인 패턴**
    자바스크립트 및 React 애플리케이션에서 메모리 누수는 주로 불필요하게 남아있는 참조(Reference) 때문에 발생한다 [1]. 
    대표적인 패턴은 다음과 같다.
    *   **분리된 DOM 노드(Detached DOM Nodes):** DOM 트리에서는 제거되었으나, 자바스크립트 코드 내의 변수 등에서 여전히 해당 노드를 참조하고 있어 가비지 컬렉션이 불가능한 경우이다 [5, 6].
    *   **이벤트 리스너 누적(Event Listener Accumulation):** 컴포넌트가 언마운트(Unmount)될 때 등록되었던 이벤트 리스너를 적절히 해제하지 않으면 메모리에 계속 쌓이게 된다 [6]. React의 경우 `useEffect` 내에서 구독(Subscription)이나 리스너를 생성한 뒤 정리(Cleanup) 함수를 반환하지 않을 때 빈번하게 발생한다 [7-9].
    *   **클로저를 통한 참조 유지(Closure-Retained References):** 자바스크립트 클로저가 부모 스코프의 변수를 계속 살려두어, 불필요하게 거대한 객체가 메모리를 차지하게 만들 수 있다 [10].

*   **진단 및 분석 방법**
    메모리 누수를 파악하기 위해 Chrome DevTools의 Memory 패널을 핵심적으로 사용할 수 있다 [11].
    *   **힙 스냅샷(Heap Snapshots):** 특정 시점의 메모리 상태를 촬영하여 비교(Comparison view)할 수 있다. 두 스냅샷 사이에서 꾸준히 양수 델타(Delta) 값을 갖는 객체를 찾아 누수를 판별하며, 'Detached'로 검색하여 분리된 DOM 트리를 찾아낸다 [11, 12]. 객체를 선택한 후 'Retainers' 패널을 통해 어떤 참조가 해당 객체를 메모리에 붙잡고 있는지 추적할 수 있다 [10, 13].
    *   **할당 타임라인(Allocation Timelines):** 애플리케이션과 상호작용할 때 실시간으로 메모리 할당 패턴을 확인한다. 파란색 막대로 표시된 할당 내역이 가비지 컬렉션 후에도 회색으로 변하지 않고 영구적으로 남는다면 누수로 의심할 수 있다 [14-16].
    *   **성능 모니터링:** Chrome 작업 관리자(Task Manager)나 Performance 패널을 통해 자바스크립트 힙(JS heap) 크기나 노드 개수가 작업 이후에도 이전보다 증가된 상태로 끝나는지 확인한다 [17-19].

*   **해결 및 예방 전략**
    메모리 누수를 해결하기 위해 분리된 객체나 노드를 참조하는 자바스크립트 변수를 찾아, 해당 참조가 더 이상 필요 없을 때 제거해야 한다 [13]. 객체 기반의 캐시를 구현할 때는 가비지 컬렉션을 방해하지 않는 `WeakMap`을 사용하는 것이 권장된다 [9]. React 프레임워크에서는 `useEffect` 훅에서 정리(cleanup) 함수를 반환하거나 이벤트 리스너를 올바르게 해제하는 패턴을 반드시 지켜야 하며, CI 파이프라인에서 Puppeteer 등을 활용하여 자동화된 메모리 테스트를 구축하는 것으로 사전에 방지할 수 있다 [7, 9].

## ⚖️ Trade-offs & Caveats
소스에 관련 정보가 부족합니다.

## 🔗 Knowledge Connections

### Related Concepts

#### [발생 원인 및 증상 (Causes & Phenomena)]
- [[Detached DOM Nodes]]
  - 연결 이유: 자바스크립트 프론트엔드 환경에서 메모리 누수를 발생시키는 가장 흔하고 주요한 원인 중 하나로 상세하게 다뤄진다 [5, 6].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: HTML 문서의 DOM 트리에서는 제거되었으나, 자바스크립트 메모리 상에는 데이터가 묶여 있는 상태를 파악하여 컴포넌트 해제 시 참조 관리의 중요성을 이해할 수 있다 [5, 13].

- [[Closure-Retained References]]
  - 연결 이유: 자바스크립트의 언어적 특성인 클로저가 어떻게 메모리를 해제하지 못하게 막는지 설명하는 원인 패턴이다 [10].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 스코프 체인으로 인해 필요 이상으로 큰 객체나 데이터가 가비지 컬렉터로부터 살아남는 구조적 누수 현상을 분석할 수 있다 [10].

#### [진단 및 구현 도구 (Diagnostics & Tools)]
- [[Chrome DevTools Memory Profiler]]
  - 연결 이유: 힙 스냅샷(Heap snapshot)과 할당 타임라인(Allocation Timeline) 등 메모리 누수를 직접적으로 찾아내고 디버깅하는 핵심 도구이다 [11, 16].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 객체 간의 참조 경로(Retainer Path)를 추적하고, 증가하는 메모리의 근본 원인이 되는 자바스크립트 변수를 시각적으로 찾아내는 기법을 습득할 수 있다 [10, 12, 15].

- [[useEffect Cleanup]]
  - 연결 이유: React 애플리케이션에서 구독이나 이벤트를 관리할 때 누수를 예방하기 위해 프레임워크 차원에서 필수적으로 요구되는 해결 패턴이다 [7-9].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 함수형 컴포넌트의 생명주기와 부수 효과(Side effect) 관리 원리를 이해하고, 리소스 누출을 막는 안전한 코딩 방식을 익힐 수 있다 [7, 9].

- [[WeakMap]]
  - 연결 이유: 메모리 누수 방지 전략으로 객체 캐시 구조를 설계할 때 사용하도록 직접적으로 권장되는 자바스크립트 내장 객체이다 [9].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 객체에 대한 강한 참조(Strong Reference)를 만들지 않아 가비지 컬렉터가 원활하게 작동하도록 돕는 메모리 최적화 자료구조의 원리를 배울 수 있다 [9].

### Deeper Research Questions

- 자바스크립트 가비지 컬렉터(Garbage Collector)의 참조 카운팅(Reference Counting)과 표시-쓸기(Mark-and-Sweep) 알고리즘은 각각 어떤 조건 하에 메모리 해제 가능성을 판단하는가?
- 부모 컴포넌트가 언마운트될 때, 자식 컴포넌트 내부의 클로저(Closure)가 부모 스코프의 상태를 캡처하고 있을 경우 정확히 어떤 경로를 통해 메모리 릭이 발생하는가?
- 일반적인 `Object` 혹은 `Map`을 사용한 상태 데이터 캐싱과 `WeakMap`을 사용한 캐싱 간의 가비지 컬렉션 타이밍과 런타임 성능 차이는 어떠한가?
- Chrome DevTools의 Retainer 패널에서 표시되는 'Distance from GC root'가 디버깅 과정에서 갖는 의미는 무엇이며, 참조 트리를 역추적할 때 이를 어떻게 해석해야 하는가?
- Puppeteer를 활용한 자동화된 메모리 테스트(Automated Memory Testing) 환경을 CI/CD에 구축할 때, 테스트 실패(누수 발생)를 판정하기 위한 적절한 메모리 증가 임계값(Threshold)은 어떻게 설정하는가?

### Practical Application Contexts

- **Implementation:** React 컴포넌트를 작성할 때, `useEffect` 안에서 이벤트 리스너를 추가하거나 외부 데이터를 구독한 경우, 반드시 해당 리스너나 구독을 취소하는 함수를 반환(return)하여 메모리가 회수될 수 있게 코드를 구현해야 한다 [7, 9].
- **System Design:** 방대한 양의 데이터를 임시로 캐싱하거나 DOM 요소와 메타데이터를 매핑해야 하는 시스템을 설계할 경우, 일반 객체가 아닌 `WeakMap`을 도입하여 캐시가 가비지 컬렉션을 방해하지 않도록 아키텍처를 구성해야 한다 [9].
- **Operation / Maintenance:** 프로덕션에 배포된 애플리케이션에서 시간이 지날수록 앱이 버벅이거나 크래시가 발생한다는 사용자 보고가 있다면, 즉시 Chrome DevTools의 Memory 패널을 켜서 Heap Snapshot의 Comparison 뷰를 이용해 양수의 델타 값을 가진 객체를 추적해야 한다 [4, 11].
- **Learning Path:** 자바스크립트 기반 앱의 성능 튜닝을 학습할 때 렌더링 최적화를 넘어서, "가비지 컬렉션의 이해 -> Detached DOM과 클로저 누수 패턴 파악 -> DevTools를 활용한 프로파일링" 순으로 메모리 관리 기법을 익히는 학습 경로를 설정할 수 있다 [1, 5, 11].
- **My Project Relevance:** 현재 유지보수 중인 SPA 프로젝트에 복잡한 라우팅과 무거운 위젯이 포함되어 있다면, 라우트 이동 후에도 이전 페이지의 데이터가 메모리에 남아있는지 확인하기 위해 할당 타임라인(Allocation Timeline) 분석과 이벤트 리스너 제거 여부를 점검하는 데 적용할 수 있다 [6, 14].

### Adjacent Topics

- [[Garbage Collection in JavaScript]]
  - 확장 방향: 자바스크립트 엔진 내부에서 도달 가능성(Reachability)을 기준으로 객체를 어떻게 수집하고 관리하는지에 대한 기반 지식 방향으로 확장.
- [[React Hooks Lifecycle]]
  - 확장 방향: 메모리 해제의 시점이 되는 `useEffect`의 정리(Cleanup) 동작을 정확히 이해하기 위해, 컴포넌트의 마운트, 업데이트, 언마운트 생명주기와 의존성 배열의 동작 원리 탐구.
- [[Web Performance Optimization]]
  - 확장 방향: 메모리 누수 외에도 불필요한 리렌더링 방지, 코드 스플리팅, 번들 사이즈 축소 등 프론트엔드 전반의 성능 최적화 및 사용자 경험(UX) 개선 기법으로 확장.

---
*Last updated: 2026-04-30*