ReactNative 환경 세팅 with react-native-cli

• 오늘은 페이스북에서 개발한 리액트 네이티브를 경험해보기 위해서 한 번 배워보았다
• Expo CLI가 아닌 React Native CLI를 사용하여 앱 개발을 진행하였다.
  ( React Native CLI 환경에서 다들 막힌다고 하던데 그 이유를 알겠다 설정할 게 한두개가 아니닼ㅋㅋㅋ)

개발 환경

MacOS Monterey 12.4
Xcode 13.4.1

brew 3.5.9
node 16.15.1
npm 8.11.0
watchman 2022.08.15.00
react-native-cli 2.0.1
pod 1.11.3
openjdk 11.0.11
javac 11.0.11

아이폰 라이브러리를 다운받기 위해 iterm2 내에서 cocoapods를 설치해준다.

sudo gem install cocoapods

cli 설치 전 캐시를 한 번 비워준다
( 이전에 Xcode를 한 번 잘못 만졌던 기억이 있어서 난 지워줬다)

pod cache clean --all
yarn cache clean
rm -rf ~/Library/Developer/Xcode/DerivedData/*

sudo npm install --location=global react-native-cli

현재 새로 나온0.69.0 버전은 오류가 계속 잡혀서 0.68.2 버전을 설치 해준다

npx react-native init [프로젝트명] --version 0.68.2

Xcode 앱을 실행할 때, build를 할 때 M1 architecuture 는 cocoapods과 직접 호환 되지 않기 때문에 아키텍처를 설치해준다

cd /[프로젝트명/ios

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
pod install

혹시나 pod 설치에 버전 오류가 날시

cd ios
pod deintegrate
pod install

sudo npm uninstall --location=global react-native-cli

Xcode 설정

• PROJECT, TARGETS 두 부분 모두 Excluded Architectures 의 SDK 설정을 아래와 같이 설정해준다.

Android 설정

• Android Studio 에서 SDK (30버전) 을 다운 받고 나면 이에 대한 환경 변수 설정을 해줘야 한다

vi ~/.bash_profile

발생한 에러

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening frontend.xcodeproj.

원인: Xcode 앱을 실행할 때, build를 할 때 M1 architecuture 는 cocoapods과 직접 호환 되지 않는다.

해결: 아래와 같은 패키지를 설치해서 동적으로 연결된 라이브러리를 로드하고 올바르게 ffi 실행할 수 있도록 한다.

sudo arch -x86_64 gem install ffi
cd frontend/ios
arch -x86_64 pod install

적절한 architecuture로 실행

cd /frontend/ios
pod install

결과

• 정상적으로 앱이 실행됨을 확인했다~
• 필수! Metro server가 (번들이) 정상적으로 실행되고 있어야 VSC 내에서 저장을 하였을 때 Fast Refresh 가 가능하다.
• Flutter보다 환경세팅에서 더 오래 걸렸던 거 같다. (Flutter 코딩하고 있는 시간에 환경설정하는 느낌,,
• 생각보다 필요한 게 많았지만 그만큼 배운거 같아 뿌듯하다

참고

https://reactnative.dev/docs/environment-setup

https://qnrjs42.blog/react-native/m1-arm64-setting
https://wiwi-pe.tistory.com/168

https://stackoverflow.com/questions/72733254/why-react-native-cli-giving-errors

https://github.com/facebook/react-native/issues/34063https://qnrjs42.blog/react-native/m1-arm64-setting
https://velog.io/@eojine94/MAC-M1-React-Native-개발-환경-구축-및-에러-해결