thumbnail

Let's


개발 기간
2023.12.26 ~ 2024.01.29 (약 5주)
개발 인원
12명 (FE: 5, BE: 4, UI/UX: 1, PM: 2)
담당 역할
프론트엔드
사용 기술
Next.jsTypescriptZustandTanStackQueryTailwindCSSMSW
프로젝트 설명

사용자가 테마 및 해시태그 키워드를 활용하여 패키지 여행 상품을 검색하고, 여행 상품의 일정, 가격, 장소 등 상세 정보를 쉽게 확인할 수 있게 하며, 유사한 키워드를 가진 다른 여행 상품과의 직접 비교 기능을 제공하여 사용자가 자신의 여행 목적과 선호도에 가장 잘 맞는 패키지를 효율적으로 선택할 수 있도록 하는 서비스 입니다.

핵심 기능 및 성과

로딩 시간 체감 단축

  • 페이지 이동에 대한 즉각적인 피드백 제공을 통해 로딩 시간 체감 단축

이전 페이지 스크롤 복원

  • 스크롤 위치를 저장하여 사용자가 페이지를 되돌아왔을 때 기존 위치로 스크롤이 복원되도록 구현

사용자 이동 경로 개선

  • 로그인 또는 회원가입 페이지에 접근 시점을 확인해 원래 페이지로 리다이렉트 되도록 구현

서버 사이드 렌더링 성능 향상

  • React Query의 prefetch 기능을 활용하여 서버 사이드 렌더링(SSR)을 개선

자체 캘린더 구현

  • 디자인 반영을 위한 커스텀 캘린더 기능 직접 구현

회고

이번 프로젝트에서 SSR을 통한 SEO 최적화를 목표로, 모든 팀원이 처음 접하는 Next.js 프레임워크를 채택하여 진행했습니다. 이 결정은 프로젝트 기간이 짧음에도, 초기 학습 곡선의 어려움을 극복하며 팀 전체의 Next.js에 대한 깊은 이해를 이끌어냈습니다. 이 과정은 단순히 새로운 기술 스택을 익히는 것 이상의 가치를 창출했으며, 팀원 각자에게 Next.js를 활용한 프로젝트 구현에 대한 중요한 경험을 제공했습니다. 프로젝트를 진행하며, 협업 규칙과 코딩 컨벤션에서 엄격함보다는 유연성을 선택했습니다. 이는 팀원들의 다양한 성향과 프로젝트의 일정을 고려한 결정이었습니다. 결과적으로, 이러한 접근은 프로젝트의 완성도를 높이는 데 크게 기여했으며, 팀 간의 원활한 협력과 커뮤니케이션을 촉진시켰습니다. 이를 통해, 프로젝트 목표 달성을 위한 팀워크의 중요성과 유연한 작업 환경 구축의 가치를 다시 한번 확인할 수 있었습니다. 또한, 이번 프로젝트는 디자이너, PM 과 함께 다양한 역할의 전문가들과의 첫 협업 기회였습니다. 이 과정에서 개발자로서 단순히 코드 작성에만 집중하는 것이 아니라, 디자인과 기획 단계에 적극 참여하고 의견을 나누며 프로젝트의 방향성에 기여하는 것의 중요성을 깨달았습니다. 이는 프로젝트가 보다 통합적이고 조화로운 방향으로 전진하는 데 필수적이며, 최종 제품의 품질과 사용자 경험을 향상시키는 데 중요한 역할을 한다는 것을 이해하였습니다.

아키텍처

architecture

구현 이미지

Let's screenshot
Let's screenshot
Let's screenshot
Let's screenshot
Let's screenshot
Let's screenshot