해결됨
배달앱 클론코딩 [with React Native]
네이버맵 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)