네이버맵 iOS 실제 기기로 구동시키는 방법 공유
해결됨
배달앱 클론코딩 [with React Native]
ㅁ 환경 - 기기: 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)
- axios_api_에러_해결
- react-native
- 네이버맵_설정
- 리액트_버전_18