자바스크립트는 가비지 컬렉터를 통해 메모리를 관리합니다. 하지만, 가끔씩 메모리 누수가 발생할 수 있습니다. 특히 이미지 로딩과 관련된 작업에서 메모리 누수가 발생할 확률이 높습니다. 이번 블로그에서는 자바스크립트의 약한 참조(Weak Reference)와 이미지 로딩 기법에 대해 알아보겠습니다.

약한 참조 (Weak Reference)

일반적으로 자바스크립트에서 객체는 강한 참조(Strong Reference)로 유지됩니다. 즉, 객체를 참조하는 변수가 있다면 가비지 컬렉터는 해당 객체를 메모리에서 제거하지 않습니다. 이는 메모리 누수를 야기할 수 있는데, 특히 객체를 캐시로 사용할 때 주의가 필요합니다.

약한 참조는 객체를 참조하는 변수가 없을 때에만 해당 객체를 메모리에서 제거합니다. 이를 위해서 WeakRef 클래스를 사용할 수 있습니다.

let obj = {name: "John"};
let weakRef = new WeakRef(obj);

// obj 변수가 참조를 유지하고 있음
console.log(obj); // {name: "John"}

// obj 변수를 초기화하면 weakRef는 메모리에서 제거됨
obj = null;
console.log(weakRef.deref()); // undefined

약한 참조는 메모리 누수를 방지하기 위해 사용되는 강력한 도구입니다.

이미지 로딩 기법

이미지 로딩은 웹 애플리케이션에서 주로 사용되는 기능 중 하나입니다. 그러나 이미지 로딩은 메모리 누수의 주범이 될 수 있습니다. 예를 들어, 웹 페이지에서 동적으로 이미지를 변경하는 경우, 기존 이미지는 메모리에서 제대로 해제되지 않는 문제가 발생할 수 있습니다.

이를 해결하기 위해 이미지를 로딩하는 동안 약한 참조를 사용하여 메모리 누수를 방지할 수 있습니다.

const imageCache = new WeakMap();

function loadImage(url) {
  if (imageCache.has(url)) {
    return Promise.resolve(imageCache.get(url));
  }

  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;

    img.onload = () => {
      imageCache.set(url, img);
      resolve(img);
    };

    img.onerror = (error) => {
      reject(error);
    };
  });
}

위의 코드는 이미지를 로딩하는 동안 약한 참조를 사용하여 이미지를 캐싱합니다. 이미지가 로딩되기 전에 이미지 URL을 이미지 캐시에 저장하여, 동일한 이미지를 다시 로드할 때 이미지를 캐시에서 가져옵니다. 이미지 로딩이 완료되면 해당 이미지를 약한 참조를 통해 저장하고, 다시 로드할 때 메모리 누수 없이 사용할 수 있습니다.

마무리

자바스크립트에서 메모리 관리는 중요한 주제입니다. 약한 참조와 이미지 로딩 기법을 사용하여 메모리 누수를 방지할 수 있습니다. 이를 통해 웹 애플리케이션의 성능과 안정성을 향상시킬 수 있습니다.

더 자세한 정보를 원하신다면 아래의 참고자료를 참고해주세요.

• MDN - WeakRef