지연 로딩은 웹 애플리케이션에서 자원을 비동기적으로 로드하는 기능입니다. 이를 통해 사용자 경험을 향상시킬 수 있으며, 필요한 시점에만 자원을 로드하여 초기 로딩 속도를 개선할 수 있습니다. 이번 기사에서는 JavaScript의 Promise를 활용하여 지연 로딩 기능을 구현하는 방법을 알아보겠습니다.

Promise란?

Promise는 JavaScript 비동기 처리 패턴 중 하나로, 비동기 작업의 최종 완료 또는 실패 결과를 대표하는 객체입니다. Promise는 세 가지 상태를 가질 수 있습니다.

1. 대기(pending): 비동기 작업이 아직 완료되지 않은 상태입니다.
2. 이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태입니다.
3. 거부(rejected): 비동기 작업이 실패한 상태입니다.

Promise는 비동기 작업이 완료되면 이행 상태로 전환되거나 실패하면 거부 상태로 전환됩니다. 따라서 비동기 작업이 완료되거나 실패했을 때 콜백 함수를 호출하여 결과를 처리할 수 있습니다.

지연 로딩 기능 구현하기

다음은 Promise를 활용하여 지연 로딩 기능을 구현하는 예제 코드입니다. 이 예제에서는 이미지를 비동기적으로 로드하고, 로딩이 완료되면 화면에 이미지를 표시합니다.

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

const imageUrl = 'https://example.com/image.jpg';
loadImage(imageUrl)
  .then(img => {
    document.getElementById('imageContainer').appendChild(img);
  })
  .catch(error => {
    console.error(error);
  });

이 예제에서 loadImage 함수는 주어진 URL의 이미지를 비동기적으로 로드하는 Promise를 반환합니다. 이미지 로드가 성공하면 resolve를 호출하여 Promise를 이행시키고, 실패하면 reject를 호출하여 Promise를 거부합니다.

loadImage 함수를 호출하고 반환된 Promise에 대해 then을 호출하여 이미지 로드의 성공 콜백 함수를 등록합니다. 성공 콜백 함수 내에서는 이미지를 화면에 추가하고, 실패 시에는 catch를 호출하여 에러를 처리합니다.

결론

Promise는 JavaScript에 내장된 비동기 처리 패턴으로, 지연 로딩과 같은 비동기 작업을 처리하는 데 유용합니다. Promise를 이용하면 비동기 작업의 완료 또는 실패를 처리할 수 있고, 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다. 위에서 소개한 예제 코드를 참고하여 Promise를 활용한 지연 로딩 기능을 구현해 보세요.

#Promise #JavaScript