refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조
에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게 [공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류. 문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인). - Topic_Programming → Domain_Programming (내부 구조 보존) - Topic_Graphic → Domain_Design - Topic_Business → Domain_Product - Topic_General → Domain_General - _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning), Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing) - 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서) - 빈 폴더 정리 (memory/procedures) - 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,211 @@
|
||||
---
|
||||
id: wiki-2026-0508-memory-leak-prevention-메모리-누수-방지
|
||||
title: Memory Leak Prevention 메모리 누수 방지
|
||||
category: 10_Wiki/Topics
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [memory leak, JS leak, frontend memory leak]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [memory, leak, performance, javascript, frontend]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: JavaScript
|
||||
framework: Browser/Node
|
||||
---
|
||||
|
||||
# Memory Leak Prevention 메모리 누수 방지
|
||||
|
||||
## 매 한 줄
|
||||
> **"매 GC 가 있어도 reachable reference 는 free 안 됨 — leak 의 본질은 매 잊혀진 reference"**. SPA 의 long-lived session 에서 매 점진적 RAM 증가 → tab crash. 매 listener cleanup, closure escape, detached DOM, timer 가 4대 leak. 매 Chrome DevTools Memory + WeakRef 가 무기.
|
||||
|
||||
## 매 핵심
|
||||
|
||||
### 매 4대 leak 패턴
|
||||
- **Listener leak**: 매 `addEventListener` 후 `removeEventListener` 없음.
|
||||
- **Closure escape**: 매 long-lived obj 에 short-lived 의 reference 가 capture.
|
||||
- **Detached DOM**: 매 DOM remove 했지만 JS reference 가 살아있음.
|
||||
- **Timer leak**: 매 `setInterval` clear 안 함 → callback 의 closure 누적.
|
||||
|
||||
### 매 진단 도구
|
||||
- **Chrome DevTools → Memory → Heap snapshot**: 매 N times 비교 → growing object.
|
||||
- **Performance → Memory checkbox**: 매 timeline.
|
||||
- **`performance.memory` API**: 매 ad-hoc check.
|
||||
- **Node `--inspect` + `--expose-gc`**: 매 server-side.
|
||||
|
||||
### 매 응용
|
||||
1. SPA route change 마다 cleanup.
|
||||
2. React component unmount cleanup.
|
||||
3. WebGL / Three.js 의 `dispose()` 호출.
|
||||
4. Worker `postMessage` cycle 깨기.
|
||||
|
||||
## 💻 패턴
|
||||
|
||||
### Listener cleanup (vanilla)
|
||||
```javascript
|
||||
class Component {
|
||||
constructor(el) {
|
||||
this.el = el;
|
||||
this.onClick = this.onClick.bind(this);
|
||||
el.addEventListener("click", this.onClick);
|
||||
}
|
||||
destroy() {
|
||||
this.el.removeEventListener("click", this.onClick); // 매 필수
|
||||
this.el = null;
|
||||
}
|
||||
onClick() { /* ... */ }
|
||||
}
|
||||
```
|
||||
|
||||
### React useEffect cleanup
|
||||
```jsx
|
||||
useEffect(() => {
|
||||
const id = setInterval(tick, 1000);
|
||||
const ws = new WebSocket(url);
|
||||
ws.onmessage = handle;
|
||||
window.addEventListener("resize", onResize);
|
||||
|
||||
return () => {
|
||||
clearInterval(id);
|
||||
ws.close();
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
}, [url]);
|
||||
```
|
||||
|
||||
### AbortController (modern listener cleanup)
|
||||
```javascript
|
||||
const ac = new AbortController();
|
||||
window.addEventListener("scroll", onScroll, { signal: ac.signal });
|
||||
fetch(url, { signal: ac.signal });
|
||||
// 매 한 번에 모두 cancel + listener remove
|
||||
ac.abort();
|
||||
```
|
||||
|
||||
### Three.js dispose chain
|
||||
```javascript
|
||||
function disposeMesh(mesh) {
|
||||
mesh.geometry.dispose();
|
||||
if (Array.isArray(mesh.material)) {
|
||||
mesh.material.forEach((m) => disposeMaterial(m));
|
||||
} else {
|
||||
disposeMaterial(mesh.material);
|
||||
}
|
||||
scene.remove(mesh);
|
||||
}
|
||||
function disposeMaterial(m) {
|
||||
Object.values(m).forEach((v) => {
|
||||
if (v && v.isTexture) v.dispose();
|
||||
});
|
||||
m.dispose();
|
||||
}
|
||||
```
|
||||
|
||||
### WeakMap for metadata (no leak)
|
||||
```javascript
|
||||
// 매 strong Map 은 key 가 leak — WeakMap 은 GC 가능
|
||||
const meta = new WeakMap();
|
||||
function tag(node, info) {
|
||||
meta.set(node, info); // 매 node remove 시 자동 free
|
||||
}
|
||||
```
|
||||
|
||||
### WeakRef for cache
|
||||
```javascript
|
||||
class ImageCache {
|
||||
cache = new Map();
|
||||
get(url) {
|
||||
const ref = this.cache.get(url);
|
||||
const img = ref?.deref();
|
||||
if (img) return img;
|
||||
const fresh = new Image();
|
||||
fresh.src = url;
|
||||
this.cache.set(url, new WeakRef(fresh));
|
||||
return fresh;
|
||||
}
|
||||
}
|
||||
// 매 메모리 압박 시 GC 가 free
|
||||
```
|
||||
|
||||
### Detached DOM 진단
|
||||
```javascript
|
||||
// Chrome DevTools Memory → Filter "Detached"
|
||||
// 또는 코드로:
|
||||
function findDetached() {
|
||||
const nodes = [];
|
||||
const all = performance.memory; // (chrome only ad-hoc)
|
||||
// 매 heap snapshot 이 정확
|
||||
}
|
||||
// 매 React 의 stale ref 가 흔한 원인
|
||||
```
|
||||
|
||||
### Closure leak (and fix)
|
||||
```javascript
|
||||
// 매 BAD: 매 onClose 가 매 hugeBuffer 의 reference 유지
|
||||
function setup() {
|
||||
const hugeBuffer = new ArrayBuffer(100 * 1024 * 1024);
|
||||
const ws = new WebSocket(url);
|
||||
ws.onclose = () => console.log("closed", Date.now());
|
||||
// 매 onclose closure 가 entire scope capture → hugeBuffer leak
|
||||
}
|
||||
|
||||
// 매 GOOD
|
||||
function setup() {
|
||||
const hugeBuffer = new ArrayBuffer(100 * 1024 * 1024);
|
||||
process(hugeBuffer);
|
||||
const ws = new WebSocket(url);
|
||||
ws.onclose = onCloseStandalone; // 매 module-level fn
|
||||
}
|
||||
function onCloseStandalone() { console.log("closed", Date.now()); }
|
||||
```
|
||||
|
||||
### Heap diff workflow
|
||||
```
|
||||
1. Open DevTools → Memory → Heap snapshot (S1)
|
||||
2. 매 user action repeat 10 times
|
||||
3. Take snapshot (S2)
|
||||
4. Compare: S2 vs S1 → "Allocation" tab
|
||||
5. 매 N times grew by 10 → suspect
|
||||
6. Inspect retainer chain — 매 root 까지 추적
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 의심 | 첫 진단 |
|
||||
|---|---|
|
||||
| Slow degradation | 3-snapshot heap diff |
|
||||
| Sudden spike | timeline + allocation sampling |
|
||||
| Timer suspicion | `clearInterval` audit |
|
||||
| WebGL app | `renderer.info.memory` watch |
|
||||
| React | StrictMode + DevTools Profiler |
|
||||
|
||||
**기본값**: AbortController 로 listener, useEffect cleanup, WeakMap metadata, dispose() WebGL.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Garbage Collection]] · [[Performance Optimization]]
|
||||
- 변형: [[Detached DOM]]
|
||||
- Adjacent: [[WeakRef]] · [[AbortController]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: SPA leak 진단, useEffect cleanup 작성, dispose chain 설계.
|
||||
**언제 X**: 매 short-lived script — 매 overhead 정당화 X.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **No cleanup in useEffect**: 매 unmount 후 listener 살아있음.
|
||||
- **Strong Map for DOM metadata**: 매 WeakMap 사용.
|
||||
- **setInterval without ref**: 매 clear 불가능.
|
||||
- **Forgetting WebGL dispose**: 매 GPU memory leak — JS GC 가 도움 X.
|
||||
- **Global cache unbounded**: 매 LRU + size limit 또는 WeakRef.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (Chrome Developers "Fix memory problems", MDN, web.dev/memory-leaks).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — 4대 leak + 9 patterns + WeakRef/AbortController |
|
||||
Reference in New Issue
Block a user