패캠X야놀자 프론트엔드 부트캠프 미니프로젝트

과제

처음으로 백엔드 부트캠프 분들과 협업하여 토이 프로젝트를 진행하게 되었다.

주제는 OpenAPI를 이용한 숙박예약 사이트로, 패스트캠퍼스 측에서 제공한 RFP에 기반하여 API를 설계하고 노션 및 피그마를 공유, 데일리 스크럼을 통해 협업 환경을 만들었다.

시연 영상

유저플로우

디자인 및 개발을 시작하기 전, 위와 같이 숙박 예약 프로세스를 유저플로우로 만들어 이를 기반으로 작업을 분배하고 와이어 프레임을 만들 수 있었다.

피그마 디자인

피그마에선 유저플로우를 기반으로 디자인을 만들고, 백엔드와 공유하여 API 명세 작업시 모호한 점을 없애기 위해 노력하였다.

레슨 런

React Query와 Intersection observer API를 통한 무한 스크롤 기능

• useInfiniteQuery를 이용해 데이터를 캐싱하여 페이지 이동시에도 검색 기록을 유지하여 더 좋은 사용자 경험 제공
• Intersection observer API를 이용한 커스텀 훅을 통해 다음 페이지가 존재할 경우 데이터 페칭
• skeleton ui를 적용하여 데이터 페칭 중일때 UX 개선
• 무한스크롤 상세 스터디 정리 글

playwright를 이용한 E2E 테스트 경험

• 모든 경우의 수를 가정하고 진행한 것은 아니지만, 초반에 작성한 유저 플로우에 기반하여 위의 유저 플로우를 증명할 수 있도록 테스트 코드를 작성

후기

• 백엔드 분들과의 협업을 통해 FE-BE간 협업 규칙과 데일리 스크럼의 중요성 이해
• 리액트 쿼리를 처음 적용해 보았는데, 이를 이용한 캐싱 및 로딩 상태일 때 스켈레톤 디자인 등 유저 경험 및 UI에 대한 고민을 코드로 해결