리액트 - 네이버 Map API

리액트에서 네이버 지도 api를 쓰는 법에 대해서 글을 써본다. 여러 차례, 삽질을 끝에... 어느 정도는 해결이 되었다.

(어느 정도라는 건, 완벽히는 해결되지 않았다는 뜻... 돈이나.. 가끔 에러가 뜨기도 하고...)

https://velog.io/@qldudgh/React-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-api-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[React] 네이버 지도 api 사용하기

일단 이 분의 도움을 많이 받았다.

이 분의 코드를 이용해서 나의 map.jsx에 접목을 시켰다.

일단, 흐름은 다음과 같다.

0. api 키 받기
1. npm 패키지 설치
2. public 폴더의 html에 세팅하기
3. 표현할 map 파일에 가서 변수 세팅하기

이 정도가 될 거 같다.

• api 키 받기

https://www.ncloud.com/product/applicationService/maps

NAVER CLOUD PLATFORM

여기로 가서 이용 신청을 해준다. (회원가입 안되어있으면 해야 한다.)

이때 카드도 기입해줘야 하며, 애플리케이션도 넣어줘야 한다.

https://cwonseo1.tistory.com/26

[리액트 네이버 맵 API] 맵 띄우기

관련된 글은 위를 참고하자. 로컬에서 하고 있다면 로컬 호스트 링크를 걸어주면 된다. 배포를 했다면 배포된 사이트의 링크를 넣어주면 된다. (배포까지 되었다면 로컬 호스트랑 배포된 사이트 링크 둘 다 올려주자.)

만일 로컬의 페이지가 여러 개라면 페이지 뒤의 해당된 섹션의 이름을 작성해줘야 한다.

예를 들어서 "http://localhost:3000/main" ... 이런 식으로 작성을 해주면 된다. 

---

뭐 아무튼. api를 받았다면 클라이언트 아이디와 비번을 받았을 것이다. 이건 남들에게 함부로 공개해서는 안된다.

인증 정보를 누르면 아이디와 비번이 나온다. 여기에 나오는 아이디를 복사하고, html에 연동해줘야 한다. 이 부분은 뒤에서 설명해 줄 것이다.

• npm 패키지 설치

npm install react-naver-maps

npm을 이용해서 네이버 맵을 미리 깔아 두는 것을 권장한다. 안 쓰일 수도 있겠지만, 후일을 도모하기 위함이다.

이거 없어서 오류 뜨는 경우가 생각보다 많다. (선택권도 늘어남.)

---

• public 폴더의 html에 세팅하기

https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html

NAVER Maps API v3

(공식 문서) - 참고하세요.

리액트의 public 폴더에 index.html이 있을 것이다. 

거기에 스크립트를 연동해야 한다.

참고로 추후에 본인이 css나 scss으로 스타일링을 할 것이라면..

그냥 헤드 부분에 스크립트만 넣어줘도 괜찮다.

// html에 삽입
<script
      type="text/javascript"
      src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=<%= process.env.REACT_APP_MAP_CLIENT_KEY%>"
    ></script>

아이디 부분에 당신의 api id를 기입해 주면 끝이다.

• 표현할 map 파일에 가서 변수 세팅하기

나의 경우 Mainmap.jsx에 변수를 세팅해 주었다.

https://velog.io/@qldudgh/React-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-api-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[React] 네이버 지도 api 사용하기

이건 이 글을 참고해 주자. 더 디테일한 부분이 필요하다면 공식 문서에 들어가면 많이 있다. 그 공식 문서에서 어떤 함수들이 무슨 역할을 하는지를 알아낼 수 있다. 알아내야 응용이 가능하니 꼭 한 번 둘러보자.

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

NAVER Maps API v3

(여기에 들어가면 예시 코드들이 있다. 참고하자.)

---

마치며..

알아두면 좋은 사이트가 있다. 참고하자.

https://zeakd.github.io/react-naver-maps/

React Naver Maps

https://navermaps.github.io/maps.js.ncp/docs/naver.maps.html#toc0__anchor

NAVER Maps API v3

 

+(11/2 기준) - 환경 변수 세팅

https://velog.io/@calendar2/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EB%84%A4%EC%9D%B4%EB%B2%84%EC%A7%80%EB%8F%84-api-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B01

리액트로 네이버지도 api 활용하기(1)