[javascript] 자바스크립트의 메모리 누수 방지

05 Dec 2023

javascript

자바스크립트는 동적인 언어로, 개발자가 명시적으로 메모리를 관리하지 않아도 자동으로 관리됩니다. 하지만 실수로 메모리를 제대로 해제하지 않으면 메모리 누수가 발생할 수 있습니다. 이러한 메모리 누수는 애플리케이션의 성능이 저하되거나 충돌을 일으킬 수 있습니다. 자바스크립트에서 메모리 누수를 방지하는 몇 가지 방법을 살펴보겠습니다.

1. 변수와 객체의 해제

사용하지 않는 변수나 객체에 대해 null 값을 할당하여 메모리를 명시적으로 해제할 수 있습니다. 이렇게 하면 가비지 컬렉터가 해당 메모리를 빠르게 회수할 수 있습니다.

let unusedVariable = "Hello";
unusedVariable = null;

2. 이벤트 리스너 제거

이벤트 리스너는 웹 애플리케이션에서 중요한 역할을 합니다. 하지만 이벤트 리스너를 등록한 후에는 제거하지 않으면 메모리 누수가 발생할 수 있습니다. 이벤트 리스너를 제거하지 않을 경우 해당 DOM 요소가 계속해서 메모리를 점유하게 되므로, 필요 없어진 이벤트 리스너는 꼭 제거해야 합니다.

const button = document.getElementById("myButton");

const handleClick = () => {
  console.log("Button clicked");
};

button.addEventListener("click", handleClick);

// 이벤트 리스너 제거
button.removeEventListener("click", handleClick);

3. setInterval() 및 setTimeout() 핸들링

setInterval() 또는 setTimeout() 함수로 생성한 타이머는 필요하지 않을 때 적절히 제거해야 합니다. 제거하지 않을 경우 함수가 계속해서 실행되기 때문에 메모리 누수가 발생할 수 있습니다.

let timer;

const startTimer = () => {
  timer = setInterval(() => {
    console.log("Timer running");
  }, 1000);
};

const stopTimer = () => {
  clearInterval(timer);
};

4. 큰 데이터나 리소스 사용 후 해제

큰 데이터나 리소스를 사용하는 경우, 사용 후에는 명시적으로 해제해 주어야 합니다. 예를 들어, FileReader API로 파일을 읽은 후에는 reader.abort() 메소드를 이용하여 파일 리소스를 해제해야 합니다.

const fileInput = document.getElementById("myFileInput");

const handleFile = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    // 파일 데이터 처리
  };

  reader.readAsText(file);

  // 파일 리소스 해제
  reader.abort();
};

마무리

메모리 누수는 자바스크립트 애플리케이션의 성능과 안정성에 영향을 미칠 수 있습니다. 따라서 개발자는 메모리 누수를 방지하기 위해 명시적으로 해제되지 않은 메모리를 관리해야 합니다. 위에서 언급한 방법을 사용하여 메모리 누수를 방지하고, 좀 더 효율적인 자바스크립트 코드를 작성할 수 있습니다.

참고 문서:

MDN Web Docs - Managing browser memory