2025-10-22

1일 1아티클

요즘IT

JavaScript Garbage Collection

배경

• JavaScript : 가비지 컬렉터에 의해 메모리 자동 관리 (C언어에서는 free() 로 직접 해제해 줘야 한다)
• 개발자가 의도치 않게 참조를 남기거나, 불필요한 데이터를 잡고 있는 경우 → GC는 필요한 객체로 인식해 제거 X → 메모리 누수

메모리 누수 사례

1. 클로저
   • 함수가 외부 스코프의 변수 기억하도록 하는 기능
   • 필요없는 데이터를 계속 참조하고 있을 때 → GC가 해당 객체 해제 X
2. 이벤트 리스너
   • DOM 요소 제거 시, 이벤트 리스너 제거하지 않을 때 → 참조가 남게 됨
3. DOM 참조
   • DOM 요소를 전역 변수/캐시에 저장하고 해제하지 않을 때 → 참조 유지

디버깅 방법

1. Chrome DevTools의 Memory 탭
   • Heap snapshot : 현재 메모리 상태 스냅샷, 연결된 객체 내용 확인 가능
   • Allocation instrumentation : 시간 흐름에 따른 메모리 할당/해제 추적
   • Record Allocation Timeline : 객체의 생성 주기 추적, 원인 분석에 용이
2. 실무에서의 메모리 관리 팁
   • 이벤트 리스너 등록 시, 반드시 해제

     React에서는 useEffect의 cleanup(), Vue에서는 beforeUnmount 훅 활용하여 자동 관리

   • 전역 변수 최소화, 필요 시 지역 범위 내에서 데이터 관리하도록 구조화
   • 대규모 데이터를 담는 배열, Map 등은 사용 완료 시 반드시 null 할당 / clear() 로 참조 끊기
   • WeakMap, WeakSet 사용 시, 키 참조 안될 때 자동 GC 대상이므로 캐시 용도로 적합!!

오늘 배운 것

1. AI
   • RAG
   • LangChain

내일 할 일

1. AI

참고자료

• 실무자를 위한 자바스크립트 ‘가비지 컬렉션’ 가이드