이미지 슬라이더는 웹 개발에서 자주 사용되는 기능 중 하나입니다. 사용자에게 이미지를 보여주고 자동으로 슬라이드되는 기능을 구현할 수 있습니다. 자바스크립트에서 Nullish Coalescing(널 병합 연산자)을 활용하여 이미지 슬라이더를 처리하는 방법을 알아보겠습니다.

1. HTML 구조 생성

먼저, 이미지 슬라이더를 구현하기 위해 HTML 구조를 생성합니다. 예를 들어, 다음과 같은 구조를 사용할 수 있습니다.

<div class="slider-container">
  <img src="" alt="" class="slider-image" />
</div>

2. 자바스크립트 코드 작성

이제 자바스크립트 코드를 작성하여 이미지 슬라이더를 처리합니다.

const sliderContainer = document.querySelector('.slider-container');
const sliderImage = document.querySelector('.slider-image');

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg'];
let currentIndex = 0;

function getNextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  return images[currentIndex];
}

function setSliderImage(imageUrl) {
  sliderImage.src = imageUrl;
}

function handleImageLoadError() {
  const defaultImageUrl = 'default.jpg';
  setSliderImage(defaultImageUrl);
}

sliderImage.addEventListener('error', handleImageLoadError);

setSliderImage(images[currentIndex]);

setInterval(() => {
  const nextImage = getNextImage();
  setSliderImage(nextImage ?? '');
}, 3000);

3. 코드 설명

• sliderContainer와 sliderImage 변수는 각각 슬라이더 컨테이너와 이미지 요소를 가져옵니다.
• images 배열은 슬라이더에 사용될 이미지 URL들을 담은 배열입니다.
• currentIndex 변수는 현재 보여지는 이미지의 인덱스를 나타냅니다.
• getNextImage() 함수는 다음에 보여질 이미지의 URL을 반환합니다.
• setSliderImage(imageUrl) 함수는 슬라이더 이미지의 소스를 설정합니다.
• handleImageLoadError() 함수는 이미지 로드에 실패했을 때 기본 이미지를 보여주는 역할을 합니다.
• sliderImage 요소의 error 이벤트를 통해 이미지 로드 실패시 handleImageLoadError() 함수를 호출합니다.
• setInterval() 함수를 사용하여 일정 시간마다 슬라이더 이미지를 변경합니다.

이제 위의 코드를 참고하여 자바스크립트에서 Nullish Coalescing을 활용한 이미지 슬라이더를 구현할 수 있습니다.

#javascript #NullishCoalescing