자바스크립트에서 JSON 데이터를 이용하여 이미지 갤러리 생성하기

15 Sep 2023

javascript

이미지 갤러리는 웹 개발에서 많이 사용되는 기능 중 하나입니다. 이번 글에서는 자바스크립트와 JSON 데이터를 이용하여 이미지 갤러리를 생성하는 방법에 대해 알아보겠습니다.

필요한 도구 및 기술

HTML: 이미지 갤러리를 표시할 웹 페이지를 생성하기 위해 필요합니다.
CSS: 이미지 갤러리의 스타일링을 위해 필요합니다.
JavaScript: JSON 데이터를 가져와서 이미지 갤러리를 생성하기 위해 필요합니다.
JSON: 이미지 정보를 담고 있는 데이터로, 이미지 경로와 캡션 등의 정보를 포함합니다.

JSON 데이터 준비하기

이미지 갤러리를 생성하기 위해서는 JSON 데이터를 준비해야 합니다. 이미지 파일의 경로와 캡션 등의 정보를 포함하도록 구성합니다. 예를 들어, 다음과 같이 JSON 데이터를 작성할 수 있습니다.

{
  "images": [
    { "path": "img1.jpg", "caption": "Image 1" },
    { "path": "img2.jpg", "caption": "Image 2" },
    { "path": "img3.jpg", "caption": "Image 3" }
  ]
}

자바스크립트로 이미지 갤러리 생성하기

HTML 파일에서 이미지를 표시할 요소를 생성합니다. 예를 들어, <div id="gallery"></div>와 같이 <div> 요소를 생성합니다.
JavaScript 파일에서 JSON 데이터를 가져옵니다. fetch() 함수나 AJAX를 이용하여 데이터를 가져올 수 있습니다.
가져온 JSON 데이터를 파싱하여 JavaScript 객체로 변환합니다.
이미지 요소를 동적으로 생성하여 갤러리에 추가합니다. createElement() 함수와 appendChild() 함수를 사용하여 이미지를 추가할 수 있습니다.
스타일링을 위해 CSS를 적용합니다.

fetch('gallery.json')
  .then(response => response.json())
  .then(data => {
    const gallery = document.getElementById('gallery');
    
    data.images.forEach(image => {
      const imgElement = document.createElement('img');
      imgElement.src = image.path;
      imgElement.alt = image.caption;
      gallery.appendChild(imgElement);
    });
  })
  .catch(error => console.error('Error:', error));

마무리

이제 위의 자바스크립트 코드를 사용하여 JSON 데이터를 이용하여 이미지 갤러리를 생성할 수 있습니다. JSON 데이터를 수정하거나 다른 이미지를 추가하여 자신만의 이미지 갤러리를 만들어보세요. 이를 통해 동적으로 이미지를 로드하고 보다 흥미로운 웹 페이지를 구현할 수 있습니다.

#javascript #json #이미지갤러리