Completed 🎉
- 성능 개선
- 메모리 누수를 확인해서 지도위 중복되는 customOverlay 제거
- 자료구조 Map을 이용해서 객체로 관리되는 데이터 변경
- 시간복잡도 O(N^2) => O(N)으로 개선
- useCallback 사용이 필요한 곳에 도입
- UX 개선
- hover시 신호등 위치 정보 나타냄
- modal창 List 클릭하면 해당 신호등 위치로 지도 이동
- List 거리 가까운순으로 정렬해서 나타냄
- 데이터 받아오지 못할 경우 키치한 loading indicator로 표시
- 유저가 직접 refetch할 수 있도록 버튼 구현
성능 개선 과정
지도 그리기
참고자료
해당 아티클을 읽고 메모리 누수를 확인해봤다.
불필요한 object 정보들을 제거하지 못했고, 신호가 변경될때 이전 신호의 잔상이 있는 것을 개선하려고 했는데, 여러번 한 위치에 겹쳐서 customOverlay를 그리고 있었다.
이를 확인하고 처음에 지도를 움직이는 방식에서와 주변 신호를 받아오는 방식을 나눠서 data를 받아왔는데, 이를 한 곳에서 받아오는 로직으로 수정했다. (현재 모드가 무엇이냐에 따라서 data를 받아올때 위치정보를 mapPosition인지, myPosition인지로 나누어진다.)
이 후 placeSignals도 한곳에서만 지도위에 그리도록 로직을 수정했다.
(같은 위치에서의 비교가 아니라서 정확하진 않지만...)
실제 사용할때 느끼기에도 더 부드러워지고 잔상도 없어졌다.
전역 상태와 상태관리도 정리하고 지도 위에 customOverlay를 그리는 로직을 분리해두어서 유지보수하기도 편해졌다.
자료구조 개선
객체로 관리하는 데이터가 있었는데, 객체가 데이터의 순서를 보장해주지 못해서 따로 sort를 해주었다.
Map이 데이터의 저장 순서를 보장해준다는 점과 자주 데이터를 넣고 제거할때 객체보다 더 성능이 좋다는 점을 고려해서 Map으로 데이터를 저장하도록 변경했다.
O(NlogN)의 시간복잡도를 가졌던 distance range를 나타내는 부분을 O(N)의 시간복잡도로 개선했다.
이외...
전역 상태 및 지역 상태관리 정리
useCallback 적절한 사용으로 성능 개선
React memoization을 통해서 성능 개선할 부분을 고민햇다.
UX 개선
걷다.가 유저가 사용하기에 너무 적은 정보량을 가지고 있는 것 같다는 피드백을 받았다.
미니멀한 디자인을 좋아해서 최소한의 요소로 정보를 나타내려고 했고, 지도라는 특성상 너무 많은 정보를 제공하면 오히려 혼란이 생길 것이라고 처음에 판단했다.
그러나 면접때 사용했던 분의 의견을 받아드려서 조금 더 직관적이고 많은 정보를 제공할 수 있도록 고민했다.
- hover시에 신호 위치에 대한 정보 제공
위치 정보 이외에 시간이나 동서남북과 같은 정확한 위치정보를 제공하면 불필요하게 많은 정보이고 아래에서 확인할 수 있어서 위치 정보만 제공했다.
- List 클릭시 해당 위치로 지도 이동
아래 모달로 나타나는 List에서 row를 클릭했을 때 해당 위치로 지도 중심을 이동하도록 개선했다. - map 이동 모드 vs 내 주변 정보 모드
기존에도 존재했지만 유저가 판단할 수 없었다.
List의 header에 나타나는 range 변경을 통해서 명확하게 표현했다.
map 이동 모드시에는 주변 정보 Header만
내 주변 정보 모드시에는 0.5km별 거리와 같이 나타냈다. - Loading indicator 구현
공공 데이터의 불안정 혹은 지역에 따라 데이터를 못 받아올때가 있다.
초기에는 아무런 표시도 하지 않았지만 어떤 상황인지 명확하게 알려주는 게 좋은 것 같아서 Loading Indicator를 나타내려고 했다.
처음엔 일반적인 loading indicator를 표시하려고 했지만 문득, 걷다라는 앱의 이름과 잘 맞게 걸어다니는 사람 loading indicator를 구현해서 재미를 더했다.
- refetch 버튼 구현
네이버 지도에서 버스 정보를 받아오는 버튼을 참고해서 구현했다.
유저가 직접 정보를 업데이트할 수 있도록 refetch 버튼을 만들어서 신호등 정보를 업데이트할 수 있도록 변경했다.
회고 📔
꽤 오랜만에 업데이트하는 것 같다.
면접을 보면서 받았던 피드백이 트리거가 된 것 같다.
계속 수정해야지 하면서 다른일들로 바빴고, 면접을 보면서 잠시 집중을 못했던 시기에 몰입해서 개선사항들을 구현했다.
확실히 최근 봤던 아티클이나 타입스크립트 공부했던 것들이 도움이 많이 됐고, 이전에 잘 모르고 무작정 개발해서 잘 맞지 않던 것들을 많이 수정하고 성능이나 UX도 많이 개선한 것 같다.
현재의 최종 목표인 백엔드 서버에서 머신러닝을 이용해서 신호계산된 정보를 줄 수 있는 서버를 구축해보자.
서버의 불안정으로 loading indicator가 나오지 않도록...
loading indicator 구현도 재미있었고 다시 몰입해서 업데이트할 수 있는 좋은 경험이었다.
계속 개선 시켜서 많은 사람들이 사용할 수 있도록 만들어보자.
