자바스크립트 Local Storage를 이용한 사진 갤러리 구현

15 Sep 2023

javascript

사진 갤러리는 웹 애플리케이션에서 많이 사용되는 요소 중 하나입니다. 자바스크립트의 Local Storage를 활용하면 사용자가 웹 페이지를 다시 방문할 때마다 사진 갤러리의 상태를 유지할 수 있습니다. 이번 글에서는 Local Storage를 이용하여 간단한 사진 갤러리를 구현하는 방법을 살펴보겠습니다.

HTML 마크업 구조

먼저, 사진 갤러리를 표시하기 위한 HTML 마크업 구조를 만들어야 합니다. 일반적으로 사진 갤러리는 이미지를 보여주는 부분과 관련 컨트롤을 포함합니다. 아래는 예시로 사용할 HTML 마크업 구조입니다.

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">

  <button class="prev-button">이전</button>
  <button	class="next-button">다음</button>
</div>

자바스크립트 코드 작성

위에서 작성한 HTML 마크업에 대한 기본적인 CSS 스타일링은 생략하고, 자바스크립트 코드로 사진 갤러리의 동작을 구현해보겠습니다.

// 이미지와 버튼 요소들을 선택합니다.
const gallery = document.querySelector('.gallery');
const images = gallery.querySelectorAll('img');
const prevButton = gallery.querySelector('.prev-button');
const nextButton = gallery.querySelector('.next-button');

// 현재 선택된 이미지의 인덱스를 저장하는 변수를 선언합니다.
let currentIndex = 0;

// 이전 버튼이 클릭되었을 때의 동작을 구현합니다.
prevButton.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  updateGallery();
});

// 다음 버튼이 클릭되었을 때의 동작을 구현합니다.
nextButton.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % images.length;
  updateGallery();
});

// 사진 갤러리의 상태를 업데이트하는 함수를 구현합니다.
function updateGallery() {
  images.forEach((image, index) => {
    if (index === currentIndex) {
      image.style.display = 'block';
    } else {
      image.style.display = 'none';
    }
  });

  // 현재 선택된 이미지의 인덱스를 Local Storage에 저장합니다.
  localStorage.setItem('currentIndex', currentIndex);
}

// 페이지 로딩 시 Local Storage에서 현재 선택된 이미지의 인덱스를 읽어와 갤러리를 업데이트합니다.
currentIndex = localStorage.getItem('currentIndex') || 0;
updateGallery();

위의 코드에서는 갤러리 요소와 이미지, 버튼 요소들을 선택하고, 현재 선택된 이미지의 인덱스를 관리하는 변수를 선언합니다. 이전 버튼과 다음 버튼의 클릭 이벤트를 처리하여 현재 선택된 이미지의 인덱스를 업데이트하고, 사진 갤러리의 상태를 업데이트하는 updateGallery 함수를 정의합니다.

페이지가 로딩될 때, Local Storage에서 저장된 현재 선택된 이미지의 인덱스를 읽어와 갤러리를 업데이트합니다.

마무리

이렇게 자바스크립트의 Local Storage를 활용하여 사진 갤러리를 구현할 수 있습니다. 사용자가 웹 페이지를 다시 방문해도 이전에 선택한 이미지의 상태를 유지할 수 있으므로 좀 더 사용자 친화적인 경험을 제공할 수 있습니다. 만약 더 많은 기능을 추가하고 싶다면, 이미지 추가/삭제 기능이나 슬라이드쇼 기능 등을 구현할 수도 있습니다.

#javascript #local-storage