주요 개발 이슈

1. 매물 정보 조회 지연

[문제]

<aside>

지도에서 매물 정보를 조회할 때 사용자가 설정한 필터에 따라 최대 32만 건의 데이터를 조회해야 하므로 요청 처리 시간이 길어지는 문제가 있었음

</aside>

[해결 방안]

<aside>

• 쿼리 최적화:
  • 위도와 경도 인덱스를 추가하고, 불필요한 데이터 조회를 줄이는 등 쿼리 구조를 개선하여처리 속도를 높임
• DB 파티셔닝:
  • 데이터베이스를 자치구에 따라 파티셔닝하여 분산 저장하고 조회할 수 있게 함
  • 이를 통해 지도 범위 내에 들어온 자치구 데이터를 먼저 가져온 뒤 연산을 처리하여 효율성을 높임 </aside>

2. 위치 변경으로 인한 지도의 잦은 이벤트 발생 문제

[문제]

<aside>

• viewport 사이즈가 변경될 때 지도의 가로 길이가 변경되면서, 지도의 idle(지도를 이동시키거나 줌 변경할 때 발생하는 이벤트)이 트리거되어 서버에 새로운 매물 요청을 초당 수십번씩 보내게 됨
• 잦은 위치 변경시 매번 매물 및 현주소를 요청하여 네트워크 부하가 발생함 </aside>

[해결 방안]

<aside>

• lodash 라이브러리의 debounce 메서드를 활용하여, 자주 실행되는 함수들의 초당 실행건수를 제한함
• leading 및 trailing 요청을 보내어 응답이 늦게 오거나 정보를 놓치는 상황을 방지함 </aside>

3. 카카오 맵 API 기능 커스텀

[문제]

<aside>

• 카카오맵 API를 통해 편의시설을 지도에 나타냄
• 각 편의시설 클릭 시 해당 시설의 정보를 보여주도록 하였으나, 이미 클릭한 시설도 클릭할 때마다 정보창이 쌓였고, 해당 정보창을 지우는 기능도 카카오맵 API에 내장되어있지 않았음 </aside>

[해결 방안]

<aside>

• 편의 시설 클릭시 생성하고 있던 컴포넌트를 useRef 훅을 통해 추적함
• 지도의 빈 화면 클릭시 useRef로 기억하고 있던 컴포넌트를 지우는 이벤트를 지도 객체에 달아 기존 창을 지울 수 있도록 함
• 새로운 편의시설을 클릭할 때 마다 기존 창을 닫는 로직을 추가하여, 최대 한가지의 시설 정보를 확인할 수 있도록 하여 UX를 향상시킴 </aside>