[항해 플러스 프론트엔드 3기] 7주차 WIL

Q1. 과제

  수색대의 지옥주와 같다고 소문이 자자한 항해 플러스 프론트엔드 테스트 코드 주간이 시작되었습니다..! 2주밖에 안되는 시간에 아무것도 모르는 채로 테스트 코드를 할 줄 안다고 말할 정도로 성장할 수 있을까? 당연히 불가능한 일이었답니다..! ㅎ_ㅎ 항해 플러스는 현직자를 대상으로 하는 과정이기 때문에 저처럼 하나도 모르는 사람부터 이미 잘 하는 사람까지 다양한 사람들이 참여하고 있습니다. 좋았던 점은 이번 과제는 실력에 따라 과제를 선택적으로 할 수 있었다는 점입니다. 테알못인 저는 가장 쉬운 난이도로 과제를 제출했습니다. ㅎㅎ...

Q2. 시도

  이번 과제는 소스 코드와 테스트 목록이 주어졌습니다. 뭐든지 처음이 어려운 게 뭐부터 시작해야할 지 몰라서인 것 같습니다. 가장 쉬운 난이도의 과제는 유틸함수와 훅을 테스트하는 것이었습니다. 유틸 함수는 순수함수로 되어 있어서 테스트가 어렵지 않았습니다. 훅은 실제 코드에서 각 훅의 역할을 이해해야 했기 때문에 시간이 더 걸렸던 것 같습니다. 또 세팅해야하는 내용이 유틸 함수보다는 많았습니다. 컴포넌트 테스트까지는 하지 못했지만 WIL에 쿼링과 관련된 내용을 정리하는 것으로 이번주 회고를 마치도록 하겠습니다.

1. getByTestId() : testid로 쿼리를 찾습니다.
  예시) getByTestId("event-submit-button") => <Button data-testid="event-submit-button"></Button>
  - testid는 거의 변하지 않는 값이라서 관련된 내용이 바뀌었을 때 에러를 발생시키지 않을 가능성이 있습니다.

2. getByText() : 내부 text로 쿼리를 찾습니다.
  예시) getByText("제출") => <Button>제출</Button>
  - 큰 컴포넌트에서 찾는 경우 예외 조건 없이 모든 태그에서 검색을 하기 때문에 성능 이슈가 있을 수 있습니다.

3. getByRole() : 태그에 설정된 Role을 먼저 찾고 두번째 인자로 전달한 조건에 해당하는 쿼리를 찾습니다.
  - Role이란 공식적으로 정의되어 있는 ARIA 속성입니다.
    - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
  - getByRole을 많이 사용하는 것이 권장되는 방식이라고 합니다.
    - https://seongry.github.io/2021/06-20-common-mistakes-with-rty/
  예시) getByRole("checkbox", {name : "repeat setting"}) = > <Checkbox aria-label="repeat setting"></CheckBox>
  - Role에 대해서 많이 알고 있을수록 잘 쓸 수 있기 때문에 학습 장벽이 좀 있는 편

Q3. 문제점

   경험 부족 ... ㅠ

Q4. 해결

생략

Q5. 7주차 느낀 점

 매번 회사에서 개발을 하면서 테스트의 필요성은 많이 느끼지만 적용하기 막막했었는데 이번 과정을 통해 어느 정도 혈이 뚫린 것 같습니다. 멘토링에서 조언 받은대로 시니어분들이 주도적으로 하지 않더라도 내가 할 수 있는 영역에서부터 조금씩 적용해나가는 연습을 해야할 것 같습니다. 테스트는 경험이 중요하다고 많이 느꼈고 언젠가 내가 시니어가 되었을 때 테스트를 적극적으로 회사에 적용해나갈 수 있도록 미리 준비된 사람이 되어야겠습니다.