아웃소싱 팀프로젝트(Park FInder) 최종 발표

안녕하세요. 오늘은 아웃소싱 팀프로젝트 발표날입니다.

 

저희팀은 "Park Finder"라는 주차장을 쉽고 빠르게 찾을 수 있는 서비스를 만들었습니다. 팀프로젝트에서 만들게 된 "Park Finder"서비스를 블로그에 담아보겠습니다!

 

 

 

 

 

프로젝트 목적 📝

카카오 API를 활용하여 사용자에게 가장 가까운 주차장을 실시간으로 제공하고, 지도 상에 정확한 위치를 표시하여 사용자 편의를 극대화하는 것을 목표로 했습니다. 또한, 빠른 검색 속도와 직관적인 UI, 최신 주차장 정보 제공을 통해 기존 지도 서비스와 차별화된 경험을 제공합니다. 이를 통해 사용자는 실시간 위치 기반으로 주차장을 쉽게 검색하고 정보를 확인할 수 있습니다!

 

 

 

 

 

프로젝트 팀 구성 및 역할 👥

• 조아영 (팀장): 주차장 지도 기능(카카오 API 사용), 주차장 상세내역, 검색기능
• 노용철 (팀원): 즐겨찾기 기능
• 홍승우 (팀원): 마이페이지 기능
• 장세희 (팀원): 로그인 / 회원 가입 기능
• 최지민 (팀원): 상세 내역 댓글 CRUD 기능
• 이재상 (튜터): SA 및 주제선정 피드백, 프로젝트 기술 질의 응답

 

 

 

 

 

기술 및 구현 방법 📲

• 백엔드 시스템: json-server를 활용하여 간단한 REST API 서버 구축, 실시간 주차장 데이터 관리를 위해 서버 솔루션으로 선택
• 클라이언트 상태 관리: Zustand는 경량 상태 관리 라이브러리로, 상태 업데이트 및 상태 유지에 있어 매우 효율적이며 직관적인 코드를 작성할 수 있었음
• 서버 상태 관리: Tanstack Query를 통해 비동기 서버 데이터(주차장 정보 등)를 캐싱하고 관리함, 이를 통해 서버 상태의 유지 및 자동 업데이트 기능을 손쉽게 구현 가능
• 라우팅 처리: React Router Dom의 중첩 라우팅을 활용하여 로그인 / 회원가입, 마이페이지 등 다양한 페이지로의 라우팅을 처리했음, useNavigate와 useParams 같은 주요 기능을 사용하여 사용자 경험 개선
• 댓글 기능: CRUD를 통해 댓글 생성, 수정, 삭제를 구현하였으며 사용자별 댓글 관리가 가능하도록 함

 

 

 

 

 

핵심 기능 ❤️‍🔥

• 로그인 / 회원가입 기능: JWT 인증을 통해 사용자의 로그인 / 회원가입 기능을 구현하였으며, 입력한 데이터에 대한 유효성 검사도 포함
• 마이페이지: 사용자의 주차장 즐겨찾기 및 프로필 정
• 보를 관리할 수 있게 구현
• 즐겨찾기 기능: 사용자들이 주차장을 즐겨찾기에 추가할 수 있도록 구현하여 개인화된 서비스 제공

 

 

 

 

 

 

기술 선택 근거 🛠️

• Tailwind CSS: CSS 작성의 간결성과 유지보수의 용이성을 고려하여 선택, CSS 클래스를 한 곳에서 관리할 필요없이 빠르게 UI 요소를 디자인할 수 있어 개발 속도를 높일 수 있다는 장점을 가지고 있음
• Zustand와 Tanstack Query: 간단한 전역 상태 관리를 위해 Zustand, 서버 상태 관리에서는 데이터 캐싱 및 자동 업데이트 기능이 뛰어난 Tanstack Query를 사용함, 이는 각 상태 관리 라이브러리의 성능 최적화 및 유지보수 용이성을 고려한 선택이었음
• Kakao API: 주차장 정보의 신뢰성과 정확도를 위해 한국에서 많이 사용되는 Kakao API를 선택함, 지도 상에 마커를 빠르게 표시하고, 사용자의 현재 위치를 기준으로 주차장을 표시할 수 있었음

 

 

 

 

 

 

# 시연 영상 📹

Park Finder 시연 영상

 

 

 

 

 

 

 

# 깃허브 주소 🏠

https://github.com/Sehee-Jang/ParkFinder

GitHub - Sehee-Jang/ParkFinder: 카카오 API 사용한 주차장을 빠르고 정확하게 찾을 수 있는 서비스