야놀자X패스트캠퍼스 부트캠프 미니 프로젝트 회고

숙박 예약 사이트

트릴리언

핵심 기술 스택

■ React (Vite) + TypeScript
■ styled-components
■ react-error-boundary
■ @tanstack/react-query: v5
■ recoil
■ msw

담당

■ 헤더 UI
■ 결제 페이지 UI 및 로직

아쉬운 점

• 백엔드와 인터페이스를 미리 맞추지 않고 작업을 진행
  • msw로 api가 완성되기 전에 미리 코드를 짜놓고 높은 DX를 기대했으나, 추후 인터페이스를 모두 수정해야 하는 상황이 발생하면서 msw의 의미가 많이 퇴색 되었다.
• Suspense와 error boundary를 전체적으로 도입하지 못했다
  • 기존에는 Suspense를 알지 못해서 if statement로 로딩과 에러를 컴포넌트 내부에서 구분했는데 추후에 알고나서 고치려고 하니, 내 것만 고친다고 해결될 문제가 아니었고, 내가 만든 코드도 모두 수정하기 쉽지 않았다.
• 오류 수정 및 코드 리팩토링을 제대로 하지 못했다
  • 특히 이미지 처리를 제대로 하지 못했는데, 작은 썸네일만 보여지면 되는 부분에 고화질 이미지를 다운 받는 상황을 계속해서 연출하게 되었다. 이는 추후에 꼭 수정하고 싶은 부분이다.
  • 결제 과정에서 똑같은 숙소를 두 개 예약할 수 있는 오류를 발견했으나 고치지 못했다.
• recoil의 이점을 제대로 살리지 못했다
  • selector 등 리코일의 특징이나 기술을 제대로 사용하지 못한 것 같아서 아쉽다.

다음에 해보고 싶은 것

1. Next.js로 프로젝트 해보기
2. 대용량 이미지 처리 최적화
3. suspense 및 error boundary 도입
4. 애니메이션을 활용한 UIUX 개선
5. 정교한 코드 리팩토링