Skip to content

boostcampwm-2024/web09-DailyRoad

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

프로젝트 소개

오늘의 길은 사람들이 자신의 경험과 취향을 지도로 만들어 공유할 수 있는 플랫폼입니다.

맛집이나 여행지를 기록할 때 다양한 앱과 도구를 사용하는 대신,
이곳에서는 지도와 코스를 자유롭게 구성하고,다른 사람들과 공유하며 소통할 수 있습니다.

개인적인 기억과 감상을 담은 지도를 통해 새로운 발견을 하고,
일상의 영감을 얻어보세요!

🌈 소개 페이지를 구경해보세요!

📝 피드백을 남겨주세요!



핵심 기능


나만의 지도 공유하기

나만의 지도 공유하기

나만의 지도를 만들어 다른 사람과 공유할 수 있습니다.
다양한 경험과 추억을 기록하고 공유하세요.


나만의 지도에 장소 추가하기

나만의 지도에 장소 추가하기

나만의 장소를 지도에 추가할 수 있습니다.


나만의 코스 공유하기

나만의 코스 공유하기

자신만의 코스를 공유하거나, 공유된 코스를 탐색할 수 있습니다.



더 많은 경험을 보려면 여기로
더 자세히 보려면 제목을 클릭해 주세요!


검색 결과 비교

Elasticsearch를 도입해 검색 로직의 가중치를 조정하고 RDB와 동기화를 유지하여 검색 정확도를 개선했습니다.
이를 통해 동의어 처리와 오타 교정 기능을 통해 검색 신뢰도를 높였습니다.

싱글 노드 환경에서의 장애 상황에 대비해 SPOF 대처 로직을 추가했고,
그 과정에서 Fallback 처리 시간이 오래 걸리는 문제를 발견했습니다.
이를 해결하기 위해 헬스 체크를 도입하였고, 응답 시간을 97.86% 감소(약 47배 개선) 시키는 성과를 거두었습니다.


마커 클러스터링

지도 상 수많은 마커를 효과적으로 표현하기 위해 위해 클러스터링 라이브러리를 도입했습니다.
그 과정에서 클러스터 마커의 과도한 렌더링과 깜빡임 문제를 만났습니다.

라이브러리 코드를 분석해 비효율적인 렌더링 방식을 찾아내었고,
이를 커스텀하여 깜빡임 현상 해결은 물론이며,
900개 장소가 추가된 지도 기준 마커 렌더링 시간을 95.02% 감소(약 20배 개선) 시키는 성과를 거두었습니다.


kibana 로그 알림 스크린샷

로깅 라이브러리로는 Pino, 모니터링 스택으로는 ELK 를 사용했습니다.
Kibana와 Slack을 연동해 실시간 모니터링 시스템을 구축했습니다.
이를 통해 서버 장애 시 문제 파악이 빨라졌고, 운영 신뢰도를 향상시켰습니다.


테스트 컨테이너

모킹 없이 실제 환경과 유사한 조건에서 테스트를 수행했습니다.
컨테이너를 사용해 다양한 환경에서 안정적으로 테스트를 진행했으며,
이를 통해 리팩터링 및 버그 수정 시 점검이 용이해졌고, 코드 품질과 신뢰도가 향상되었습니다.


JS 라이브러리와 React의 결합 과정에서 높은 자유도로 인해
마커 관리 주체가 분산되는 문제를 겪었습니다.
이를 해결하기 위해 코드 작성 규칙을 정립해 마커 관리 체계를 통합하고, 사용성과 안정성을 개선했습니다.



시스템 아키텍처


아키텍처

기술 스택


도메인 기술 스택
공통 TypeScript Prettier ESLint
프론트엔드 Vite React Tailwind CSS React Query Zustand
백엔드 Node.js NestJS MySQL TypeORM Elasticsearch Kibana Logstash
배포 GitHub Actions Nginx Naver Cloud Platform
협업 도구 GitHub Notion Figma Slack


팀원 소개

J088_도원진 J151_안금장 J105_박민서 J270 _한동효
FE BE BE BE
🏷️ 바로가기 팀 Notion 위키