React_Native CLI 설치 및 에러 대응

React-Native CLI를 설치하기 위한 자료는 (https://reactnative.dev/docs/environment-setup?guide=native&platform=android&os=macos) 에 나와있다.

 

React Native CLI로 작업하기 위해서는 <개발하는 OS>와 <타겟되는 OS>를 정해야한다. 필자의 같은 경우에는 <개발 OS>는 <Mac OS> // <타겟 OS>는 Android 로 정하고 개발환경을 만들어주었다. 

 

1. Node & Watchman 설치

brew install node
brew install watchman

 

2. Java Develope Kit (JDK)

brew tap homebrew/cask-versions
brew install --cask zulu11

# Get path to where cask was installed to double-click installer
brew info --cask zulu11

 

환경변수 설정 (zshrc)

터미널에
vim ~/.zshrc 입력

e 눌러 edit mode
page down 눌러 제일 아래로 이동후 
insert 활성하고 아래 작성

export JAVA_HOME="/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home"
export PATH=${PATH}:$JAVA_HOME/bin

작성후 ctrl+c 누르고 :wq 눌러 vim~/.zshrc에서 나오기

터미널 종료 후 다시 시작하여

echo $JAVA_HOME

입력후 경로 확인

 

3. Android 개발 환경 설정

• android sdk
• android sdk platform
• android virtual device

설치

• 3-1. Android SDK 설치 

2023년 11월 16일 기준 Android 13(Tiramisu) 설치를 권고함

Android Studio 열고 More Action에서 SDK MANAGER로 들어가서 설치

• Android SDK Platform 33
• Intel x86 Atom_64 System Image또는 Google APIs Intel x86 Atom System Image또는 (Apple M1 Silicon의 경우)Google APIs ARM 64 v8a System Image

 

• 3-2 Android_HOME 환경 변수 구성

터미널에
vim ~/.zshrc 입력

e 눌러 edit mode
page down 눌러 제일 아래로 이동후 
insert 활성하고 아래 작성

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

작성후 ctrl+c 누르고 :wq 눌러 vim~/.zshrc에서 나오기

 

4. Project 설치

원하는 폴더 만들고 vscode 열어 아래 명령어 입력

npx react-native@latest init AwesomeProject

 

5. 프로젝트 시작

npm run android
혹은 
npx react-native run-android

 

 

설치 중 오류처리

Project 설치시 Ruby의 버전이 낮아 Cocoapods를 설치를 못하는 경우가 있었다.

Ruby의 버전을 업데이트하기 위한 사용한 방법을 나열하겠다.

brew update
brew upgrade

brew install rbenv ruby-build
// 위 설치 후 rbenv로 설치할 수 있는 Ruby버전을 확인한다.

rbenv install -l 
// ruby 홈페이지가서 스텐다드 버전을 확인하고 다운 받았다.

rbenv install 3.x.x
// 설치 후 설치된 버전으로 바꾸기 위해

rbenv global 3.x.x 
//입력

ruby --version
//위를 입력하여 본인이 설치한 버전이 바뀌었는지 확인한다. 
// 터미널을 껏다 켜고 다시 한번 더 확인한다.

버전이 바뀌지 않았을 때

rbenv init

// 를 입력하면

# Load rbenv automatically by appending
# the following to ~/.zshrc:

eval "$(rbenv init - zsh)"

//라고 나오는데 이것을

vim ~/.zshrc

// 위를 입력하여 편집 모드로 들어가 제일 하단에 

eval "$(rbenv init - zsh)"

// 위의 문구를 추가해주자
// 추가 후 터미널을 껏다 다시 켜고
// ruby --version을 눌러준다.

 

Watchman Error

npm run android를 하고 watchman 터미널이 따로 등장하는데 등장과 함께 에러코드가 나왔다.

...내용중략~~~ watchman error operation not permitted ~~~~내용중략...

 

문구가 나왔을 시 순차적으로 입력하자.

watchman watch-del-all
watchman shutdown-server

 

또한 .watchmanconfig 파일 내부는 

{}

중괄호가 입력되어 있어져야한다.