[React-native] react-native 개발 환경 (cli)

react-native 환경세팅 진짜 ^^....

react-native-cli 개발 환경

오늘은 Command ValidateEmbeddedBinary failed with a nonzero exit code 에러와
RN-cli 환경세팅을 알아보자

시작하기 앞서 이걸 갑자기 왜 하게 되었나 내 속상함 좀 들어주쇼

Command ValidateEmbeddedBinary failed with a nonzero exit code

에러가 나왔다. 항상 아카이브나 빌드할 때 에러가 많이 나와서 rm -rf node_module, pod install, clean build project, xcode 재설치, react-native-cli 재설치 등등 다들 많이 하는 민간요법을 실행해도 5일동안이나 날 괴롭힌 에러의 모습이다.
(꼴보기도 싫다.)

자칭 react-native 빌드 에러 화타 홍두현과 함께 이 에러를 겪으며 힘든 시간을 보낼 개발자들을 위해 혼내보자.

사실 에러를 혼내고 해결한다기 보단 음... 뭐랄까..
그냥 맥북을 다시 초기화하는 걸 추천한다. 그게 n배는 훨씬 더 시간 절약이 된다.

참고했지만 도움이 되지 않았던 stackoverflow 게시글

• https://stackoverflow.com/questions/68760126/m1-command-validateembeddedbinary-failed-with-a-nonzero-exit-code-archiving-er
• https://stackoverflow.com/questions/66184425/command-validateembeddedbinary-failed-with-a-nonzero-exit-code

ChatGPT한테도 물어봤지만 계속 같은 말만 반복하기도 하고 사람마다 너무나도 다른 환경을 갖고 있어서 그냥 맥북을 밀어버리기로 결정했다.

이걸 보시는 개발자분들... 진짜 꼭 밀어버리는 거 추천합니다..

이거 보세요 밀지마세요 제발 일단 이 링크 먼저 보고나서 포맷 다시 생각해세요 ㅠㅠㅠㅠㅠㅠ 해결했다구요 ㅠㅠㅠ

react-native-cli 개발 환경 세팅

서론이 너무 길었다. 근데 어떡합니까 속상한데..

암튼 각설하고 시작해보자.

로제타는 사용하지 않습니다.

생각보다 로제타가 빌드에 걸림돌이 된다고 합니다. 우리 CTO님(개발에 진심)이 알려주신 정보라 그냥 믿어주십쇼.

일단 진행한 환경은 m1 macbook air이며 apple 실리콘칩이 들어있는 m시리즈 맥북을 위한 게시글입니다.

1. Xcode 재설치

평점 1.9짜리 xcode 설치하는데 오래 걸리는 거 다들 잘 아실겁니다. 얼른 다운 ㄱㄱ

2. iterm2

저는 iterm이 좀 익숙해져서 terminal 유기시켰습니다.
iterm최고

3. Homebrew

xcode 설치가 끝나야 homebrew를 설치할 수 있습니다
Homebrew

// brew 버전 확인
brew --version

// brew 경로 확인
which brew

4. oh-my-zsh 설치

brew install zsh로 zsh를 설치 !

6.iterm2 실행할 때마다 homebrew 실행

vim은 루트 디렉토리에서 여는 게 습관이 돼서 루트에서
vim ~/.zshrc를 입력하면 알 수 없는 영어들이 되게 많은데
최하단으로 내려서

# brew
export PATH=/opt/homebrew/bin:$PATH
eval $(/opt/homebrew/bin/brew shellenv)

를 작성해주고

source ~/.zshrc

를 입력해줘야 내가 작성한게 적용이 된다.

7. nvm 설치 / 세팅

brew install nvm로 설치해주고
iTerm2 실행할 때마다 nvm 실행 설정을 하기 위해 다시 vim ~/.zshrc를 열어준다.

아까 작성했던 brew 코드 하단에

# NVM
export NVM_DIR="$HOME/.nvm"
  [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

를 붙여주고

source ~/.zshrc

꼭 해줍시당

8. node 설치

node 15버전부터 m1에서 실행된다고 하는데 아닌 것 같다. 나는 회사에서 쓰는 맥북에 14.23.1 버전이 잘 돌아가서 그냥 똑같이 14.23.1버전으로 설치했다.

brew install node@14

로 설치하고

node -v
npm -v

으로 버전 확인 !

9. watchman 설치

// watchman 설치
brew install watchman

// watchman 버전 확인
watchman --version
2023.05.18.00

10. cocoapods 설치

// cocoapods 설치
brew install cocoapods

// pod 버전 확인
pod --version

여기까지 오셨다면 고생하셨습니다. 다시 ㄱㄱ

10-1. react-native cli 설치

// react-native-cli global install
yarn global add react-native-cli

11. xcode 세팅

커맨드 + , 으로 preferences를 열고 Accounts에서 + 버튼을 눌러 Apple ID로 로그인 해주면 본인 개인 계정과 소속된 회사 계정이 나오게 됩니다.

12. android 세팅

JDK 설치가 완료 됐다면 환경변수 세팅을 또 해줘야한다.

vim ~/.zshrc

vim을 또 켠 후...

# JDK
export JAVA_HOME=$(/usr/libexec/java_home -v '1.8*')
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-8.jdk/Contents/Home

후에 다시 저장

source ~/.zshrc

13. android studio 설치

안드로이드 스튜디오 설치를 할 때 Mac(64-bit, ARM)으로 다운로드하면 됩니다.
설치는 오로지 yes클릭

13-1. SDK 설치 경로 환경 변수 설정

Cmd + ,을 누르면 안드로이드 설정이 나오는데
Appearance & Behavior -> System Settings -> Andorid SDK로 가면
Android SDK Location이 있습니다.
거기 주소를 복사 !

/User/<username>/Library/Android/sdk

뭐 대충 이렇게 있습니다. 일단 복사 !

그리고 또 vim을 켜줍니다

vim ~/.zshrc

복사한 SDK 경로를 입혀줍니다.

export ANDROID_HOME=/Users/<username>/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

적용!

source ~/.zshrc

14. 안드로이드 AVD 설정

최하단 Virtual Device Manager를 클릭 !

기기를 추가하겠냐고 물어볼텐데 애뮬레이터를 띄우려면 추가해줘야한다.

Create Device 를 클릭 후
Play Store 아이콘이 있는 디바이스를 선택해줍시다.

15. 안드로이드 빌드

상단에 빌드 버튼을 눌러본다면 !!
이제 안드로이드 빌드가 되는 걸 확인 할 수 있다.

16. 다시 돌아와서 ios 빌드

앱을 만드는 과정은 생략..!
만들어놓은 앱이 있다면 왼쪽 디렉토리에서 파일명을 클릭하고 signing & capabilites로 가서 signing을 모두 체크해준다.

ios 빌드 할 때는 뭔가 신성하게 하기 위해
/projectName : yarn react-native clean
/projectName : yarn install --reset-cache
/projectName/ios : pod install
xcode clean project 명령어 : Cmd + shift + k

를 진행하고 한다.

이렇게 되면 rosetta없이 RN 빌드하기가 완성된다.

사실 생략된 부분은 많지만... 추가로 업로드 해보겠다...