이번 프로젝트를 진행하면서 지도 기능을 위해 react-native-naver-map을 사용하게 됐다. 연동하면서 이런저런 이슈들이 있었는데, 레퍼런스가 많이 없었어서 기록해두고자 한다.

react-native-naver-map이란

@mg-studio/react-native-naver-map은 react-native-nmap의 한계를 극복하고, 최신 React Native 환경과도 호환되도록 만든 비공식 커뮤니티 유지 보수 버전이다.

왜 선택했는가

react-native-nmap은 유지보수가 잘 되지 않아 현재 우리가 사용하고 있는 리액트 버전인 19버전에선 충돌이 발생할 가능성이 높다. 따라서 최근까지 유지보수가 잘 되고 있는 비공식 커뮤니티 버전을 선택하게 됐다.

앞선 아티클에서 살펴봤듯이 네이버 맵은 네이티브 모듈이기 때문에 실제 빌드를 하고 개발/테스트해야 한다.

전체 흐름은 다음과 같다.
1. @mj-studio/react-native-naver-map 설치
2. expo prebuild 로 ios/, android/ 생성
3. expo-build-properties 및 plugin으로 네이티브 설정 반영
4. eas build 또는 expo run:android/expo run:ios 로 실행

expo에서의 연동과정

라이브러리 설치

yarn install @mj-studio/react-native-naver-map --legacy-peer-deps

나 같은 경우 원래 사용하려고 했던 react-native-nmap을 삭제하지 않아 충돌이 발생했고, 이를 해결하기 위해 삭제 후에 naver-map 라이브러리를 깔아줬다.

app.config.js 설정

먼저 패키지명은 어플의 이름으로 정해준다. 이 이름은 네이버 클라우드 플랫폼의 앱 식별자 및 애플 앱 등록에도 사용되므로 잘 기억해둬야 한다. (처음엔 myapp으로 했다가 중간에 바꿨는데 그 스노우볼이 커져서 에러 파티가 났었다.)

보통 com.팀이름.앱이름으로 번들아이디를 결정해주면 된다. (보통 이렇게 사용하는 것 같다)

다음으로 네이버 클라우드 플랫폼으로부터 client_id를 발급받아 명시해야 한다. 나 같은 경우 .env파일에 키를 정의해두고 동적으로 주입하는 방식을 선택했다.

  expo: {
    name: 앱이름,
    slug: 앱이름,
    version: "1.0.0",
    owner: "",
    orientation: "portrait",
    icon: "./assets/images/icon.png",
    scheme: "앱이름,",
    userInterfaceStyle: "automatic",
    newArchEnabled: true,
    plugins: [
    	"expo-router",
        [
        "@mj-studio/react-native-naver-map",
        {
          client_id: process.env.NAVER_MAP_CLIENT_ID,
          android: {
            ACCESS_FINE_LOCATION: true,
            ACCESS_COARSE_LOCATION: true,
          },
          ios: {
            NSLocationWhenInUseUsageDescription:
              "이 앱은 지도를 표시하기 위해 위치 권한이 필요합니다.",
          },
        },
      ],
    ]

expo prebuild 실행

prebuild를 하게 되면 android, ios 폴더가 생성되고 위의 app.config.js에 클라이언트 아이디를 명시해줬기 때문에 해당 폴더 설정에 CLIENT_ID가 자동으로 삽입된다.

prebuild를 하고 나서 npx expo run:android나 npx expo run:ios 명령어를 실행하게 되면 native 빌드를 통해 Dev Client를 설치한 뒤 실행해준다. (원래는 미리 prebuild를 하지 않아도 자동으로 필요시 해준다.)

나는 ios 테스트를 하려고 했기 때문에 시뮬레이터를 사용해봤는데, 최신 버전 시뮬레이터가 없어서 애를 먹었다. (용량 없어서 깔기도 쉽지 않음.. 어떻게든 방법을 찾아보려고 했는데 결국 용량 정리하고 18.5를 깔았다.)

또는 내 실제 기기를 연결하는 방법도 있다. (나는 이렇게 개발 테스트를 하고 있다.)

expo-location 설치 후 위치 권한부여하기

expo 환경에서 네이버 맵 라이브러리를 사용하며 위치 권한을 받아 현재 위치 기반으로 지도를 띄우려면 expo-location을 함께 사용해야 한다.

npx expo install expo-location

개발을 위해 기기 연결 후 실행

실 기기 연결을 해서 개발하기 위해서 처음에 한번만 빌드해서 설치 후, npx expo start 명령어를 실행하여 그때그때 수정되는 js 번들을 전달해주기만 하면 된다.

위의 언급했던 아티클에서도 얘기했지만 수정할 때마다 로컬 네이티브 빌드를 하면 너무 오래 걸리고 리소스 낭비다.

🚨 무결성 확인 불가 에러가 발생한다면

빌드 후, 실행했을 때 작년에 리액트 네이티브 프로젝트를 진행할 때 자주 봤던 무결성 확인 에러가 발생했다.

eas로 빌드한 앱을 기기에서 설치하고 실행하려면, apple developer 계정에 설치하려는 기기를 등록해야 한다. (eas는 앱을 apple 인증서로 서명하고, 등록된 디바이스에만 설치 허용한다.)

나 같은 경우 팀원의 애플 디벨로퍼 계정을 사용했기 때문에 xCode에서 해당 계정으로 로그인하고, 빌드할 때에도 팀원의 계정으로 로그인하는 과정도 필요했다. (기기 등록은 apple developer 계정에서 해주면 된다.)
또한, 나는 동적 주입을 사용했기 때문에 빌드한 projectId도 app.config.js에 넣어주었다.

이 무결성 에러를 고치는데 애를 많이 먹었다. 빌드 후 테스트하려면 Provisioning profile에 내 기기를 포함시키는 과정이 필요한데 아무리 디벨로퍼 사이트에서 등록하고 실행을 해봐도 provisioning profile에 기존 등록되어 있던 기기밖에 안 떴다... ㅜㅜㅜ

처음엔 사이트에 등록한 정보가 동기화되는 데에 오래 걸리는줄 알았는데, credentials 설정(npx eas credentials)를 통해 provisioning profile을 업데이트해도 사이트에서 확인했을 때의 등록 기기가 하나로 초기화되는 것을 보니 내 설정 문제인 것 같았다. 직접 profile을 주입하는 방법도 있었는데 디벨로퍼 계정 주인이 아니기에 까다로운 것 같았고..
결국엔 xCode에 직접 들어가서 애플 디벨로퍼 계정을 등록하니 해결되었다.