메모리 누수는 프론트엔드에서 어떤 형태로 나타날 수 있나요?

프론트엔드 메모리 누수는 이벤트 리스너, 타이머, 구독, 캐시, 분리된 DOM 참조가 해제되지 않을 때 발생할 수 있습니다. 페이지를 오래 사용할수록 메모리가 증가하고 렌더링이 느려지며, cleanup 함수와 참조 해제를 통해 방지해야 합니다.

핵심 개념

핵심 기준은 언마운트 후에도 남은 참조와 구독 제거입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

컴포넌트가 사라진 뒤에도 참조가 남는 상황을 떠올려보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

컴포넌트가 mount될 때 window resize 리스너를 추가하고 unmount 때 제거하지 않으면 페이지 이동 후에도 리스너가 계속 쌓입니다.

실무에서 적용하는 방법

useEffect cleanup에서 removeEventListener, clearInterval, unsubscribe를 수행합니다.

실무에서 주의할 점

• 개발자도구 heap snapshot과 performance monitor로 증가 패턴을 확인할 수 있습니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

성능, 메모리누수, 프론트엔드, Cleanup

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, 프론트엔드 메모리 누수는 이벤트 리스너, 타이머, 구독, 캐시, 분리된 DOM 참조가 해제되지 않을 때 발생할 수 있습니다입니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.