이미지 갤러리는 웹 개발에서 자주 사용되는 기능 중 하나입니다. 사용자에게 이미지를 보여주는 동시에, 이미지의 자세한 정보와 예쁜 디자인을 제공하는 역할을 합니다. 이번 포스트에서는 자바스크립트의 fetch API를 사용해 간단한 이미지 갤러리를 구현하는 방법을 알아보겠습니다.

Fetch API란?

Fetch API는 자바스크립트의 내장 함수로, 서버로부터 리소스를 가져오는 기능을 제공합니다. Ajax통신을 단순화하고, RESTful API를 사용할 수 있으며, 비동기적으로 데이터를 가져올 수 있습니다. 이를 통해 이미지 갤러리에 필요한 이미지 URL과 같은 데이터를 서버로부터 가져올 수 있습니다.

HTML 구조 설정하기

먼저, 이미지 갤러리를 포함할 HTML 구조를 설정해야 합니다. 예를 들어, 아래와 같은 구조를 가지는 div 요소를 사용할 수 있습니다.

<div id="imageGallery">
  <div id="galleryContainer"></div>
  <div id="galleryInfo"></div>
</div>

galleryContainer는 이미지를 보여주는 공간이고, galleryInfo는 선택된 이미지의 자세한 정보를 표시할 공간입니다.

이미지 데이터 가져오기

이제 fetch API를 사용하여 이미지 데이터를 가져오는 함수를 작성해 보겠습니다. 이 함수는 서버로부터 이미지 URL과 추가 정보를 가져옵니다. 아래는 예시 코드입니다.

async function fetchImageData() {
  try {
    const response = await fetch('https://example.com/api/images');
    const data = await response.json();
    return data;
  } catch(error) {
    console.error('Error fetching image data:', error);
    throw error;
  }
}

위 코드에서는 fetch 함수를 사용하여 /api/images 엔드포인트로부터 이미지 데이터를 가져옵니다. 이후 response.json()을 사용하여 JSON 데이터를 객체로 변환합니다. 만약 에러가 발생한다면, 콘솔에 에러를 출력하고 에러를 던집니다.

갤러리 구현하기

이미지 데이터를 가져온 후, 해당 데이터를 사용하여 갤러리를 구현하는 함수를 작성해 보겠습니다. 아래는 예시 코드입니다.

function createGallery(images) {
  const container = document.getElementById('galleryContainer');
  container.innerHTML = '';

  images.forEach((image) => {
    const imgElement = document.createElement('img');
    imgElement.src = image.url;
    imgElement.alt = image.alt;
    imgElement.addEventListener('click', () => {
      showImageInfo(image);
    });
    container.appendChild(imgElement);
  });
}

function showImageInfo(image) {
  const infoContainer = document.getElementById('galleryInfo');
  infoContainer.innerHTML = '';
  
  const infoElement = document.createElement('div');
  infoElement.innerHTML = `
    <h2>${image.title}</h2>
    <p>${image.description}</p>
  `;
  infoContainer.appendChild(infoElement);
}

위 코드에서 createGallery 함수는 이미지 데이터를 받아와 galleryContainer에 이미지를 추가합니다. 각 이미지를 클릭하면 showImageInfo 함수를 호출하여 해당 이미지의 자세한 정보를 galleryInfo에 표시합니다.

실행하기

이미지 데이터를 가져와 갤러리를 생성하는 함수를 호출하는 코드를 작성하면, 이미지 갤러리를 실행할 준비가 끝납니다.

fetchImageData()
  .then((images) => {
    createGallery(images);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

위 코드에서 fetchImageData 함수를 호출하여 이미지 데이터를 가져온 후, createGallery 함수를 호출하여 갤러리를 생성합니다. 에러가 발생할 경우 콘솔에 에러를 출력합니다.

결론

이번 포스트에서는 자바스크립트의 fetch API를 사용하여 이미지 갤러리를 간단히 구현하는 방법을 알아보았습니다. fetch API를 사용하면 서버로부터 데이터를 비동기적으로 가져올 수 있으며, 이를 이용해 다양한 웹 애플리케이션을 개발할 수 있습니다. 이미지 갤러리는 사용자에게 시각적인 효과를 제공하는 중요한 기능이므로, 효과적으로 구현할 수 있도록 fetch API를 적극 활용해보세요.