클래스를 이용한 코드 구현

<div class="carousel-wrapper">
  <div class="carousel">
    <img class="carousel_item" src="assets/1.jpeg" />
    <img class="carousel_item" src="assets/2.jpeg" />
    <img class="carousel_item" src="assets/3.jpeg" />
    <img class="carousel_item" src="assets/4.jpeg" />
    <img class="carousel_item" src="assets/5.jpeg" />

    <div class="carousel_button--next"></div>
    <div class="carousel_button--prev"></div>
  </div>
</div>

캐러셀을 구성하기 위한 기본적인 HTML코드입니다. 위 코드를 확인해보면 .carousel 안에 동적으로 움직일 모든 요소가 담겨있기 때문에 Class생성자 함수를 이용하면 효율적입니다.

JS작성 1

;;(function () {
  'use strict'

  const get = (target) => {
    return document.querySelector(target)
  }

  //1. 구현할 요소들이 모두 .carousel태그 안에 들어있기 때문에 클래스로 구현하는 것이 좋습니다.
  class Carousel {
    constructor(carouselEl) {
      this.carouselEl = carouselEl
      //3. 이렇게 하면 하드코딩을 방지할 수 있습니다. 
      this.itemClassName = 'carousel_item'   
      //4. 캐러셀엘레멘트 안에 있는 모든 carousel_item 를 가져와 items에 담음
      this.items = this.carouselEl.querySelector('.carousel_item')
      
      //5. querySelector로 아이템을 가져오는 경우에는 유사배열형태로 저장이 되게 됩니다.
      // length를 써서 총 갯수를 가져옵니다.
      this.totalItems = this.items.length;
      //items의 첫번째가 화면에 보일 수 있도록 
      this.current = 0;
    }
    //요소를 클릭하면 이벤트 리스너가 발생할 수 있도록 class안에 작성
    setEventListener() {
      //this를 이용해 가져옴.
      this.prevBtn = tihs.carouselEl.querySelector('.carousel_button--prev')
      this.nextBtn = tihs.carouselEl.querySelector('.carousel_button--next')
    
      //기져온 요소에 클릭이벤트 걸기.
      this.prevBtn.addEventListener('click', () => {
        this.movePrev()
      })
      this.nextBtn.addEventListener('click', () => {
        this.moveNext()
      })
    }

    moveCarouselTo() {
      let prev = this.current - 1; 
      let next = this.current + 1;

      if(this.current === 0) {
        prev = this.totalItems - 1; 
      } else if(this.current===this.totalItems -1) {
        next = 0;
      }
    //클래스 붙이는 직업
      for(let i=0; tihs.totalItems; i++) {
        if(i===this.current) {
          // 주의: active 앞에 띄어쓰기를 해줘야합니다.
          this.items[i].className = this.itemClassName = ' active'
        } else if (i == prev) {
          this.items[i].className = this.itemClassName = ' prev'
        } else if (i == next) {
          this.items[i].className = this.itemClassName = ' next'
        } else {
          this.items[i].className = this.itemClassName
        }
      }
    }

    //작성 => 함수 선언문으로(함수 호이스팅 필요)
    moveNext() {
      //마지막에서는 제일 첫번쨰로 돌아갈 수 있도록 해주어야합니다.(예외처리 필요)
      if(this.current === this.totalItems -1) {
        this.current =0;
      } else {
        this.current++;
      }
      //메서드 실행
      this.moveCarouselTo()
    }

    movePrev(){
      if(this.current === 0) {
        this.current = this.totalItems - 1;
      }else {
        tihs.current--;
      }
      this.moveCarouselTo()
    }
  }

  //2. 인스턴스 생성
  document.addEventListener('DOMContentLoaded', () => {
   const carouselEl = get('.carousel')
   const carousel = new Carousel(carouselEl)
  })

})()

2. JS작성 2

클래스를 초기화해주는 작업이 필요.

  class Carousel {
    constructor(carouselEl) {
	...
      this.current = 0;
    }

    //초기화작업
    initCarousel() {
      this.items[0].classList.add('active');
      this.items[1].classList.add('next');
      this.items[this.totalItems-1].classList.add('prev');
    }

부족했던 개념 정리

1. 함수 호이스팅

• 자바스크립트에서는 함수가 실행되기 전에 함수 안에 필요한 모든 변수값들을 모아서 유효범위 최상단에서 선언합니다.
  • 즉, 함수 실행전 {} 범위 내에서 선언된 변수/함수의 정보를 기억하고 있다가 실행시키는 것입니다.
  • 호이스팅의 대상은 var변수/함수 선언과 함수 선언문에서만 가능합니다. (var의 경우 선언만 되고 할당은 일어나지 않습니다.)
  • let/const 변수 선언과 함수 표현식(+화살표함수)에서는 호이스팅이 나타나지 않습니다.