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