React Native 개발 환경 설정

React Native로 프로젝트를 처음 시작하기 전 필요한 개발 환경 설정 가이드입니다. 이 글은 mac OS m1 환경에서 iterm 터미널, homebrew 패키지 매니저를 사용한다고 가정합니다.

React Native CLI

Shell

$ npx @react-native-community/cli@latest init AwesomeProject

# ...

$ npx @react-native-community/cli doctor

프로젝트의 RN에서 호환하는 패키지 버전에 맞추야하기 때문에

처음 프로젝트를 생성한다면 React Native cli 후 cli doctor로 호환하는 버전을 확인하면서 설치하는것이 좋다.

Xcode

App Store에서 Xcode 검색 후 설치한다. (설치가 매우 오래 걸린다.)

안드로이드 스튜디오

Android Studio 설치

•
SDK Platforms, SDK Tool의 API level 을 맞춰주어야한다.
- ◦
  SDK Platforms
  - ▪
    Android API 32 (사용할 API level에 맞춰서 설치)
    - •
      Android SDK Platform 32
    - •
      Google APIs ARM 64 v8a System Image
- ◦
  SDK Tools
  - ▪
    Android SDK Command-line Tools(latest)
  - ▪
    Android SDK Platform-Tools
  - ▪
    Google Play Licensing Library

안드로이드 환경변수 설정

Bash

$ vi ~/.zshrc

# 하단에 추가
...
export ANDROID_HOME=$HOME/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

NVM

Bash

$ brew install nvm

NVM은 node 버전 관리에 용이한 기능을 제공한다.

homebrew 로 nvm설치 후 아래 순서대로 설정한다.

Bash

$ mkdir ~/.nvm # nvm 디렉토리 생성

$ vim ~/.zshrc

# 마지막 줄에 추가 후 저장
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 # 스크립트 실행

$ nvm -v # nvm 버전 확인

$ nvm install --lts # lts 버전의 node 설치

$ nvm ls # 설치된 node.js 리스트 보기
$ nvm use <version> # 특정 버전의 nodejs 사용하기

Watchman

Bash

$ brew install watchman

$ watchman --version # 버전 확인

특정 폴더나 파일을 감시해서 변경시에 특정 동작을 하는 역할로 RN에서 코드 수정시 바로 적용 할 수 있도록 도와준다.

Cocoapads

Bash

$ brew install cocoapods

# 버전 확인
$ pod --version

iOS 개발을 위해 필요한 의존성 관리자이다.

Java Development Kit(JDK14)

Bash

# JDK14
$ brew install --cask adoptopenjdk14

# 버전확인
$ javac -version

Bash

$ vi ~/.zshrc

# 하단에 추가
export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home

$ source ~/.zshrc

AOS 개발을 위해 필요한 소프트웨어 패키지이다. RN 버전에 따라 설치해야하는 버전이 달라지기 때문에 주의하자.

(최근에 확인해보니 adoptopenjdk가 adoptium로 이전되었다고 한다. brew install 시 adoptium를 사용하는것이 낫겠다.)

Yarn (선택)

Bash

$ npm install --location=global yarn

# 버전확인
$ yarn --version

이로써 RN을 시작하기 전 개발 환경 설정이 마무리된다.