얼마전에 만들었던 간단한 토이프로젝트 회고입니다.
현관 앞에 수북이 쌓인 폐의약품을 몇 번씩이나 버리려고 검색했지만, 대전에는 서울맵처럼 삐까뻔쩍한 사이트가 없어서 서울 사람들이 부러워졌습니다.
대전의 정보들은 그저 주소들이 글로 나열되어 있을 뿐...
이런 글들은 무엇보다 어디가 가장 가까운지 한눈에 파악하기 힘들다는 점이 가장 아쉬웠습니다.
마음 먹었을 때 가야하는 엄청난 의지가 필요한 일인데 말입니다.
목표
- 우리 동네에서 가장 가까운 수거함 위치를 눈으로 확인할 수 있게 만들자
- 필요한 정보만 빠르게 습득할 수 있는 간단한 기능과 UI를 구성하자
- 당장 약을 버려야 하니 가장 중요한 기능 위주로 단기간에 사이트를 완성하여 배포하자
- 비용이 가능한 한 들어가지 않도록 만들자
네이버 지도API의 공식문서가 잘 되어있는 편이기 때문에 금방 만들 수 있을 것이라고 생각했습니다. 그래도 예제를 참고는 하되 어떤 방식으로 돌아가는지 이해하고자 문서를 읽고 공부하는 것이 중요하다고 생각했기 때문에 생각했던 것보다는 완성하는 데에 시간이 걸렸던 것 같습니다.
고민한 점들
1. 무늬만 리액트인 바닐라 자바스크립트
기능을 빠르게 구현하는 데에 우선하여 코드를 짜다보니 문서의 예제를 많이 참고하게 되었습니다.
중간에 이거...리액트로 만들 필요가 있나?라는 생각이 들었지만 멈추기엔 늦었습니다. 나는야 폭주기관차
리액트의 장점을 크게 살리지 못했기 때문에 오버엔지니어링이 된 느낌입니다.
처음부터 바닐라로 프로젝트를 만들고 리액트로 바꿔가는 과정을 거치면 더 좋은 공부가 됐을지도 모르겠습니다.
2. 데이터를 어떻게 저장할 것인가?
수거함 주소에 대한 공공데이터API는 대략 1년 주기로 업데이트 되는 데이터입니다.
불러오는 비용이 무료이기 때문에 따로 데이터베이스를 둘 필요 없이 필요한 주소들을 호출할 때마다 위도, 경도로 변환하면 되겠다는 생각에 신이 나 있었습니다.
이 계획은 바로 휴지조각이 되어버리지만요. 바로 아래에 나올 3번의 돈 걱정입니다.
3. API 사용 비용
네이버 지도 API에서 제공하는 Geocoder는 주소를 좌표로 바꿔주지만, 1회에 한 주소만 바꿀 수 있고, 무료 사용량을 넘어가면 회당 비용이 매겨집니다.
2일 동안 저의 Geocoder의 사용량이 4천회를 넘어가고, 비용 걱정에 안절부절하니 전략을 바꿔야겠다는 생각이 들었습니다.
사용자가 클릭을 한 번 할때마다 200회 이상 Geocoder 호출이 일어나는데, 악의적으로 불필요한 클릭을 한다면 월별 무료 사용량인 300만회를 금세 초과해버릴 것입니다.
주소는 자주 바뀌지 않는 정적인 데이터이고 API키처럼 보안성이 중요한 데이터가 아니라는 생각을 했기 때문에 파일에 미리 Gdeocoder로 변환해놓은 좌표와 장소 정보를 입력하고 데이터베이스처럼 사용했습니다.
4. 한글 변수명 사용하기
공공데이터 API의 데이터 객체의 속성이 한글로 되어 있는 것을 보고 든 생각입니다. 지역명인 '서구'나 '도로명주소' 같이 데이터의 고유한 이름은 한글 변수로 써보기로 했습니다.
변수명을 짓는 시간을 확실하게 아끼고, 고유명사를 영어로 읽는 피로감 또한 줄어서 재미있는 경험이었습니다.
개선하고 싶은 점
- 내 위치를 받아오고, 그 위치 기반으로 주변의 수거함을 찾아오는 기능을 추가하기
- 지도의 마커가 많아질 때 누락되는 정보 개선
- 좀더 리액트스러운 코드로 리팩토링 하기
- 느린 네트워크 사용자를 고려하여 로딩 애니메이션을 적절히 추가해 사용자 경험 향상시키기
- 사용자 피드백 받아서 버그 해결하기
재미 반 공부 반으로 시작한 리액트 프로젝트이지만 자바스크립트 자체의 작동 방식에 대해 더 깊게 학습하게 되었습니다.
만들어 놓고 보니 아쉬운 점이 많아서 1번의 내위치 기능을 만들기 시작했는데, 내위치 주변의 마커를 어떤 방식으로 가져올지 고민이 됩니다.
개선해야할 사항에 대한 우선순위도 정했으니 리팩토링도 차근차근 진행해보려고 합니다. 참 재밌게 했고 만든지 얼마 안됐는데 벌써 레거시 코드 같아요.
