자바스크립트 fetch API를 사용한 이미지 갤러리 구현

10 Sep 2023

javascript

이미지 갤러리는 웹사이트에서 많이 사용되는 기능 중 하나입니다. 사용자에게 이미지를 보여주고 슬라이드 혹은 클릭 등의 방법으로 다음 이미지로 넘기는 기능을 제공합니다. 이번 블로그 포스트에서는 자바스크립트의 fetch API를 활용하여 간단한 이미지 갤러리를 구현하는 방법을 알아보겠습니다.

HTML 구조

먼저, 이미지 갤러리를 표시할 HTML 구조를 작성해야 합니다. 다음은 이미지를 표시할 div 요소입니다.

<div id="gallery"></div>

JavaScript 코드

이미지 갤러리를 동적으로 로딩하기 위해 자바스크립트 코드를 작성해보겠습니다.

// 이미지 목록을 가져올 API URL
const apiUrl = 'https://api.example.com/images';

// 이미지 갤러리 요소
const gallery = document.getElementById('gallery');

// 이미지를 로딩하는 함수
const loadImage = (url) => {
  return fetch(url)
    .then(response => response.blob())
    .then(blob => {
      // 이미지 요소 생성
      const image = document.createElement('img');
      image.src = URL.createObjectURL(blob);
      return image;
    })
    .catch(error => {
      console.error('Failed to load image:', error);
    });
};

// 이미지 갤러리 로딩 함수
const loadGallery = () => {
  fetch(apiUrl)
    .then(response => response.json())
    .then(images => {
      // 로드된 이미지 갤러리 비우기
      gallery.innerHTML = '';

      // 각 이미지마다 loadImage 함수를 호출하여 이미지 로딩하기
      images.forEach(imageUrl => {
        loadImage(imageUrl)
          .then(image => {
            // 이미지를 갤러리에 추가
            gallery.appendChild(image);
          });
      });
    })
    .catch(error => {
      console.error('Failed to load gallery:', error);
    });
};

// 이미지 갤러리 로드
loadGallery();

위의 코드에서 apiUrl은 이미지 목록을 가져올 API의 URL을 나타냅니다. gallery는 이미지를 표시할 div 요소입니다. loadImage 함수는 URL을 매개변수로 받아 해당 URL에서 이미지를 가져와 img 요소로 만들고 반환합니다. loadGallery 함수는 apiUrl에서 이미지 목록을 가져온 뒤, 각 이미지 URL에 대해 loadImage 함수를 호출하여 이미지를 로딩하고 gallery에 추가합니다.

CSS 스타일링

이미지 갤러리를 예쁘게 스타일링하기 위해 CSS 코드도 작성해보겠습니다.

#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#gallery img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin: 10px;
  border-radius: 5px;
}

위의 코드는 이미지 갤러리를 가운데 정렬하고, 각 이미지의 크기를 200px로 설정하며, 여백과 이미지의 모서리를 둥글게 만듭니다. 이 CSS 코드를 HTML 파일에 포함하거나 별도의 CSS 파일에 저장하여 적용할 수 있습니다.

결과 확인

위의 자바스크립트 코드를 사용하여 이미지 갤러리를 구현하고, 적절한 이미지 API URL을 사용하여 테스트해보세요. 이미지들이 로딩되어 예쁜 갤러리를 확인할 수 있을 것입니다.

이제 자바스크립트의 fetch API를 사용하여 간단한 이미지 갤러리를 구현하는 방법에 대해 알아보았습니다. fetch API를 사용하면 서버에서 데이터를 가져와 동적으로 웹사이트를 업데이트하는 등 다양한 기능을 구현할 수 있습니다.