Hyunjung Im

Frontend Developer

github

23-07-08 복기 (Feat. 토스 프론트엔드 챌린지)

2023-07-08

오늘 2시에 토스 프론트엔드 챌린지를 진행했다. 엉뚱한 곳에서 헤매게 되어 잘 끝내지 못했다. 실수한 점을 복기하고 같은 실수를 반복하지 말자.

실수한 점

  • 긴장한 점

    • 늘 테스트에 약한데 고쳐지질 않는다. 좀 더 긴장하지 않도록 노력하기.
    • 긴장하면 중요한 부분을 더 살펴보지 않고 지나치게 된다. 큰 문제.
    • 좀 더 침착하게 하기.
  • 중요도를 생각하지 않은 점

    • 테스트의 목표가 테스트 코드를 통과하는 것이라면 테스트 코드에 어떤 것이 있는지. 그리고 테스트 코드가 순서대로 적혀있는지 확인하고 테스트 코드 통과를 목표로 과제를 진행해야했다.
    • 시간이 좀 더 걸리더라도 초반에 TODO 리스트를 순서대로 적고 정리하면서 해야겠다. TODO에 있는 것만 해결하고 부수적인 것은 모든 TODO 리스트를 해결한 후 작업 해야한다.
    • 그리고 테스트 코드에 어떤 것으로 통과를 판별하는지 자세하게 적혀있었다.
  • 100% 완료만을 목표로 삼지 않기

    • 100% 완료가 되지 않을 것 같으면 중간에 포기하고 싶은 기분이 들 때가 많다. 안좋은 버릇인듯. 고치자. 할 수 있는 데 까지 하는 것을 목표로 삼기.
  • 라이브러리에 의존하지 않기

    • react query로 hook을 만들어서 해결하려 했는데, react query를 사용하려면 테스크 코드에 react query 설정을 해줘야 했다. 그 때부터 헷갈리기 시작했다. 이것도 테스트 코드를 좀 더 살펴봤다면 일어나지 않았을 문제였을 것이다.

다시 TODO 리스트 작성해보기

  1. 테스트 코드 목록 살펴보기
  2. 모달 만들기
  • 모달 내에 어떤 상태가 필요한지 먼저 구성하기
    • isOpenModal
    • isOpenKeypad
  • 모달이 열리고, 닫히는 부분부터 구현하기
  1. 모달 내에 변하지 않는 부분 UI 간단하게 구현하기

  2. 어떤 상태, 어떤 이벤트가 필요한지 구성하기

  3. 이벤트 로직 처리하기

  4. 서버 전송 처리하기