슬라이드쇼는 웹 페이지에서 이미지를 자동으로 전환하여 화면에 보여주는 기능입니다. 이번 포스트에서는 JavaScript의 Promise를 활용하여 슬라이드쇼 기능을 구현하는 방법에 대해 알아보겠습니다.

HTML 구조

먼저, 슬라이드쇼를 구현하기 위해 다음과 같이 HTML 구조를 만들어줍니다.

<div id="slideshow">
   <img src="image1.jpg" alt="Image 1">
   <img src="image2.jpg" alt="Image 2">
   <img src="image3.jpg" alt="Image 3">
</div>

JavaScript 코드

다음으로, JavaScript 코드를 작성하여 슬라이드쇼 기능을 구현해보겠습니다.

const slideshow = document.getElementById("slideshow");
const images = Array.from(slideshow.getElementsByTagName("img"));
let currentIndex = 0;

function nextSlide() {
   return new Promise((resolve, reject) => {
      if (currentIndex === images.length - 1) {
         currentIndex = 0;
      } else {
         currentIndex++;
      }

      slideshow.style.backgroundImage = `url(${images[currentIndex].src})`;

      // 슬라이드 전환 시간(5초) 후에 resolve 호출
      setTimeout(resolve, 5000);
   });
}

function startSlideshow() {
   nextSlide()
      .then(startSlideshow)
      .catch(error => {
         console.log("Error occurred while running the slideshow:", error);
      });
}

startSlideshow();

위 코드는 다음과 같은 동작을 수행합니다.

1. HTML에서 슬라이드쇼에 사용할 이미지들을 가져옵니다.
2. nextSlide 함수를 정의합니다. 해당 함수는 다음 슬라이드로 전환하는 역할을 합니다. 현재 슬라이드의 인덱스를 확인하고, 인덱스를 다음 슬라이드로 업데이트합니다. 그리고 화면에 다음 슬라이드 이미지를 표시합니다. 마지막으로, 슬라이드 전환을 5초 후에 완료했다는 의미로 Promise를 호출하는데, 이렇게 함으로써 슬라이드가 자동으로 전환됩니다.
3. startSlideshow 함수를 정의합니다. 해당 함수는 첫 번째 슬라이드를 표시하고, nextSlide 함수를 호출하여 슬라이드쇼를 시작합니다. 이후에는 계속해서 다음 슬라이드로 전환되도록 Promise 체인을 만들어줍니다.

결과 확인

위의 코드를 실행하면 슬라이드쇼가 자동으로 실행되는 것을 확인할 수 있습니다. 각 슬라이드는 5초마다 전환되며, 마지막 슬라이드에서는 첫 번째 슬라이드로 순환됩니다.

이와 같이 Promise를 활용하여 슬라이드쇼 기능을 구현할 수 있습니다. 이러한 방식은 자바스크립트의 비동기 동작을 효율적으로 다룰 수 있는 방법 중 하나입니다.

#JavaScript #Promise