[TIL] 0301 코드리뷰 몇가지

피드백

• Class이름은 명사형태가 더 좋다. Class가 들어간 파일도 그렇겠지?

• 함수를 만들 때 인자를 객체형태로 받으면 어떤 의미인지 나타내기 좋다.

• 클래스(DOM) 이름도 변수화 하자.

• 매직넘버들 제거

• setTimeout, setInterval, requestAnimationFrame 사용법 익혀보기

  • setInterval

    handleMousedown({ target: { classList } }) {
      if (this.isPrevBtn(classList)) {
        this.timer = setInterval(this.doubleSlidePrev.bind(this), 2000);
      } else if (this.isNextBtn(classList)) {
        this.timer = setInterval(this.doubleSlideNext.bind(this), 2000);
      }
    }

• setTimeout(재귀형태)

  파라미터에서 setInterval처럼 distructuring으로 받아온다면 재귀호출할 때 event객체를 인자로 넘겨주지 못하기 때문에 아래에서 변수로 따로 설정해줘야한다.

      handleMousedown(event) {
        let {
          target: { classList }
        } = event;
        if (this.isPrevBtn(classList)) {
          this.timer = setTimeout(() => {
            this.doubleSlidePrev();
            this.handleMousedown(event);
          }, 2000);
        } else if (this.isNextBtn(classList)) {
          this.timer = setTimeout(() => {
            this.doubleSlideNext();
            this.handleMousedown(event);
          }, 2000);
        }
      }

• requestAnimationFrame

  requestAnimationFrame으로 위와 같은 기능은 만들지 못했다. rAF는 애니메이션처럼 작동하는거지 시간의 흐름을 다루는 것은 아니기 때문에 위와같이 하려면 setTimeout같은 것을 어차피 사용해야 하지 않을까 라는 생각이 든다.

  그래도 rAF를 알아보면서 rAF로 animation을 구현하는 간단한 원리를 배웠다.

  rAF의 인자로는 콜백함수가 들어오는데 콜백함수에 자동으로 timestamp라는 것이 들어간다. 이를 이용해서 rAF를 시작할 때 timestamp를 start같은 변수에 저장해 현재 timestamp와 start의 차이 progress를 이용해서 애니메이션을 구현할 수 있다. (const progress = timestamp - this.start;)

  아래 코드를 보면 progress가 0~timestamp시간의 흐름에 따라 올라가게 된다.

  progress에 따라서 slideList가 x축으로 이동하게 된다.

  이때 progress가 oneStep만큼 가기 전이라면 계속 rAF를 재귀적으로 호출하는 방식이다. transition없이도 애니메이션 처럼 진행된다.

    let start = null
    
    const slideNext = (timestamp) => {
        if (!this.start) this.start = timestamp;
        const progress = timestamp - this.start;
        this.slideList.style.transform = `translate3d(${progress}px, 0, 0)`;
        if (progress < this.oneStep) {
          window.requestAnimationFrame(this.doubleSlidePrev.bind(this));
        }
    }

• bind함수를 call,apply를 이용해서 구현해보기

  this.moreBtn.addEventListener('click', this.handleClick.bind(this));
  //==>>??
  this.moreBtn.addEventListener('click', function () {
    this.handleClick.apply(this);
  });

이렇게 하라는 건지는 잘 모르겠는데 일단 바꿔서 해보긴 했다. apply는 실행을 시켜버리는데 callback함수로 넣을 수 있는 방법은 함수 선언식에 넣는 방법이다. (화살표 함수는 굳이 bind나 apply해줄 필요가 없으니..)

• 이터러블 객체에 대해서 공부하기

• 고차함수화

  • 기존 형태

      const splitedData = [];
      for (let i = 0; i < this.data.length; i += this.maxView) {
        splitedData.push(this.data.slice(i, i + this.maxView));
      }

• forEach사용

        const splitedData = [];
        this.data.forEach((v, idx, src) => {
          if (idx % 5 === 0) splitedData.push(src.slice(idx, idx + this.maxView));
        });

• reduce사용

      const splitedData = this.data.reduce((acc, cur, idx, src) => {
          if (idx % this.maxView === 0) acc.push(src.slice(idx, idx + this.maxView));
          return acc;
        }, []);