자바스크립트 fetch API를 사용하여 이미지 가져오기

10 Sep 2023

javascript

이미지를 웹 페이지에 동적으로 가져오는 방법은 웹 개발에서 흔히 사용되는 작업입니다. 자바스크립트 fetch API를 사용하면 간편하고 효율적으로 이미지를 가져올 수 있습니다. 이 글에서는 fetch API를 사용하여 이미지를 가져오는 방법을 알아보겠습니다.

fetch API란?

fetch()는 자바스크립트의 내장된 함수로, 서버로 HTTP 요청을 보내고 응답을 가져오는 기능을 제공합니다. 이를 통해 웹 페이지에서 데이터를 가져올 수 있으며, 이미지 역시 가져올 수 있습니다.

이미지 가져오기

먼저, 가져올 이미지의 URL을 알아야 합니다. 여기서는 예시로 Unsplash에서 제공하는 무료 이미지를 사용하도록 하겠습니다.

fetch('https://source.unsplash.com/random')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(blob => {
    const imgElement = document.createElement('img');
    imgElement.src = URL.createObjectURL(blob);
    document.body.appendChild(imgElement);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위의 코드에서는 fetch() 함수를 사용하여 이미지를 가져온 후, 응답으로부터 Blob 객체를 추출합니다. 그리고 Blob 객체를 사용하여 이미지 태그를 동적으로 생성하고, 이미지 태그의 src 속성을 Blob 객체의 URL로 설정합니다. 마지막으로, 웹 페이지의 body에 해당 이미지 태그를 추가합니다.

해당 코드를 실행하면 무작위 이미지가 웹 페이지에 표시됩니다.

주의사항

fetch() 함수는 AJAX 또는 XMLHttpRequest와 달리, HTTP 오류 응답을 자동으로 감지하지 않습니다. 따라서 .then() 체인 내부에서 응답 객체(Response)의 ok 속성을 확인하여 응답이 정상인지 확인해야 합니다.
가져온 Blob 객체의 URL은 필요 없을 경우 메모리 누수를 방지하기 위해 정리(clean-up)해야 합니다. 위의 코드에서는 URL.createObjectURL()로 URL을 생성하고 이미지 태그에 할당한 후, 필요 없을 때 URL.revokeObjectURL()로 정리할 수 있습니다.

결론

자바스크립트 fetch API를 사용하면 간편하고 효율적으로 이미지를 웹 페이지에 가져올 수 있습니다. 이미지 URL을 fetch() 함수에 전달하고, Blob 객체를 활용하여 이미지를 동적으로 생성하고 표시할 수 있습니다. 이를 통해 웹 개발 시 이미지 관련 작업을 보다 쉽게 처리할 수 있습니다.