[네이버 지도 API] 지도 띄우기, 마크 찍기

지역 분석을 위해 네이버 지도를 사용해야한다. 구글, 카카오 지도에서 제공하는 API도 있지만, 난 굳이 네이버 지도 API를 사용해야했다

먼저, NCP에 가서 회원가입 후 어플리케이션을 하나 생성한다.
어플리케이션에서 사용할 서비스로 Web Dynamic Map을 설정한다. 로컬 작업이 우선이었기 때문에 허용 가능한 Web Service URL에는 로컬 url을 적용하면 된다. 그리고 API 호출할 때 client id랑 Client Secret 정보를 사용해야한다.

• 로컬 URL 설정에서는 꼭 127.0.0.1로 해야한다.
  - localhost 랑 VPN에 연결된 ip 주소로 혹시 설정을 해놨다가 두 url 다 매치되지 않아서 API 호출 과정 중 계속 에러가 떨어져서 한참 고생했다.
  

제공하는 네이버 지도 API 중에서 Web Dynamic Map이 필요했다.일단 지도를 띄워야하니까. 이 API는 지도를 띄우고 그 위에 마크를 찍을 수 있는 기능을 제공한다.

나는 리액트로 현재 프론트를 개발하고 있어서, 혹시 리액트 네이버 지도 라이브러리가 있는 지 확인했더니 역시나 있었다.

이 라이브러리로 당장 필요한 지도를 띄우고 마크를 찍을 수 있는 기능까지 구현을 했다.

<RenderAfterNavermapsLoaded  ncpClientId='클라이언트 ID'>
                        <NaverMap
                            mapDivId={'maps-getting-started-uncontrolled'}
                            className={"map-style"}
                            defaultCenter={{ lat: 36.3595704, lng: 127.105399 }}
                            defaultZoom={7}>
                            {
                                regionData.map((obj) => {
                                    return (
                                        <div>
                                            <Marker position={obj.coordinate} onClick={(e) => this.onMarkClick(obj.momentId)}></Marker>
                                        </div>
                                    )
                                })
                            }
                        </NaverMap>
                    </RenderAfterNavermapsLoaded>

나같은 경우, Marker에 넣을 데이터를 또 백엔드 API로 호출해서 받아야와야하기 때문에 개수를 특정할 수 없기에 저렇게 맵형태로 마크를 쭉쭉 찍어냈다. (그리고 마크를 클릭하면 해당 마크에 대한 데이터를 보여주는 Modal을 하나 만들어놨다. 여기 코드에서는 제거.하지만 마크 클릭시 이벤트를 줄 수 있다는 메세지 )

그런데 여기까지는 진짜 해피해피한 과정이었다.
이제 다음 작업은 좌표의 위도, 경도 값을 가지고 그 곳의 행정동 정보 (도, 시 , 구, 동 등)를 알아내는 것이다.