[Javascript] 메모리 누수를 방지하는 방법

 

 

 

1. 메모리 누수란?

메모리 누수는 프로그램이 메모리를 사용하고 나서, 더 이상 필요하지 않은 메모리를 해제하지 않는 상황을 말한다. 일반적으로 프로그램이 동적으로 할당한 메모리를 제대로 해제하지 않을 때 발생한다. 메모리 누수는 프로그램의 성능에 부정적인 영향을 미치며, 장기적으로는 메모리 부족으로 인해 프로그램이 불안정해질 수 있게 한다.

 

 

2. Javascript에서 메모리 누수가 일어나는 사례

JavaScript에서 메모리 누수가 발생하는 여러 가지 케이스가 있는데 이를 방지하기 위해서는 코드를 작성하고 관리하는 방법에 주의 해야한다. 메모리 누수가 발생되는 여러 상황들은 아래와 같은 경우들이 있다. 

 

1) 참조가 계속 유지될 때

더 이상 필요하지 않은데도 객체나 변수에 대한 참조가 계속 유지되는 경우에 메모리 누수가 발생할 수 있다. 주로 이벤트 핸들러나 콜백 함수 등에서 발생한다.

비동기 작업에서 콜백 함수를 사용할 때, 콜백 함수가 클로저를 형성하여 외부 변수에 대한 참조를 유지하는 경우가 있는데 이 때, 콜백 함수가 계속해서 호출되거나 사용되지 않은 외부 변수를 참조하면 메모리 누수가 발생할 수 있다. 그렇기 때문에 필요한 경우에만 필요한 데이터에 대한 참조를 유지하고, 더 이상 필요하지 않은 데이터에 대해서는 제 때 참조를 해제해야한다.

이벤트 핸들러를 등록할 때, 등록한 이벤트 핸들러를 해제하지 않으면 메모리 누수가 발생할 수 있다. 특히, DOM 요소에 대한 이벤트 핸들러를 등록하고 해당 요소가 제거되지 않는 경우에는 이벤트 핸들러가 여전히 유지되어 메모리 누수가 발생할 수 있다. 이를 해결하기 위해서는 필요하지 않은 이벤트 핸들러를 적시에 제거하거나, 이벤트 위임을 사용하여 이벤트 핸들러를 최소화해야 한다.

 

2) 순환 참조

두 개 이상의 객체가 서로를 참조할 때, 메모리 누수가 발생할 수 있다. 이러한 상황에서는 더 이상 접근할 수 없는 객체들도 메모리에 남아 있게 되어 메모리 누수가 발생한다. 이러한 순환 참조가 발생하면 JavaScript 엔진은 이 객체들을 가비지 컬렉션의 대상으로 인식하지 않는다. 이를 해결하기 위해서는 순환 참조를 만들지 않거나, 순환 참조가 필요한 경우에는 적절한 시점에 참조를 제거해야 한다.

 

3) 리소스 누수

파일 핸들이나 네트워크 연결과 같은 외부 리소스를 해제하지 않는 경우에도 메모리 누수가 발생할 수 있다.

 

메모리 누수를 방지하려면 프로그램이 할당한 메모리를 사용한 후에는 적절하게 메모리를 해제해야 한다. 이를 위해 메모리 관리에 주의를 기울이고, 적절한 시점에 리소스를 해제하고 참조를 제거하는 것이 중요하다. 또한, 코드를 검토하고 메모리 누수를 일으킬 수 있는 패턴을 피하는 것도 중요하다.

 

 

https://ui.toast.com/posts/ko_20210611

당신이 모르는 자바스크립트의 메모리 누수의 비밀

 

https://yceffort.kr/2020/07/memory-leaks-in-javascript

자바스크립트 메모리 누수와 해결 방법

 

https://mong-blog.tistory.com/entry/JS%EC%97%90%EC%84%9C-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98%EB%8A%94-%EC%99%9C-%EB%B0%9C%EC%83%9D%ED%95%A0%EA%B9%8Cfeat-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EC%B8%A1%EC%A0%95%EB%B2%95#google_vignette

[JS] 메모리 누수는 왜 발생할까?(feat. 메모리 측정법)