네이버맵 iOS 실제 기기로 구동시키는 방법 공유

ㅁ 환경

- 기기: MacBook M1 Pro 

- 주요 설정(package.json)

{
    "react": "18.0.0",
    "react-native": "0.69.1",
    "react-native-flipper": "^0.154.0",
    "react-native-nmap": "^0.0.66",
}

ㅁ 문제 정리

1 - iOS로 이용하던 도중, 네이버 맵이 Simulator로 작동하지 않아, 실제 기기로 이용 필요

2 - 실제 기기로 작동 시키다 보니, axios에서 문제 발생

ㅁ 해결책

1 - 먼저 실제 기기 작동에 필요한 환경 설정 진행(xcode의 info.plist)

2 - ios-deploy 설치(실제 아이폰을 구동시키기 위한 npm 패키지)

3 - 네이버맵 설치 진행

ㅁ 실제 기기로 작동시키는 경우 xcode의 info.plist 설정

1 - dotenv에서 API_URL을 나의 아이피 주소로 설정하고, 실제 기기와 맥북이 같은 와이파이를 사용하고 있는 지 확인

2 - xcode의 info.plist를 다음과 같이 설정 (localhost에 대한 설정 뿐만이 아니라, 나의 아이피 주소에 대한 설정도 필요)

** 완전히 이해는 못 했지만, iOS 폰의 경우 http 통신은 별도로 허용하지 않아서, http 통신이 허락되는 ip 주소를 별도로 설정해야 한다고 하네요(https://stackoverflow.com/questions/52398953/axios-react-native-nodejs-on-real-ios-device-gives-network-errors-in-xcode)

<key>NSAppTransportSecurity</key>
    <dict>
    <key>NSExceptionDomains</key>
	<dict>
	<key>localhost</key>
	<dict>
	<key>NSExceptionAllowsInsecureHTTPLoads</key>
	<true/>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
      </dict>
      <key>나의_아이피_주소(맥북 시스템 환경설정 > 네트워크 > 와이파이 > 아이피 주소)</key>
      <dict>
        <key>NSExceptionAllowsInsecureHTTPLoads</key>
        <true/>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
      </dict>
   </dict>
</dict>

ㅁ ios-deploy 설치

링크 참조(https://cereme.dev/appdev/react-native-iphone-device-run/)

ㅁ 네이버 맵 설치

m1 pro의 경우 맥북 칩을 이용하다보니, 기존의 라이브러리들이 제대로 업데이트가 안 되거나 몇 가지 xcode에서 환경 설정을 해야 가능

(저도 완벽히 설명은 못 하지만, 일단 제가 시도해서 성공한 방식만 기재해놓겠습니다)

1 - info.plist 설정

`NMapsMap`은 버전 '3.10.1'에서 작동했고, `post_install` 후에 `arm64`를 excluded_archs 세팅에 추가(https://stackoverflow.com/questions/65364886/react-native-on-apple-silicon-m1-the-linked-library-libpods-projectname-a-is)

  pod 'NMapsMap','3.10.1'
...

  post_install do |installer|
installer.pods_project.build_configurations.each do |config|
    config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
    react_native_post_install(installer)
  end
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

2 - xcode workspace 설정

아래 링크 따라하시면 됩니다.

(https://khushwanttanwar.medium.com/xcode-12-compilation-errors-while-running-with-ios-14-simulators-5731c91326e9)

인프런 커뮤니티 질문&답변