드디어 레벨2의 마지막 미션 끝이 났다. 레벨1보다도 빠르게 지나간 것 같아 아쉽다고 느껴진다. 그래도 이번 미션만 끝이 나고 버퍼 기간만 지나면 2주 동안의 방학이 시작되기 때문에 솔직히 기쁘기도 하다. 방학때 공부 계획이나 약속들이 있지만 일단은 쉬고 싶다는 생각이 들었다. 마음 편하게 쉬기 위해 유종의 미를 거두었다.
상품목록 1단계
미션3에서 진행한 것과 같이 미션을 의미있게 진행하기 위해 표를 작성했다. TDD적 사고를 통해 작은 단위로 문제를 쪼개어 해결하고자 했다고 미션3에서 부족했던 테스트 코드를 신경쓰고자 했다.
처음에 미션 진행의 지표를 세우고자 했다.
피그마와 요구사항을 확인했을 때 기능을 한 문장으로 정의하면
'상품 목록을 불러와 리스트 형태로 보여주고 이를 장바구니에 넣고 뺄 수 있다'
이다.
이렇게 한 문장으로 기능을 정리하니 무엇부터 시작해야할지 알 수 있었다. 처음에는 API통신을 통해 상품목록을 간단한 리스트 형태로 렌더링하는 것부터 구현하였다. 이때 추가적으로 MSW에 대해 알게 되었다.
이번 학습 목표에 MSW를 활용하여 API 요청을 모킹하고 개발을 진행할 수 있다고 제시되어 있었다.
실제 프로젝트 개발에서 백엔드와 동시에 개발을 시작할 때 실제 API가 없음에도 개발을 진행해야 한다. 또는 있다고 하더라도 실제 API를 이용해서 개발을 진행하면 불필요한 통신으로 인해 요금이 부과될 수 도 있다.
이를 해결하기 위해 MSW가 있다. API요청을 모킹할 수 있기 때문에 실제 API를 이용하지 않고 개발을 진행하거나 테스트 코드를 작성할 수 있었다.
이 과정에서 chatgpt를 이용하고자 했으나, chatgpt 학습 데이터가 MSW의 최신 버젼이 아니여서 제대로 된 도움을 받을 수 없었다. 그래서 최대한 공식 문서를 통해 해결하고자 하였다.
다만 처음에는 모든 부분에서 MSW를 사용하여 개발을 진행하고자 하였으나 코치분이 프로덕션 개발 상황에서는 사용하지 않아도 좋다고 해서 상품 목록을 가져오는 부분만 모킹되는 것을 확인하고 개발에서는 실제 API를 사용해서 개발을 진행했다.
요구 사항 자체는 어려운게 없었다. 지금까지의 미션에서 한번쯤 구현해 보았던 UI와 기능들이라 어렵지 않게 구현할 수 있었다.
또한 MSW를 이용해서 API 요청 상태를 테스트했다.
https://github.com/woowacourse/react-shopping-products/pull/2
상품목록 2단계
이번 미션은 새로운 것을 구현하는 것보다 이전까지 API 통신에 있어 loading이나 Error상황을 편하게 이용하기 위해 tanstack query를 사용하는 것이 이번 미션의 주 요구 사항이였다.
이번 미션은 tanstack query의 사용법을 익히고 캐시 기능을 이용해 효율적으로 상태를 관리하고자는 목표를 세웠다.
tanstack query 또한 버젼마다 세부적인 차이가 있어서 공식문서를 읽어보는 것이 중요했다.
이번 미션에서 가장 시간을 소비했던 부분은 낙관적 업데이트 부분이였다. 과연 낙관적 업데이트를 어디에 적용해야 하는가 고민을 했다. 모든 부분에 낙관적 업데이트를 적용할 경우 실제 서버의 상태와 클라이언트 상태가 일치하지 않는다. 이때 이 상황이 돈과 같은 중요한 문제일 경우, 치명적일 수 있다. 그래서 좋아요 버튼 같은 치명적이지 않는 부분만 적용하는 것이 좋다고 했다. 다만 현재 기능에서 장바구니 수량을 변경하는 부분은 적용해도 좋을지 고민되었다. 어찌보면 직접 돈과 연관되어 있어 낙관적 업데이트를 하지 말아야 하는 것 같고, 바로 결제가 되지 않으니 적용해도 좋을 것 같기도 했다.
결론은 적용했다. 이번 미션이 실제 서비스를 제작하는 것이 아니기 때문에 최대한 다양한 시도를 해보는 것이 중요하다고 생각이 들었다. 만약 실제 서비스에서 다음과 같은 상황이 오면 결제와 관련되어 있는 기능은 낙관적 업데이트를 적용하는 것이 좋지 않다고 정했다.
https://github.com/woowacourse/react-shopping-products/pull/59
그외 있었던 일
레벨 2에서의 마지막 밴드활동을 진행했다. 이번 곡은 윤하-혜성과 너드커넥션-우린 노래가 될까 를 연주했다. 3시간의 합주가 끝나고 회식을 진행하고 보드게임을 즐겼다. 마지막에는 한강에도 갔다.😆
레벨2 마지막 날 매일 한 코딩 테스트를 한 문제씩 푸는 스터디, 나무 심기 크루원들과 벌금을 소비하기 위해 회식을 진행했다. 회식전에 공포 방탈출도 진행했는데 즐거운 시간이였다.
