웹 애플리케이션을 개발하다 보면 점점 느려지는 경험을 해본 적이 있을 것이다. 새로고침하면 괜찮아지지만, 시간이 지날수록 다시 버벅거리기 시작한다. 이런 현상의 주범은 바로 **메모리 누수(Memory Leak)**다. Chrome DevTools의 Memory Profiler는 이런 메모리 문제를 찾아내고 해결할 수 있게 도와주는 강력한 도구다.

1. Memory Profiler가 필요한 이유

1-1) 메모리 누수란 무엇인가

메모리 누수를 쉽게 비유하자면, 집에서 쓰레기를 버리지 않고 계속 쌓아두는 것과 같다. 처음에는 공간이 넉넉해서 괜찮지만, 시간이 지날수록 점점 발 디딜 곳이 없어진다. 웹 애플리케이션도 마찬가지다. 더 이상 필요하지 않은 객체나 DOM 노드가 메모리에 계속 남아있으면, 사용 가능한 메모리가 점점 줄어들고 결국 브라우저가 느려지거나 멈추게 된다.

JavaScript는 가비지 컬렉션(Garbage Collection)이라는 자동 메모리 관리 시스템을 가지고 있다. 이것은 더 이상 참조되지 않는 객체를 자동으로 정리해준다. 하지만 개발자가 의도치 않게 객체에 대한 참조를 유지하고 있으면, 가비지 컬렉터는 그 객체를 "아직 필요한 것"으로 판단하고 정리하지 않는다. 이것이 바로 메모리 누수의 핵심 원인이다.

1-2) 메모리 문제의 증상

사용자는 다음과 같은 방식으로 메모리 문제를 체감한다:

• 점진적 성능 저하: 페이지를 오래 사용할수록 점점 느려진다
• 일시적인 멈춤: 페이지가 주기적으로 얼어붙는 현상 (가비지 컬렉션 발생)
• 시각적 성능 저하: 애니메이션이 버벅거리거나 입력 지연이 발생

React, Vue 같은 SPA(Single Page Application) 프레임워크를 사용하면 페이지를 새로고침하지 않고 오랜 시간 사용하기 때문에, 메모리 누수 문제가 더욱 치명적이다. 특히 대시보드나 관리자 페이지처럼 하루 종일 켜놓고 사용하는 애플리케이션에서는 메모리 관리가 필수적이다.

2. Memory Profiler 개요

2-1) Memory 패널 열기

Chrome DevTools의 Memory 패널은 F12 또는 우클릭 → 검사로 개발자 도구를 연 후, 상단 탭에서 Memory를 선택하면 된다. 만약 Memory 탭이 보이지 않는다면, >> 아이콘을 클릭해서 More tools → Memory를 선택하면 된다.

2-2) 프로파일링 타입

Memory 패널에서는 크게 세 가지 프로파일링 타입을 제공한다:

1. Heap snapshot (힙 스냅샷)