第2週

一週間一緒に話したい部分を勉強します。

1. Class

クラス実装関数の使用例

<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>

  class Carousel {
    constructor(carouselEl) {
      this.carouselEl = carouselEl
	//인스턴스가 자동으로 클래스 값을 갖도록 설정.
      this.itemClassName = 'carousel_item'   
      //4. 캐러셀엘레멘트 안에 있는 모든 carousel_item 를 가져와 items에 담음
      //( querySelector로 아이템을 가져오는 경우에는 유사배열형태로 저장이 되게 됩니다.)
      this.items = this.carouselEl.querySelectorAll('.carousel_item')
      // length를 써서 총 갯수를 가져옵니다.
      this.totalItems = this.items.length;
      //items의 첫번째가 화면에 보일 수 있도록 
      this.current = 0;
    }
...

2.JQuery=>Angular=>Reduxの状態管理モード変化