[React Native] react-native-naver-map 라이브러리로 네이버지도 구현하기

의외로(?) 고생했던 경험인 리액트 네이티브에서 react-native-naver-map 라이브러리로 페이지에 네이버지도를 넣는 방법입니다!

 

동작하는 모습!

 

깃허브 문서를 보면서 차근차근 따라하니까 되더라는 ... react-native-naver-map 에 들어가면 진행 과정이 있지만 조금 더 자세하게 적어보자면!

 

(1) 먼저 작성할 프로젝트에 라이브러리를 설치한다.

 

npm install react-native-nmap --save;

 

(2) ios로 디렉토리 변경 후 pod install을 해줍니다.

 

$ cd ios/ && pod install

 

+) 이 부분은 리액트 네이티브 0.60 이상이신 분들은 건너뛰시면 됩니다, 0.59 이하부터 이 과정을 해주셔야 합니다!

 

$ react-native link react-native-nmap
$ cd ios/ && pod install

 

(3) git-lfs를 설치해줍니다. (ios만)

 

* 해당 과정을 위해서는 CocoaPods 설치가 필요합니다.

 

sudo gem install cocoapods

 

- CocoaPods 설치가 완료되면 git-lfs 설치를 진행합니다.

 

brew install git-lfs

 

- git-lfs 설치가 완료되면 초기화를 진행해줍니다.

 

git-lfs install

 

(4) 네이버 SDK 문서를 따라 API 키를 발급받아야 합니다.

https://navermaps.github.io/ios-map-sdk/guide-ko/1.html

시작하기 · NAVER Map iOS SDK

 

클라이언트 ID 발급

네이버 지도 모바일 SDK를 사용하려면 다음과 같이 애플리케이션을 등록하고 클라이언트 ID를 발급받아야 합니다.

1. 네이버 클라우드 플랫폼에 로그인한 후 콘솔에 들어갑니다.
2. Products & Services에서 AI-Application Service 하위의 AI·NAVER API를 선택합니다.
3. Application 등록을 선택하고 Maps 하위의 Mobile Dynamic Map을 체크합니다.
   • 선택하지 않으면 인증 실패 오류(429)가 발생합니다.
   • iOS Bundle ID에 네이버 지도 SDK를 사용하고자 하는 앱의 번들 ID를 추가하고 등록합니다.
   • 올바르게 입력하지 않으면 인증 실패 오류(401)가 발생합니다.
   • 등록한 애플리케이션의 인증 정보를 선택해 Client ID를 확인합니다.

(5) info.plist 파일에 CLIENT_ID를 넣어주기

 

 

Xcode > 프로젝트 폴더 > ios 폴더를 열고 NMFClientId에 넣으면 됩니다. 참고로 위에 있는 Bundle Identifier에는 네이버 클라우드 플랫폼에서 이용 신청할 때한 Bundle ID와 동일해야 합니다. 클라이언트 ID는 아래 사진에 있는 거 넣으면 됩니다. Secret 말고! 

혹시나 하는 말인데 Bundle Identifier 저랑 똑같이 해보겠다고 com.nurget.parkingproject 하시면 발급이 안될 겁니다. 본인 프로젝트의 ID를 임의로 만드셔야 합니다. 

 

참고로 저는 네이버 클라우드 플랫폼에서 iOS Bundle ID만 넣으면 될 줄 알았는데.. 추가하려면 웹 서비스 URL도 넣어야 된다고 해서 티스토리 링크 넣었어요 (Mobile Dynamic Map만 넣은게 아니라 모든 지도를 다 추가해서 그렇습니다!!)

 

 

(6) 마지막은 코드 작업!

 

import NaverMapView, {
  Circle,
  Marker,
  Path,
  Polyline,
  Polygon,
} from 'react-native-nmap';

function MapScreen() {
  const P0 = {latitude: 38.07510838708869, longitude: 128.6250264365656};
  const P1 = {latitude: 38.07294951566119, longitude: 128.6234972427233};
  const P2 = {latitude: 38.072847035378096, longitude: 128.62178565345724};
  const P3 = {latitude: 38.07855732743033, longitude: 128.62446457943497};

  return (
    <NaverMapView
      style={{width: '100%', height: '100%'}}
      showsMyLocationButton={true}
      center={{...P0, zoom: 16}}
      onTouch={e => console.warn('onTouch', JSON.stringify(e.nativeEvent))}
      onCameraChange={e => console.warn('onCameraChange', JSON.stringify(e))}
      onMapClick={e => console.warn('onMapClick', JSON.stringify(e))}>
      <Marker coordinate={P0} onClick={() => console.warn('onClick! p0')} />
      <Marker
        coordinate={P1}
        // pinColor="blue"
        onClick={() => console.warn('onClick! p1')}
      />
      <Marker
        coordinate={P2}
        // pinColor="red"
        onClick={() => console.warn('onClick! p2')}
      />
      <Marker coordinate={P3} />
      {/* <Path
        coordinates={[P0, P1]}
        onClick={() => console.warn('onClick! path')}
        width={10}
      /> */}
      {/* <Polyline
        coordinates={[P1, P2]}
        onClick={() => console.warn('onClick! polyline')}
      /> */}
      {/* <Circle
        coordinate={P0}
        color={'rgba(255,0,0,0.3)'}
        radius={200}
        onClick={() => console.warn('onClick! circle')}
      /> */}
      {/* <Polygon
        coordinates={[P0, P1, P2]}
        color={`rgba(0, 0, 0, 0.5)`}
        onClick={() => console.warn('onClick! polygon')}
      /> */}
    </NaverMapView>
  );
}

export default MapScreen;

 

저는 이렇게 작업했습니다. 사실 공식문서랑 별 다를게 없습니다. 위도와 경도만 임의로 설정해놨고, Marker와 Polyline, Circle 등 자세한 사용 방법은 깃허브 공식문서에 더 잘나와있습니다. 

 

 

++)

 

네이버 클라우드에서 메일이 날아왔길래 뭐지? 했는데 API 요금 변경 내용이었다. 메일 내용은 아니지만 아래 사진은 클라우드 플랫폼 공지사항에서 볼 수 있는 내용!

 

개쫄았는데 Mobile Dynamic Map은 해당사항에 없었다. 공부 목적이라 요금이 부과됐어도 큰 부담은 없었겠지만.. 그냥 무료인 네이버가 좋은데.. 카카오 API로 이사를 가야될ㄲ