React Native CLI 설치 (MacOS, M1설정하기 포함)

 

ReactNative 는 EXPO 와 CLI 로 구분하는데 EXPO 가 아닌 CLI 설치 방법

 

---

React Native 설치 (https://reactnative.dev/docs/environment-setup)

기본적인 설치는 위 링크 참고하기

 

 

---

1. Homebrew 설치하기 (https://brew.sh/index_ko)

1.1 터미널 열기

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

1.2. 모두 설치한 후 에 아래 환결설정 해주기

echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/Jay/.bash_profile
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/Jay/.bash_profile
eval "$(/opt/homebrew/bin/brew shellenv)"

 

---

2. node 설치 (14이상인지 확인)

brew install node
node —version

 

중요사항

최신 LTS 버전으로 사용하기

LTS가 아닌 가장 최근 버전을 쓰게 되면, iOS와 Android 둘 다 정상적으로 실행 되지 않는다.

TypeError: Cannot read properties of undefined (reading 'transformFile') at Bundler.transformFile

위와 같은 에러가 Metro 터미널에 나타난다면, Node 버전 문제이니 Node의 버전은 LTS 버전으로 React-Native를 진행한다.

 

---

3. watchaman 설치

brew install watchman

 

 

---

4. ruby 설치

brew install ruby
ruby --version

 

설치 후 환경설정

export PATH=/opt/homebrew/opt/ruby/bin:/opt/homebrew/lib/ruby/gems/3.0.0/bin:$PATH
export LDFLAGS="-L/opt/homebrew/opt/ruby/lib"
export CPPFLAGS="-I/opt/homebrew/opt/ruby/include"

 

 

---

5. 자바 개발 키트 설치 (Azul Zulu OpenJDK 배포판). 이미 JDK 설치돼 있으면 설치 안해도 됨

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

 

 

---

6. 리액트 네이티브 설치

6.1. 먼저 설치된 것이 있으면 삭제하기

npm uninstall -g react-native-cli @react-native-community/cli

 

6.2. 설치하기

npm install -g react-native-cli
npm install -g react-native
react-native -v

 

 

---

7. Cocoapods 설치 (iOS 개발을 위한)

sudo gem install cocoapods

 

---

8. 신규 프로젝트 생성

npx react-native init newproject(프로젝트 이름 작성)

 

프로젝트 폴더 생성되면 프로젝트 root 폴더의 gemfile 을 열고 4번에서 설치한 ruby 와 버전 맞추기

---

9. Android 환경설정

AndroidStudio 설치 후에 설정하기

vi ~/.bash_profile

 

vi 로 열고 나서 아래 환경설정 내용 추가하고 저장하기

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

 

vi 사용법

1. vi ~/.bash_profile 를 입력하면 vi 입력창이 나오는데

2. i 키 (입력모드로 변경됨)

3. 위 환경설정 복붙하거나 입력하기

4. esc 키 (입력모드 벗어나기)

5. :wq 입력 (vi 에서 저장하고 닫기) (terminal 하단에 입력되는지 확인할 것)

6. enter 키 (위 명령어 (:wq) 실행하고 vi 벗어남)

7. source ~/.bash_profile (저장된 내용을 시스템에 적용하기)

 

---

10. 프로젝트 내 iOS 기본 파일 설치하기

 

프로젝트 폴더의 ios 폴더 진입

cd projectFolder/ios

 

꼬여있을지 모르는 빌드파일 삭제

rm -rf ~/Library/Developer/Xcode/DerivedData/

 

10.1. intel 칩셋일 때 (m1 일 때 아래 명령어로 설치하면 프로젝트 파일이 꼬여서 ios 에서 실행이 되지 않음)

bundle install
pod install
pod —version

 

10.2. m1 칩셋일 때

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

 

 

---

11. xcode 설정하기

11.1. xcode 실행 -> preference -> Locations -> Command Line Tools 가 비어있으면 설정하기

11.2. xcode BuildSettings 설정

프로젝트폴더/ios/react1.xcworkspace 파일 실행 -> build setting -> Architectures -> Excluded Architectures 내부에 Debug, Release 모두 arm64 로 변경

 

---

12. 프로젝트 실행하기

프로젝트 폴더에 진입한 후

yarn android // android 실행하기
yarn ios     // ios 실행하기

 

yarn 으로 실행하면 간편하게 실행할 수 있음.

아래와 같이 자동으로 입력해주는 방식이라서 옵션을 추가해서 실행할 게 아니라면 yarn 을 사용하는게 편함

yarn android = react-native run-android
yarn ios = react-native run-ios