05.10 TIL(모듈 시스템 주의사항, 이벤트 중복)

모듈 시스템 주의사항

import한 js 파일은 평가되고 한번 실행된다!

// fetch.js
import { randomColorGenerator } from './main';

범용적인 함수인 무작위 color 발생 함수를 main에서 선언했다고 해보자.

import { fetchData, render } from "./fetch";

fetchData()
  .then((res) => render(res))
  .then(() => init());

그리고 main 함수에서는 다음과 같은 로직을 실행한다. 여기서 문제점이 발생한다.

fetch.js에서 main.js를 import할 때 브라우저에서 main.js의 코드를 한번 평가하고 실행시킨다.

이 때문에 로직이 두 번 발생하게 되고 원치 않는 결과를 낳는다.

디자인 패턴, 소프트웨어 공학 등이 이런 구조적인 문제들 때문에 나온 것 같다. 😓

범용 로직은 따로 common으로, 각각의 기능들을 카테고리 별로 모듈을 나누고 실행 파일도 따로 분리하면 어떨까.

이벤트 중복

  shutter.addEventListener("mousedown", (e) => {
    if (sliding) return;
    draggable = true;
    currentY = e.clientY;
    currentHeight = window.getComputedStyle(logListEl).height.slice(0, -2);
  });

  wrapper.addEventListener("mousemove", (e) => {
    if (sliding) return;
    if (!draggable) {
      return;
    }

    if (e.clientY < 124) {
      return;
    }
    if (e.clientY > 333) {
      return;
    }

    let movePoint = Math.abs(currentY - e.clientY);

    if (currentY <= e.clientY) {
      logListEl.style.height = `${Number(currentHeight) - Number(movePoint)}px`;
    } else {
      logListEl.style.height = `${Number(currentHeight) + Number(movePoint)}px`;
    }
  });

  wrapper.addEventListener("mouseup", (e) => {
    if (sliding) return;
    draggable = false;

    setTargetPosition(currentY - e.clientY);
  });

  slider.addEventListener("mousedown", (e) => {
    slider.style.transition = ``;
    if (draggable) return;

    currentX = e.clientX;
    sliding = true;
  });

  document.addEventListener("mousemove", (e) => {
    if (draggable) return;

    if (!sliding) {
      return;
    }

    let movePoint = currentX - e.clientX;

    if (currentSlide === 0 && movePoint < 0) return;
    if (currentSlide + 1 >= totalSlide && movePoint > 0) return;

    slider.style.transform = `translateX(-${
      currentSlide * wrapperWidth + movePoint
    }px)`;
  });

  document.addEventListener("mouseup", (e) => {
    if (draggable) return;
    sliding = false;

    let movePoint = currentX - e.clientX;

    if (currentSlide === 0 && movePoint < 0) return;
    if (currentSlide + 1 >= totalSlide && movePoint > 0) return;

    if (movePoint > 160) {
      currentSlide++;
    } else if (movePoint < -160) {
      currentSlide--;
    }

    slider.style.transition = `transform 0.4s`;
    slider.style.transform = `translateX(-${currentSlide * wrapperWidth}px)`;
  });

내부에서 상하 슬라이드 컴포넌트와 전체적인 좌우 슬라이드 컴포넌트를 만들었다. 그런데 둘의 이벤트가 모두 같아 이벤트가 중복적으로 처리된다!

상하 슬라이드를 작동하는 도중 좌우 슬라이드가 움직여지는 등 아주 혼란스러웠다.

이 상황을 타개하기 위해 각각의 이벤트를 담당하는 플래그를 설정했다.

하나의 이벤트가 발생할 때 동시에 발생되는 다른 이벤트 함수에서 플래그를 감지하면 동작을 막을 수 있다.

근데 좋은 해결 방법은 아닌 것 같다. 😱

어떻게 하면 깔끔하게 해결할 수 있었을까.