이선민 - 자판기 온보딩 프로젝트

[HelloHailie]

1차 리뷰 후 todo 리스트

• 린트 및 포매터 강제하도록 수정
• 사용하지 않는 updateBalance 함수 제거
• 자바스크립트에서 디자인 요소 하나하나 만들지 않고 template 사용
• mdn input의 참고해서 valueAsNumber 알아보고 사용
• enter키 사용기능은 form 태그에 submit 함수 사용해서 종속되지 않는 방법으로 웹 표준 방법 사용하기
• 이벤트 리스너 내부 함수 어떤건 전역으로 사용하고 어떤건 아닌데 통일시키기. (추후 테스트를 위해서는 파라미터 사용)

추가 todo 리스트

• proxy 사용해서 자동으로 트리거가 될 수 있도록 하기. 참고 링크
• 테스트 진행을 위한 모듈화 작업
• 테스트 진행

[HelloHailie]

@taggon
이벤트 처리하는 부분을 한 곳에서 처리해서 경우를 나눈 이유가 아래 코드가 중복되서 하나의 함수로 묶어서 진행했는데요, 이정도 규모이면 따로 풀어서 진행하는게 효율적인 방법인걸까요?

const target = e.target.closest('.product-button'); if (!target) return; const productId = Number.parseInt(target.dataset.productId); const product = PRODUCTS.find((product) => product.id === productId);

 const handleClick = (e) => {
  const target = e.target.closest('.product-button');
  if (!target) return;
  const productId = Number.parseInt(target.dataset.productId);
  const product = PRODUCTS.find((product) => product.id === productId);
  updateDisplayAmount(product.price);
  handleProductPurchase(product);
};

const handleMouseOut = (e) => {
  const target = e.target.closest('.product-button');
  if (!target) return;
  const productId = Number.parseInt(target.dataset.productId);
  const product = PRODUCTS.find((product) => product.id === productId);
  updateDisplayAmount(state.currentMoney);
};

[taggon]

이런 경우에도 저는 나누는 게 나중에 추적하기가 쉽다고 봐요. 다만 공통된 부분은 다시 별도의 함수로 만들 수 있습니다. 타입도 보고 이해하시라고 편의상 TS로 작성해볼게요.

function getProductFrom(element: HTMLElement) {
  const button = element?.closest('.product-button');
  const productId = Number.parseInt(button?.dataset.productId);
  const product = productId ? PRODUCTS.find(item => item.id === productId) : null;

  return product;
}

function handleClick(e: MouseEvent) {
  const product = getProductFrom(e.target);
  if (product) {
    updateDisplayAmount(product.price);
    handleProductPurchase(product);
  }
}

function handleMouseOut(e: MouseEvent) {
  const product = getProductFrom(e.target);
  if (product) {
    updateDisplayAmount(state.currentMoney);
  }
}

일단 이렇게 수정할 수 있을 것 같기는 한데 이 코드만 보면 handleMouseOut에서 product를 가져와야 할 이유가 안 보이네요.

[taggon]

이 경우에는 mouseout 보다는 mouseleave가 더 맞을 겁니다. 그리고 addEventListener의 세 번째 인수를 true로 설정하셔야 할테고요. 차이가 뭘까요?

[HelloHailie]

오! 궁금해서 찾아봤더니 차이가 명확하게 있네요!
mouseleave 이벤트는 요소의 경계를 완전히 벗어날 때만 발생해서 현재 제 코드는 부모 요소인 productGrid에 이벤트를 걸고 있는데, addEventListener의 세 번째 인수인 useCapture 옵션을 이벤트 캡처링 단계에서 이벤트를 처리한다고 true로 설정해서 하는 방법을 말씀주신 거네요. 이 방법대로 수정해보겠습니다 😃

[HelloHailie]

@taggon 기존 작업에서는 테스트를 DOM 요소를 모킹하는 식으로 작성해야해서 아래와 같이 main.js 내 함수를 아래를 기준으로 나누어서 비즈니스 로직 부분만 테스트를 작성해보았습니다.

미진한 부분이 있다면 피드백 부탁드립니다. 🙇

1. controllers/: UI 이벤트 핸들링
2. data/: 정적 데이터
3. dom/: DOM 요소 참조
4. models/: 데이터 모델
5. services/: 비즈니스 로직
6. utils/: 유틸리티 함수들