[🚜] Out of Memory 발생 이유와 해결 방법

회사에서 작업을 하던 중, 새로고침 하면 간헐적으로 Out of Memory 메세지가 나타나는 현상이 발생했다.

퍼블리싱 작업 중인데 이런 메세지가 계속 뜨니까 이상해서 원인과 해결법에 대해 알아보았다.

🤔 발생 이유

일반적으로 메모리가 부족할 때 발생한다.

1. 무한 루프 또는 재귀 호출: 이는 메모리를 빠르게 소모하기 때문에, 전체적인 코드를 검토하여 무한 루프 또는 재귀 호출이 있는지 확인해야 한다.

2. 대량의 데이터 처리: 대량의 데이터를 한 번에 처리하려고 하면 메모리 부족 오류가 발생할 수 있다. 데이터를 작은 단위로 나누어 처리하거나, 필요하지 않은 데이터를 메모리에서 해제해야 한다.

3. 메모리 누수: 사용하지 않는 메모리가 해제되지 않아 시간이 지남에 따라 점차 메모리가 부족해지는 현상으로 메모리 관리 개선 필요하다.

4. 브라우저 또는 환경의 메모리 제한: 일부 브라우저 또는 환경에서는 메모리 사용에 제한을 두고 있을 수도 있다. 애플리케이션의 메모리 사용량을 줄이거나, 제한을 늘리는 방법 찾아야 한다.

😊 해결 방법 (feat. Vue.js)

1. 이벤트 리스너 해제: 컴포넌트 파괴될 때 이벤트 리스너를 해제 시켜준다.
beforeUnmonet 또는 unmonted 라이프사이클 훅에서 removeEventListener 호출을 통해 리스너를 해제한다.

2. 타이머 해제: setTimeout 또는 setInterval을 사용한 경우, 컴포넌트 파괴될 때 타이머를 해제해야 함. 이를 위해 clearTimeout 또는 clearInterval을 호출해야 한다.
(vue.js에서는 beforeUnmount 라이프사이클 훅에서 clearTimeout을 호출하여 타이머를 해제)

타이머를 해제하지 않으면 해당 타이머는 계속 실행되어 메모리를 점유하게 됩니다. 이는 페이지의 성능을 저하시키고, 최악의 경우 "Out of memory" 오류를 발생시킬 수 있다.

💡Tip

setTimeout과 같은 타이머 함수는 브라우저의 이벤트 루프에 의해 관리되며, 페이지를 이동하더라도 해당 타이머가 설정된 페이지의 컨텍스트에서 계속 실행됩니다. 이는 자바스크립트가 싱글 스레드로 동작하며, 비동기적으로 이벤트를 처리하는 특성 때문입니다.

3. Reactive 객체 참조 해제: vue 반응형 시스템은 메모리 누수를 일으킬 수 있으므로, 컴포넌트 파괴 시 컴포넌트를 해제해야 한다.

4. 메모리 관리 도구 사용: 브라우저 개발자 도구를 통해 메모리 누수 감지 및 디버깅 가능하다.
크롬 > 메모리 탭 > Heap snapshot을 캡쳐하여 메모리 사용량을 분석할 수 있다.

그래서 바로 전체 검색을 통해 우선적으로 이벤트 리스터가 얼만큼 어떻게 사용되고 있는가를 살펴 보았다. 몇몇개의 이벤트 리스너를 발견했고 추가적으로 Observer에서도 중단 처리를 해 줘야한다는 동료의 팁을 받았다.

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // ...
            observer.unobserve(entry.target);
        }
    });
});

// 관찰을 시작
observer.observe(element);

// 나중에 모든 관찰을 중단
observer.disconnect();