[TIL] React로 네이버 지도 API 가져오기

네이버 맵 가입하기

https://www.ncloud.com/
일단 위에 주소를 통해 가입을 진행하고, 마이페이지에 결제수단 관리에 들어가서 카드를 등록해줘야 한다.

맞다...돈 나가는 거다.

콘솔에 주소 등록

콘솔버튼을 클릭해 api 서비스에 map을 들어가준다음 등록을 하면 된다.

본인 프로젝트 이름 아무거나 적어주면 된다.

본인이 쓸 api 서비스를 체크해주면 된다. 참고로 모바일인 경우는 앱패키지 이름을 적어줘야 하고 web인 경우 웹의 주소를 적어주면 되는데 필자는 아직 배포한 주소가 없어 http://localhost:3000 로컬호스트 주소를 적어주었다.

html 태그에다가 스크립트 추가

먼저 api을 사용하려면 스크립트를 추가해 주어야 한다.

    <script
      type="text/javascript"
      src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=31hcxm8laz"
    ></script>

https://guide.ncloud-docs.com/docs/maps-overview
이 문서를 참고하면서 작업하면 훨씬 효율적이다. 그리고 본인이 쓸 jsx파일에 useEffect를 써서 ui를 그려주는 api를 추가해준다.

다음 블로그를 참고했다.
https://velog.io/@hdmoon127/%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-API-%EA%B5%AC%ED%98%84-React