네이버지도 API - Geocoding 연결하기

요즘에는 여기저기 찾아보니까 오픈API를 통해 특정 서비스를 이용할 수 있는 채널들이 여럿 있는 것 같다.

대표적으로 네이버지도,카카오지도, 구글 맵 등 !

 

내가 네이버 지도API 중, Geocoding 을 이용하려는 이유는 이렇다.

 

* 문제점 & 니즈

  내가아는 맛집 리스트에 저장된 DB 정보를 네이버 지도에 표시하고 싶음 

 

* 네이버지도API 지도를 사용하기 위한 사전준비

  

1. 네이버지도API 예제코드 

https://navermaps.github.io/maps.js/docs/tutorial-digest.example.html

NAVER Maps API v3

 

2. 네이버지도API 사용을 위한 Cilent ID 발급 

https://www.ncloud.com/?language=ko-KR 

NAVER CLOUD PLATFORM

- 회원가입 및 로그인 (결제수단 등록해야 이용가능) 

  ※ 내가 사용하려는 Geocoding 서비스는 무료

- Application Service ▷ Maps 이용신청하기 

- 내가사용할 서비스(Geocoding) 및 web service URL 등록 

- YOUR_CLIENT_ID 발급 완료

 

이제 우리가 이용하려는 서비스를 발급받은 Client_ID 를 통해 이용할 수 있다.

 

웹 동작원리

위 그림에서 보여지는것과 마찬가지로 

 

내가 만든 MongoDB에 저장된 맛집 주소를 Flask서버를 통해 불러와서 Geocoding을 연결해보려고한다.

 

Mongo DB 정보 불러오기

첫번째로, Flask 서버를 만들어서 몽고DB로 부터 저장된 맛집정보를 불러오는 코드를 먼저 작성했다.

Find 형태로 몽고DB에 저장된 데이터를 불러올수도있지만 for문 형태의 반복문을 사용했고

반복문은 정말 자주 사용되는 개념이여서 따로 정리를 해두려고한다. 

 

Geocoding 연결코드

이부분에 대한 코드는 튜터님이 많은 도움을 주셨다! 진짜 도움이 없었으면 엄청 헤매다가 해결을 못할수도있겠다 생각이 들정도였다.... 아직은 자바스크립트 같은 코드들이 익숙하지않다보니 어려운것 같다.

 

처음에 몽고DB에서 맛집정보를 불러올때 X좌표,Y좌표 값도 같이 불러오게되어있는데

if not x or not y → 불러온 데이터에 X좌표,Y좌표값이 없다면 Geocoding 코드가 실행되도록 코드를 작성했다.

 

네이버지도API를 보면은 상세한 정보에 대해 확인은 가능하며, 간략하게 작성해두면 

headers 에 KEY-ID, KEY값을 보내고 requests 로 query에는 주소를 보내면  j.son 형태의 응답값을 받을 수 있다.

처음에는 이런 말들만 들어서는 정말 이해가 안되고 어떻게 코드를 작성해야될지 막막함이 밀려왔다...

요즘에는 이렇게 자기가 공부한 내용들을 작성해두신 분들이 많아서 찾아보고 배워야 될 것 같다!

 

이번에 이런 웹 서비스를 만들어보면서 느낀점은!

코드를 한번 쭉 전부다 작성하기보다는 하나하나 작성하면은 로그를 찍어서보면서 확인하는 습관이 중요하다!

(나중에 찾으려고하면은 어디가 잘못된건지 알수가없다)

 

이떄 중요한 코드가 하나더 있다!

db.mymatjip.update_one({'_id': id}, {'$set': {'x' : x, 'y': y}})

주소를 좌표(x,y)로 변환한 값을 몽고DB에 업데이트를 해야한다! (나중에 지도에 마커로 표시해주기 위함) 

 

 

마지막 작성한 코드는, 튜터님이 알려주신 내용이며 어떠한 특별이유로 좌표로 변환되지 않을 수 도있다.

그런경우를 대비하여 다시한번 반복하여 DB에 저장될 수 있도록 작성하였다! 

 

아직은 내가 이해한 내용이 맞는지도 모르겠지만 ㅠㅠ 조금 더 활용해보면서 배워봐야할 것 같다! 

요즘에는 마음만 먹으면 개발을 할 수 있는환경이라는 말이 응용해볼 수 있는 채널들이 많이 생겨서 그런것 같다.