본문 바로가기
Q&A2022년 5월 23일1분 읽기

JavaScript에서 메모리 관리 주의사항

한
한동욱
조회 850댓글 1

JavaScript도 메모리 관리를 신경 써야 하나요? 가비지 컬렉터가 자동으로 해주는 거 아닌가요?

댓글 1

김김영삼4년 전

GC가 자동이지만 메모리 누수는 발생합니다. GC가 해제 못하는 경우:

흔한 메모리 누수 패턴:

// 1. 전역 변수 축적
window.cache = []; // 계속 쌓임

// 2. 이벤트 리스너 미해제
element.addEventListener("click", handler);
// element가 DOM에서 제거돼도 handler가 참조 유지

// 3. setInterval 미정리
const id = setInterval(() => { /* ... */ }, 1000);
// clearInterval(id) 안 하면 영원히 실행

// 4. 클로저가 큰 객체 참조
function outer() {
const hugeData = new Array(1000000);
return function inner() {
// hugeData를 참조하지 않아도 스코프에 존재
};
}

디버깅: Chrome DevTools → Memory → Heap Snapshot 비교

SPA에서 페이지 이동 시 이벤트 리스너와 타이머를 정리하는 것이 중요합니다.

Ctrl+Enter로 등록