사용 기술

• ReactJS
• CSS
• 서울 열린데이터 광장 - 서울특별시 공공자전거 실시간 대여정보 API
• 네이버 지도 API - Geocoding, Reverse Geocoding

구현하지 못한 부분

상호명에 기반된 검색

보통 사람들은 상호명을 입력하여 검색을 하는데 네이버 지도 Geocoding API의 기능을 제대로 파악하지 못한 상태에서 API 기능을 추가하여 불편함을 초래했다. 그래서 Geocoding API의 기능대로 지번, 도로명, 우편번호를 통해서만 위도, 경도 좌표를 가져올 수 있다.

직관적인 UI

네이버 지도 API를 사용하면 지도 위에 경계를 표시하여 사용자들에게 보기 좋은 UI를 구현할 수 있다. 그런데 ReactJS로 구현하기로 결정하면서 React 환경에 적합한 네이버 지도 API 비공식 패키지인 react-naver-maps를 사용했다. 비공식 패키지였기 때문에 지속적인 업데이트 내역이 없었고, 문서 또한 내용이 부실했다. 물론, 내가 ReactJS의 작동 방법을 제대로 이해하고 있었다면 환경에 맞게 구현했을 수도 있지만, 너무 막히는 부분이 많았던지라 최대한 빨리 공식 문서의 예시에 나오는 순수 Javascript를 사용하는 것으로 계획을 변경하지 못한 것에 아쉬움이 남는다.

배포

현재 내가 찾은 정보로는 따릉이 API를 http로만 요청이 가능하다. 그래서 무료 배포 플랫폼인 Heroku나 Netlify에 배포를 하면 default로 https 연결이 설정되기 때문에 브라우저에서 아래와 같이 Mixed Content 에러가 발생한다. 물론, 크롬의 경우 사이트 설정 - 권한 - 안전하지 않은 콘텐츠 - 허용 설정을 하면 지금까지 만든 서비스를 이용할 수 있다. 하지만, 보편적으로 보안 취약점이 발생할 수 있다는 사실 때문에 배포를 하지 않았다.

또 다른 이유로는 이 프로젝트를 ReactJS만 이용해서 구현했는데, 실제로 API에 요청하는 코드도 ReactJS에서 구현했기 때문에 배포를 하면 내가 환경 변수로 사용 중인 private key들이 노출될 위험이 있다.

배운 점

개인 프로젝트였기 때문에 내가 만들어보고 싶었던 소소한 서비스를 구현할 수 있어서 좋았다. 그래도 계획 단계에서 내가 사용하려는 개발 도구와 API의 한계점을 자세히 알아보았다면 서비스의 기능을 더욱 구체화 할 수 있었음에 아쉬움이 남는다. 다음 프로젝트에서는 선택한 개발 도구로 서비스를 완벽히 구현할 수 있는지 미리 확인하고, 관련 패키지나 라이브러리가 안정적으로 구현되어 있는지 조사한 다음에 개발을 시작해야겠다. 아이디어에 한계를 두는 것이 아니라 개발 도구의 한계점을 명확히 알고 개발하는 것이다.
특히, 이번에는 ReactJS가 프론트엔드 라이브러리의 기능만 한다는 것을 명확히 알았다. 실제로 API와 통신하는 서비스를 구축하기 위해서는 보안, 코드 관리 측면에서 별도의 API 요청을 하는 웹 서버가 필요하다는 사실이다.