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

10 Sep 2023

javascript

이미지를 웹 개발 프로젝트에 사용하는 것은 매우 흔한 작업입니다. 자바스크립트의 fetch API를 사용하면 간단하게 이미지를 가져올 수 있습니다. 이번 블로그 포스트에서는 자바스크립트로 이미지를 가져오는 방법을 알아보겠습니다.

fetch API란?

fetch API는 자바스크립트의 내장된 기능으로, 네트워크를 통해 리소스를 가져오는 작업을 수행합니다. 이전에는 XMLHttpRequest를 사용하여 데이터를 가져왔지만, fetch API는 더 직관적이고 간결한 문법을 제공합니다.

이미지 가져오기 예제

아래는 fetch API를 사용하여 이미지를 가져오는 간단한 예제입니다.

fetch('https://example.com/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    const imageUrl = URL.createObjectURL(blob);
    const imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    document.body.appendChild(imageElement);
  })
  .catch(error => {
    console.error('이미지를 가져오는 동안 오류가 발생했습니다:', error);
  });

이 예제에서는 fetch 함수를 사용하여 이미지 파일을 요청합니다. 응답으로 받은 데이터는 response.blob()을 통해 바이너리 데이터로 변환됩니다. 그런 다음 URL.createObjectURL(blob)를 사용하여 이진 데이터를 이미지 URL로 변환합니다.

이미지 URL을 사용하여 새로운 img 요소를 생성하고, 이미지 소스로 설정한 후 웹 페이지에 추가합니다.

중요한 점

이미지를 가져온 후에는 URL.revokeObjectURL()를 사용하여 이미지 URL을 해제해야 합니다. 이는 메모리 누수를 방지하기 위해 중요합니다.

URL.revokeObjectURL(imageUrl);

fetch 요청은 보안 정책에 따라 CORS (Cross-Origin Resource Sharing) 제한이 있을 수 있습니다. 따라서 가져오고자 하는 이미지가 다른 도메인에서 호스팅되고 있는 경우, 서버에서 CORS 정책을 올바르게 설정해야 합니다.

결론

자바스크립트의 fetch API를 사용하여 이미지를 가져오는 방법을 알아보았습니다. 이를 통해 웹 개발 프로젝트에서 간단하게 이미지를 추가하고, 화면에 보여줄 수 있습니다. fetch API는 다양한 데이터 유형을 가져올 수 있기 때문에 다른 종류의 리소스도 동일한 방법으로 가져올 수 있습니다. 따라서 필요에 따라 개발에 적용하여 활용할 수 있습니다.

더 많은 정보를 원하시거나 더 많은 예제 코드를 보고 싶으시면 MDN Web Docs에서 fetch API에 대한 자세한 문서를 참조해보세요.