inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

배달앱 클론코딩 [with React Native]

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

해결된 질문

974

Si Choi

작성한 질문수 5

3

ㅁ 환경
- 기기: 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

답변 0

앱실행시 네이버맵 [401] 에러

0

1063

2

스타일링 라이브러리

0

160

2

expo, cli 선택 중에 고민이 있습니다.

0

180

2

JDK 버전이 달라도 괜찮나요?

0

240

2

dimenstion usewindowdeminstion

0

130

3

[맥 전용]환경 설정하기 1편 & [맥 전용]환경 설정하기 2편의 영상이 안나옵니다.

0

217

1

jdk11 버전과 gradle 버전의 호환성 관련 질문드립니다.

0

407

2

강의 외 질문입니다!

0

164

2

react native랑 맞는 ui 라이브러리 어떤게 좋을까요?

0

1554

2

react native와 spring boot 연결

0

365

1

java가 아닌 .kt에서 code push 에러가 발생합니다.

0

222

2

flipper 239 에러가 발생합니다.

0

172

2

package.json에 /lib/panino.js 문제입니다.

0

480

2

window - mac 협업 과정 질문합니다

0

221

1

ios 빌드 중 RCTBridgeDelegate.h import 오류

0

294

2

ios 앱 빌드 중 hermesEnabled 관련 오류발생

0

249

2

Socket 연결시 질문 드립니다.!

0

157

2

wifi 환경에서 axios 통신이 로컬서버에서 안됩니다.

0

430

2

iOS render error 질문드립니다.

0

417

2

iOS 가상머신 오류

0

173

2

npc react init 명령어 실행시 발생되는 오류

0

224

1

nom start 시 오류

0

122

1

NextJS 기반으로 만들어서 웹뷰 React Native로 배포 가능한가요?

0

1019

2

안드로이드 rn75 버전에 맞게 설정 중에 android13 다운로드에 대해서 막혔습니다!

0

187

2