자바스크립트에서 메모리 누수가 발생하는 상황들을 설명해주세요.
분야: 프론트엔드
메모리 누수는 개발자가 의도치 않게 참조를 유지하는 경우에 발생합니다.
먼저, 가장 흔한 메모리 누수 원인 중 하나는 이벤트 리스너를 해제하지 않는 경우입니다. 예를 들어, 특정 DOM 요소에 이벤트 리스너를 등록한 후 해당 요소를 제거할 때, 이벤트 리스너를 명시적으로 제거하지 않으면 해당 요소에 대한 참조가 유지되어 메모리가 해제되지 않습니다. 이를 방지하기 위해서는 removeEventListener()를 호출해 불필요한 이벤트 리스너를 제거해야 합니다.
다음으로, 클로저를 잘못 사용하는 경우에도 메모리 누수가 발생할 수 있습니다. 클로저는 내부 함수가 외부 함수의 변수를 참조할 수 있도록 해주는 유용한 기능이지만, 특정 변수나 DOM 요소를 참조하는 클로저가 계속 유지되면 가비지 컬렉터가 해당 메모리를 회수하지 못하게 됩니다.
또한, 전역 변수를 과도하게 사용하는 경우에도 메모리 누수를 발생할 수 있습니다. 전역 객체(window)에 저장된 변수는 애플리케이션이 종료될 때까지 유지되므로, 필요하지 않은 데이터를 전역 변수로 선언하면 메모리 누수가 발생하게 됩니다. 따라서 전역 범위를 최소화하고, 필요한 경우 즉시 실행 함수나 모듈 패턴을 활용해 변수를 적절히 관리하는 것이 중요합니다.
자바스크립트에서 메모리 사용량을 모니터링하는 방법이 있나요? 🤔
크롬 개발자 도구에서 제공하는 Memory 탭을 활용하면 메모리 사용량을 쉽게 확인할 수 있습니다. 'Heap snapshot' 기능을 이용하면 현재 힙 메모리에 어떤 객체들이 존재하는지 파악할 수 있습니다. 또한, 'Allocations on timeline' 기능을 통해 시간에 따른 메모리 할당 및 해제 상태를 실시간으로 확인할 수도 있습니다.