[TDL] 04/28 Today's-Done-List

- JS 기본 문법

https://www.youtube.com/watch?v=Um-CJHNc5Pw

https://www.youtube.com/watch?v=tpl2oXQkGZs&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=11

---

- JavaScript carousel

• className을 추가해서 각 위치들 초기화
  • items요소의 1번째 index 0을 current로,
    이전(prev)은 current의 이전인 items 요소의 맨 끝 5번째 index, 4에 추가,
    다음(next)은 current의 다음인 2번째 index, 1에 추가한다.

class Carousel {
    constructor(carouselElement) {
      this.carouselElement = carouselElement
      this.items = document.querySelectorAll('.carousel_item')
      this.totalItems = this.items.length
    }
    
    initCarousel() {
      this.items[this.totalItems - 1].classList.add('prev')
      this.items[0].classList.add('active')
      this.items[1].classList.add('next')
    }
 }

 

• prev와 next에 clickEvent 적용
  • prev를 클릭할 때 : current가 0이라면, prev는 마지막으로 가야 함.
    그렇지 않고 일반적으로는 current에서 -1씩 해서 이전의 이미지로 이동시켜준다.
  • next를 클릭할 때 : current가 마지막이라면, 0으로 가게 해야 함.
    그렇지 않고 일반적으로는 current에서 +1씩 해서 다음의 이미지로 이동시켜준다.

toPrev() {
      if (this.current === 0) {
        this.current = this.totalItems - 1
      } else {
        this.current--
      }
      this.moveCarousel()
    }

toNext() {
      if (this.current === this.totalItems - 1) {
        this.current = 0
      } else {
        this.current++
      }
      this.moveCarousel()
    }

setEventListener() {
      this.prevButton.addEventListener('click', () => {
        this.toPrev()
      })
      this.nextButton.addEventListener('click', () => {
        this.toNext()
      })
    }

prev는 0 4 3 2 1 0 4 3 2 1 next는 0 1 2 3 4 0 1 2 3 4

 

• 무한루프의 Carousel
  • 현재 페이지에서 +1 할 경우, next
    현재 페이지에서 -1 할 경우, prev
  • 조건문 추가
    만약 현재 페이지가 0 일 때, prev에 전체의 마지막(-1)을 대입하면, 캐러셀이 계속 이어진다.
    만약 현재 페이지가 전체의 마지막(-1) 일 때, next를 현재 페이지(0)에 대입하면, 캐러셀이 계속 이어진다.
  • 한 마디로 prev를 누를 경우에는 0 4 3 2 1 0 4 3 2 1 0
    next를 누를 경우에는 0 1 2 3 4 0 1 2 3 4 0으로 움직인다.
  • 반복문 추가
    items 요소들을 반복문을 돌려 i가 current일 경우에 active를 붙여서 정가운데에 놓아주고,
    prev는  translateX(-100%)를 적용시켜 왼쪽에, next는  translateX(+100%)를 적용시켜서 오른쪽에 둔다.
    active, prev, next를 제외한 나머지 items들은 그냥 내버려 둠.

moveCarousel() {
      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; i < this.totalItems; i++) {
        if (i === this.current) {
          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
        }
      }
    }

 

prev, next에 translateX를 적용

.carousel_item.prev {
  transform: translateX(-100%);
}

.carousel_item.next {
  transform: translateX(100%);
}

버튼 클릭에 따라 알맞게 대입되는 active, prev, next

 

• 최적화 : 캐러셀이 동작하는 동안 클릭 기능 막기
  
  • 생성자에 this.isMoving = false를 초기화하고
  • 함수가 작동되면 true가 되고, 1초가 지나면 다시 false로 변경시키는 함수를 하나 생성
  • this.isMoving이 true면 그냥 return 시키고, false일 경우에만 함수가 작동되게 하면 끝.
  • 함수를 추가하지 않았을 경우와 비교해야 하기 때문에 시간을 1초로 설정했지만, 0.5초 정도가 적당한 것 같다.

disableInteraction() {
      this.isMoving = true
      setTimeout(() => {
        this.isMoving = false
      }, 1000)
    }

캐러셀이 동작하는 동안 클릭 기능 막기

---

17:50 오후 회고 스터디 (만족도 : 7)

초반에 집중이 잘 안 됐지만, 나중에는 괜찮았다. 카톡을 하지 말아야 돼~

---

- 자료구조 / 알고리즘 (Js ver.) 강의

---

22:50 저녁 회고 스터디 (만족도 : 7)

 

---

[ 출처, 참고 : 제로베이스 프런트엔드 스쿨 ]