프로그래밍/개발기록

리액트에서 네이버 맵 api 서비스 사용하기 간단정리

콘파냐 2020. 10. 22. 18:23

새로운 프로젝트에 맵 서비스를 사용하게되어 간단히 정리한다.

맵 서비스는 3가지(카카오, 네이버, 구글) 중 하나를 사용한다.

1. 이 서비스들은 최근 사용량의 증가로 지속적으로 업데이트되어 정책도 자주 바뀌는 것 같다.

2. 대량 서비스를 염두해 두지 않으면 어느 서비스를 사용해도 괜찮다 생각된다. 그러나 대량 서비스라면 구글은 제외한다. 무료 한도가 가장 적기 때문이다. 

3. 얼핏 보면 카카오가 네이버 보다는 한도가 더 많은 듯 보이지만 네이버로 선택하였다. 이유는 docs를 봤을 때 어렵지 않을 것 같아서 이다.

리액트 개발을 위한 패키지와 docs도 있어서 우선은 네이버 맵을 선택한다.

4. 참고로 네이버 api는 최근 네이버 클라우드 플랫폼으로 이동되어 네이버 클라우트에 새롭게 가입을 하여야 한다.

아마도 과금 정책을 위해 서비스를 이동시킨듯 보인다. 길찾기(directions) 서비스의 경우 건당 과금이 꽤 나오는 듯 보인다. 길찾기 알고리즘이 클라우드 cpu 리소스를 꽤 사용하기 때문으로 보인다. 

5. 네이버 클라우드에 가입을 했으면 Maps 서비스를 추가하고 ClientID를 발급받아 클라이언트 페이지에 사용하면 된다. 메뉴가 깔끔하게 정리되어 있기 때문에 어렵지 않다.

기타.

기본 코드로 네이버 map api를 불러온 화면

5번에서 시이트주소 또는 안드로이드, IOS 앱 이름을 등록해야하지만 개발시 로컬작업을 하게 된다면 file:///경로 를 등록하여 위와같이 호출할 수도 있다. 지도가 불러와지지 않는다면 잠시후 다시 시도해보자.

그런데 네이버 맵 리액트 docs에 있는 예제에 네이버 맵 호출이 제대로 안되었고 업데이트가 한동안 안되어 있는게 좀 걸리긴 하지만, 여차하면 카카오로 변경하면 된다.

찾아보니 카카오 맵 역시 리액트에서 어렵지 않게 사용할 수 있는 듯 보인다.

방금 생각한 것인데 카카오와 네이버 두 가지 버전의 프로토 타입을 만들어 보는 것이 좋을 듯 싶다.

반응형