[TIL] 2023-1207

Facts & Findings

- 리스트의 선택을 관리하는 useSelect 훅을 만들었었는데, 제네릭을 활용해 타입을 유동적으로 받아오면서 여러 로직에 재사용 할 수 있도록 수정해주었다. 이 list 에 대해 중복된 상태를 제거하고, 훅에서 리턴하는 상태를 활용하도록 개선해줌.

 

- QR 스캔에 관련된 테스트 로직을 작성중이다... cypress 에서 전체 시나리오에 대한 테스트를 진행하려고 했는데, QR 데이터를 주입하는게 좀 까다로워서 고민이 된다.... 

  ... 
  <QrReader
    scanDelay={500}
    onResult={handleScanData}
    constraints={{ facingMode: 'environment' }}
    // eslint-disable-next-line react/no-unstable-nested-components
    ViewFinder={() => <ViewFinder isScanned={isScanned} />}
    containerStyle={{ width: '100vw', height: '100vh' }}
    videoContainerStyle={{
      width: '100vw',
      height: '100vh',
      paddingTop: '0px',
    }}
    videoStyle={{ width: '100vw', height: '100vh', objectFit: 'cover' }}
  />
  
// 위 QrReader 가 QR을 스캔하는 이벤트가 발생하면 아래 함수가 호출된다.
const handleScanData = (scanData: any) => {
  if (!scanData || lastResult.current === scanData.text) return;
  setIsScanned(true);

  const BoxQrData = scanData as IBoxQrResp;
  lastResult.current = scanData.text;

  return validateBoxId(BoxQrData.text);
};

코드는 대충 위와 같이 생겼는데... 지금 보니 이걸 e2e 테스트 로직에 포함시키는게 맞나 싶은 생각도 들고...? 근데 api 호출과 그에 따른 처리를 확인하려면 MSW 라던지 모킹이 필요한데... 물론 MSW 세팅은 되어있긴 하지만... 저 이벤트를 모킹해서 뭔가를 해볼 수 있지 않을까 싶은 생각이 드는군... 

 

흠.. 어쩔 수 없다. 그냥 스캔을 트리거하는 함수를 호출해서 테스트를 해버려야겠다...! 근데 그럼 이제 이건 e2e 의 영역이 아니라 유닛 테스트의 영역으로 넘어가야 할 것 같은데... 뭘 우선적으로 테스트 해야하는거지...? 

 

근데... 이거말고 할게 많아서 그냥 안하기로했다...

 

- 코드리뷰... 오늘은 좀 꼼꼼히 봄... 네이밍의 중요성... 비즈니스 로직을 기반으로 짜야 이해하기가 훨 쉽다..~

 

Feelings

- 개발팀 규모가 스타트업치곤 꽤 있었는데... 벌써 여러 사람이 탈주... 및 탈주 예정이라..... 울적해졌다... 난 어디로 가야하는거지....?

 

Feedback

- 급한 건 무엇이 있는지 리스트업 및 이슈로 정리하기..~

- 북마크 정리좀 해야겠다.. 생산성이 떨어진다...

- 테스트는.. 사실 그리 중요하지 않다... 중요하지만... 급하지 않다...