[ 팀 프로젝트 ] 캐러셀 버튼 제작 중 문제점

문제점

커러셀 이동 버튼을 제작 하는데 event를 어떻게 줘야할지

캐러셀 버튼 HTML 코드

const icon = document.querySelectorAll(".icon");
icon.forEach(icon => {
  icon.addEventListener("click", function(e) {
      let parent = e.currentTarget.parentElement;
      let children = parent.children;
      let index = Array.prototype.indexOf.call(children, e.currentTarget) + 1;
      if(idx !== index){
          idx = index;
          slide(idx);
          setBackGroundColor();
      }
  });
});

이코드가 페이지당 하나씩 총 5번 있습니다.
(팀원 분이 버튼 퍼블리싱을 해주셨습니다.)

해결 방안

1. onclick를 하나씩 달아준다
2. addEventListener 함수를 사용한다

1. onclick를 하나씩 달아준다

가장 단순한 방법이다. 하지만 가독성이 떨어질 뿐만 아니라 하나씩 달아줘야 하는 번거로움이 있음
(물론 VScode 단축키를 사용하면 빠르게 해결 가능)

2. addEventListener 함수를 사용한다

const icon = document.querySelectorAll(".icon");
icon.forEach(icon => {
  icon.addEventListener("click", function(e) {
      let parent = e.currentTarget.parentElement;
      let children = parent.children;
      let index = Array.prototype.indexOf.call(children, e.currentTarget) + 1;
      if(idx !== index){
          idx = index;
          slide(idx);
          setBackGroundColor();
      }
  });
});

onclick에 비해 확실히 가독성이 좋아집니다 하지만 객체가 매우 많을 시 반복문으로 인해 느려질 수 있습니다.

결론

1번의 경우 가독성이 떨어지고 매우 비효율적이라고 판단하고 미니 프로젝트 이므로 속도에 변화가 매우 적기 때문에 2번을 선택하였습니다.

추가 내용

HTML 자체를 js에서 추가해 주면 더 좋았을 것 같습니다. 하지만 팀원분이 만들어주신 HTML 코드를 변경 하지 않는 선에서 해결하고 싶어서 가장 괜찮은 방법을 찾은 거 같습니다.