Skip to content
Soap edited this page Dec 3, 2024 · 38 revisions

오늘의 길 🚗

나만의 지도와 코스를 만들고 친구와 공유해 보세요!

프로젝트 소개

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

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

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



핵심 경험

더 자세히 보려면 제목을 클릭해 주세요!


검색 결과 비교

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

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


마커 클러스터링

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

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


로그

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


테스트 컨테이너

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


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


관련 이미지

저희 팀은 프로젝트 초기 단계에서 CI/CD 파이프라인을 구축했습니다.
Github Actions를 이용해 변경 사항을 감지해 린트, 테스트, 빌드 검사를 수행하여 코드 품질과 신뢰도를 유지합니다.

Naver Cloud Platform을 이용해 Docker 기반으로 NestJS 백엔드와 React 프론트엔드를 배포하고,
Nginx를 통해 리버스 프록시와 HTTPS 설정을 완료했습니다.
이러한 자동화로 개발 생산성을 높이고 안정적인 배포 환경을 확보했습니다.


관련 이미지

기존의 정수형 저장 + PUT 방식은 데이터가 많아질 수록 성능 저하가 눈에 띄게 일어났습니다.
이를 개선하기 위해 네 가지 방식을 다양한 조건에서 테스트해 보았고,
그 결과 80개 아이템 기준 81.48% 가량 처리 시간 감소, 평균 1100ms의 속도 개선을 달성했습니다.


오늘의 길

핵심 경험

장소 검색 기능 개선
마커 클러스터링
테스트 코드
로그 모니터링 시스템
React 컴포넌트로 구글 지도 요소 관리하기
CI/CD 파이프라인
코스 아이템 순서 수정 방식 개선

개발 문서

팀 문화

기록 모음

🌤️ 데일리 스크럼
📑 회의록
🚸 멘토링 일지
🏖️ 그룹 회고
Clone this wiki locally