[패스트캠퍼스X야놀자] 프론트엔드 개발 부트캠프_미니프로젝트

이번에 패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프에서 숙박 예약 서비스 만들기라는 주제로

백엔드 부트캠프 수강생들과 함께 프로젝트를 진행하였습니다.

| 기능

• 사용자 위치 기준 숙소 추천, 인기 숙소 안내
• 회원가입, 로그인
• 숙소 타입, 장소, 추가옵션등 원하는 카테고리를 선택하여 숙소 조회
• 장바구니, 주문, 결제
• 결제 내역 확인, 숙소 찜하기

| 역할

이 프로젝트에서 저는 사이트의 장바구니 기능과

결제 완료 후 나오는 결제 완료 페이지를 담당하여 진행하였습니다.

| 링크

깃허브: https://github.com/Yanolza-Miniproject/frontend

배포: https://heynolja-mini-4.vercel.app/

| 장바구니 시연 영상

 

| 이슈

1. 목 데이터 문제

문제: msw를 사용하면서 백엔드 개발자와 함께 작성한 api명세에 적힌 데이터와 실제 배포되었을 때의 데이터가 약간 달라지면서 실제 api를 연동하면서 서비스가 잘 동작하지 않았던 이슈가 있었습니다.

 

해결: 백엔드 개발자와의 소통의 문제이기 때문에 이후 에는 데이터 문서화에 시간을 더 투자하고, 회의시간을 늘리면서 원활한 소통이 되도록 하였습니다.

 

2. 예상 구매 내역 표시 문제

문제: 체크박스를 선택할 때 체크박스에 표시된 아이템과 예상 구매 내역에 표시되는 아이템 목록이 다른 현상이 나타났습니다.

 

해결: 체크박스를 통해 선택한 아이템과 선택되었을 때 변화되는 스타일, 예상 구매 내역에 표시되는 아이템 모두 실제 장바구니 아이템 정보가 저장되는 데이터를 복사한 또 하나의 상태를 만들어 한번에 관리하며 해결하였습니다.

| 느낀 점

• 백엔드 개발자와 처음 협업해 보면서 프론트엔드, 백엔드 개발자가 같이 작성하는 API 문서에 대한 중요성이 크게 느껴졌습니다.
• 처음 사용해 보는 라이브러리를(jest, msw, react-query) 팀원과 같이 공유하며 빠르게 공부해 나아갈 수 있어서 매우 좋았습니다.
• 프론트엔드에서의 테스트의 중요성을 느꼈음에 좋았지만, 쓸모없거나 잘 동작하지 않는 테스트들이 많았고, 테스트를 억지로 통과시키려고 한 부분이 너무 많았습니다. 이러한 부분에서 아쉬움이 많이 컸고, 테스트에 관한 공부의 필요성이 크게 느껴졌습니다.