주간회고 08/02 ~ 08/08

주간회고 08/02 ~ 08/08

회사

1. Cypress 테스트 작업

• 지난주부터 이어서 Cypress 테스트 작업을 해 보았다. 지금은 연습 겸 해서 짜는 거지만, 실제 프로덕션에서 쓰게 된다면, 테스트 하기 쉬운 기능 개발에 대해 많은 고민을 할 것 같다. 예를 들면 Component Props만 생각해봐도,

  type Props = {
    onClick: () => void
    text: string
    className: string
  }
  
  const Button = ({ onClick, text, className }: Props) => {
    return (
      <button onClick={onClick} className={className}>
        {text}
      </button>
    )
  })
  
  ...
  
  <Button
    text="안녕"
    onClick={() => console.log('안녕')}
  
    // ????
    // data-testid="button-test"
    // style={{ color: 'skyblue' }}
  />

  이렇게 써버리면, Props에 명시되지 않은 값들이 무시되어 버리게 경우가 발생해버린다. 처음에는 저런 값들도 다 Props로 내려줘야 하나?싶어서 기존 컴포넌트들을 많이 수정해야하는 딜레마에 빠져있었는데, BPL(Banksalad Product Language) 무야호 이걸 보면서 개선해 나갈 수 있었다.

  export interface HtmlElementProps<T extends HTMLElement>
    extends Omit<React.HTMLAttributes<T>, 'id'> {
    'data-testid'?: string
  }
  
  type Props = {
    text: string
  } & HtmlElementProps
  
  const Button = ({ text, ...props }: Props) => {
    return (
      <button {...props} >
        {text}
      </button>
    )
  })
  
  ...
  
  <Button
    text="안녕"
    onClick={() => console.log("안녕")}
    data-testid="button-test"
    style={{ color: 'skyblue' }}
  >
    <img src="icon.png" alt="아이콘 이미지" />
  </button>

• 순수한 API response, request 타임을 알기 위해 여러가지 시도해보았지만, 결국은 포기하고 시나리오에 맞는 테스트를 구현하는데 집중하기로 했다. cy.intercept을 통해 요청을 가로챌 수는 있지만, 막상 log를 찍어보면 devtools나 sentry에 찍힌것보다 꽤 차이가 나는 값을 찍고 있어서 신뢰할 수 없던게 큰 이유였다. 애시당초 그러한 목적으로 Cypress를 쓰는것도 아니였기에, 어느정도 삽질을 하다가 정리하는게 나을것 같다는 판단이 들었다.
• 테스트 중애, Api response를 받은 후 화면에 그려준다.라는 테스트를 할 때가 가장 애매했다. API response를 받은 후 화면에 보여줘야 하는데, 화면에 다 나온것을 어떤 기준으로 하지?에서 많은 고민을 했다. 우선은 No Data화면과 list화면 분기처리, 그리고 list의 n번째 row의 className이 있는지 확인하는 식으로 처리를 했는데, 더 좋은 방법이 있을지 고민해봐야겠다. list의 수가 모잘라서 n번째까지 안올 경우에는 현재의 테스트가 실패할 것이기 떄문이다. 음… 중간에 intercept하는 부분에서 list의 갯수를 파악하고, n - 1 번째 row 가 있는지 확인하는것도 방법이 될 수 있겠다.

일상

1. 요리

• 주변 물가가 싸고 식당도 다양하기도 했고, 집도 작다보니 요리할 공간이 나오지를 않기도 해서 망원동에 4년간 살면서 요리를 해먹은적이 없었다. 요즘 들어서 너무 시켜먹거나, 거르기만 하다보니 이대로는 안될거 같아서 조리기구도 좀 사고, 근처 마트에서 고기랑 비빔면을 사서 해먹었다. 요리솜씨가 죽은건 아닌데, 설거지를 하는것과 식재료를 사오는건 생각보다 귀찬은 일이구나 싶었다. 그 동안은 누군가 해주는 것만 먹었는데, 이제는 내가 재료를 사는 것 부터 해서 조리, 뒷정리까지 다해야 하다니…