thumbnail

Hey 놀자


개발 기간
2023.11.20 ~ 2023.11.30 (약 2주)
개발 인원
2명 (FE: 1, BE: 1)
담당 역할
프론트엔드
사용 기술
ReactTypescriptVite.jsTanStackQueryRecoilJestMSW
프로젝트 설명

사용자가 지역, 숙소 유형 (호텔, 펜션, 한옥 등), 그리고 추가 옵션(주차 가능, 픽업 서비스, 조리 가능 등)을 기준으로 원하는 숙소를 검색하고 예약할 수 있는 서비스 입니다.

핵심 기능 및 성과

인증 요구 사항의 통합 관리

  • Axios 인스턴스를 활용한 사용자 인증 공통 처리

장바구니 인터페이스 개선

  • position: sticky를 활용한 예상 구매 내역 UI 고정

반응형 디자인 구현

  • Media Query를 활용한 반응형 UI 구현

사용자 맞춤 서비스 제공을 위한 위치 정보 활용

  • Geolocation API 기반 맞춤형 숙소 추천 기능 구현

회고

이번 프로젝트를 통해, 저는 처음으로 테스트 코드 작성에 도전했습니다. 이 과정에서, 필요하지 않거나 중요하지 않은 테스트 코드를 과도하게 작성하는 문제에 직면했습니다. 이는 제게 테스트 코드 작성의 필요성과 효율성에 대해 다시 한번 심도 깊게 고민할 기회를 제공했습니다. 앞으로 프론트엔드 개발 과정에서 정말 필요한 테스트 케이스를 식별하고, 효율적인 테스트 코드를 작성하는 능력을 개발하는 것이 목표입니다. 이 경험은 프론트엔드 개발에서 테스트 코드 작성의 중요성을 더욱 명확히 이해하고, 테스트가 필요한 상황을 보다 정확히 파악하는 데 도움이 될 것입니다. 또한, 이번 프로젝트는 백엔드 개발자와의 첫 협업 경험이기도 했습니다. 이 과정에서 프론트엔드와 백엔드 개발을 병렬적으로, 그리고 효율적으로 진행하기 위한 다양한 고민과 노력을 기울였습니다. 특히, 깔끔하고 정돈된 문서화의 중요성을 인식하고, 이를 위해 노션을 적극 활용했습니다. 또한, MSW(Mock Service Worker)를 통한 API 모킹을 활용하여 프론트엔드와 백엔드 간의 원활한 병렬 개발을 가능하게 했습니다. 이러한 접근은 프로젝트의 효율성을 높이고, 개발 과정 중 발생할 수 있는 잠재적 문제를 사전에 방지하는 데 큰 도움이 되었습니다. 이번 프로젝트를 통해 얻은 깊은 교훈과 경험은 제 개발 실력을 한 단계 더 성장시키는 계기가 되었습니다. 테스트 코드의 중요성에 대한 깊은 이해뿐만 아니라, 다양한 역할과의 협업 과정에서 효과적인 커뮤니케이션과 문서화의 중요성을 체감했습니다. 이러한 경험은 앞으로 제가 참여할 모든 프로젝트에서 더 나은 결과를 도출하는 데 중요한 역할을 할 것입니다.

아키텍처

architecture

구현 이미지

Hey 놀자 screenshot
Hey 놀자 screenshot
Hey 놀자 screenshot