개발자 도구 디버깅의 중요성

계획은 완벽했다. 그러나 계속 오작동하는 슬라이더.

먼저, 나의 계획은 이러했다.

자꾸 오작동을 하는 것이 아닌가?

초기의 slider.js 안의 이벤트핸들러 메소드들을 보면 우선 prev 버튼만 눌렀을때 작동되도록 만든 코드이다. 클릭 이벤트가 일어나면 transitionendEvent() 함수를 호출하여 transitionend 이벤트를 비동기로 기다리는 함수가 하나 생성되는 것이다.( 결국 문제는 이것이였다.)

  clickEvent() {
    _.on(this.bannerBtns, "click", ({ target }) => {
      switch (target.className) {
        case "icon_slide prev":
          this.transitionendEvent();
          this.$slider.style.transform = "translate3d(484px, 0px, 0px)";
          this.$slider.style.transitionDuration = "0ms";
          break;
        case "icon_slide next":
          this.$slider.style.transform = "translate3d(-484px, 0px, 0px)";
          break;
      }
    });
  }

  transitionendEvent() {
    _.on(this.$slider, "transitionend", ({ target }) => {
      let last = target.lastElementChild
      target.insertBefore(last, target.childNodes[0]);
      //this.$slider.insertBefore(
      //  target.lastElementChild,
      //  this.$slider.childNodes[0]
      //);
      this.$slider.style.transform = "translate3d(0px, 0px, 0px)";
      this.$slider.style.transitionDuration = "300ms";
    });
  }

이 코드 안에서는 첫번째 클릭 이벤트에서는 부드럽게 애니매이션이 적용되지만 다음 클릭 이벤트에서는 끊어지면서 잘 적용되지 않는 것을 발견했다. + 나는 그것을 보고 insertBefore의 함수 문제구나 라고 단정 지었다.

막막한 해결 방법.. 개발자 도구를 이용해 디버깅하자

사실 저위에 있는 코드가 틀리지 않았다고 내 뇌속에서는 이미 결정짓고 "어디 보자.. node 들이 insert 되는 것이 잘못되는 건가? " 라고 생각하면서 이것저것 그 쪽으로 "잘못" 삽질 했다.

점심을 먹고와서 차근차근 다시 보기위해서 개발자 도구에서 해당 메소드에 디버깅을 걸고 이벤트를 주니 두번째 클릭에서 한번 클릭에 transitionendEvent() 이 두번 실행되는 것을 알수 있었다. 그러니.. 노드들이 두 번 이동했던 것이다. 모든 퍼즐이 맞춰졌다.. ㅎㅎ

자 그러면 왜?? 두 번 이나 호출 되는 것일까?

처음에는 transitionend 라는 이벤트가 두번 발생하는 줄 알고 transitionDuration = 0ms 하지 않고 transition = none 으로 하여 아예없애보았다.

그러나 그렇게 해도 이벤트 핸들러가 두 번이나 실행되는 것이다.

문제는 이벤트리스너가 생성되는 구조에 있다. 나는 _.on() 이라는 유틸함수로 이벤트 리스너를 만든것이다. 클릭할때마다 이벤트 리스너를 만든 나는 두번째 클릭에서는 두개의 이벤트 리스너가 슬라이더 안에 존재하고있었던 것이다.

실제로 JS 문법에 element.addEventListener() 말고도element.removeEventListener() 도 있다. 내가 해결한 방법 말고 이벤트를 생성하고 지우는 방법도 괜찮을 것 같다.

결국엔 이벤트 리스너 함수를 바깥으로 빼내어서 target의 style 을 가져와서 그게 translate 가 오른쪽인지 왼쪽인지에 따라서 다르게 함수를 만들었다. (이것도 또한 개발자 도구에서 알아낸 것이다.)

느낀점

아직 fetch 더보기도 구현 해야하고 hover 이벤트도 구현해봐야하지만 슬라이더를 구현해보면서 개발자 도구 디버깅의 중요성을 다시한번 깨닫게 된 하루였던것같다.