Promise를 이용한 이미지 렌더링 최적화 방법

13 Sep 2023

Promise

이미지 렌더링은 웹 개발에서 중요한 요소 중 하나입니다. 이미지를 최적화하면 웹 페이지의 로딩 속도를 향상시킬 수 있습니다. 이번 글에서는 Promise를 이용하여 이미지 렌더링을 최적화하는 방법에 대해 알아보겠습니다.

1. 이미지 로딩을 Promise로 감싸기

이미지 로딩은 일반적으로 비동기 작업이기 때문에 Promise를 이용하여 비동기적인 처리를 할 수 있습니다. Promise는 비동기 작업의 성공 또는 실패를 처리하기 위한 객체입니다. 이미지 로딩을 Promise로 감싸면 다음과 같이 코드를 작성할 수 있습니다.

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error(`Failed to load image from ${url}`));
    image.src = url;
  });
}

loadImage('example.jpg')
  .then(image => {
    // 이미지 로딩이 완료된 후에 실행되는 로직
    console.log('이미지 로딩 완료');
  })
  .catch(error => {
    // 이미지 로딩이 실패한 경우 실행되는 로직
    console.error(error);
  });

위 코드에서 loadImage 함수는 이미지의 URL을 파라미터로 받아서 Promise 객체를 반환합니다. Promise 객체는 이미지 로딩이 완료되면 resolve 콜백을 호출하고, 이미지 로딩에 실패하면 reject 콜백을 호출합니다.

2. 병렬 이미지 로딩하기

여러 개의 이미지를 동시에 로딩해야 하는 경우에는 Promise.all 메서드를 사용하여 병렬로 이미지를 로딩할 수 있습니다. 다음은 병렬 이미지 로딩 예제 코드입니다.

const imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

const loadImagePromises = imageUrls.map(url => loadImage(url));

Promise.all(loadImagePromises)
  .then(images => {
    // 모든 이미지 로딩이 완료된 후에 실행되는 로직
    console.log('모든 이미지 로딩 완료');
    images.forEach(image => {
      // 이미지를 화면에 렌더링하는 로직
      document.body.appendChild(image);
    });
  })
  .catch(error => {
    // 하나라도 이미지 로딩에 실패한 경우 실행되는 로직
    console.error(error);
  });

위 코드에서 imageUrls 배열에 이미지 URL을 담고, loadImage 함수를 호출하여 Promise 객체들의 배열을 생성합니다. Promise.all 메서드를 사용하여 배열 내의 모든 Promise 객체들이 완료될 때까지 기다린 후 결과를 반환합니다.

마무리

Promise를 이용하여 이미지 렌더링을 최적화할 수 있습니다. 이미지 로딩을 Promise로 감싸서 비동기 작업을 처리하고, 병렬 이미지 로딩을 위해 Promise.all 메서드를 사용할 수 있습니다. 이를 통해 웹 페이지의 로딩 속도를 향상시킬 수 있고, 사용자 경험을 개선할 수 있습니다.

#webdevelopment #promises