React Native - IOS / Android 개발 환경 세팅 (M1 Mac용)

React Native 개발 환경 세팅

 

React Native 개발 환경 세팅입니다. 맥(Mac) OS M1 전용 환경세팅이니 참고 부탁드립니다. Expo CLI와 React-Native CLI, 2가지가 있는데 그중에서 React-Native CLI를 구축하는 방법 입니다.

 

 

아래는 기본적으로 환경세팅 관련하여 기본적으로 필요한 프로그램이니 프로그램 설치 후 진행 부탁드립니다.

• homebrew 설치
• Item2 설치 (선택입니다. 기본 터미널도 가능합니다.)

iTerm2 - macOS Terminal Replacement

Homebrew

# homebrew 설치 커맨드
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 버전 확인
brew --version

# 경로 확인
which brew
# arm64 architecture(m1 mac 경로): /opt/homebrew

 

 

 

 

 

1.  공통 Setting

 

- zsh 설치

# zsh 설치
brew install zsh

# .zshrc 파일 확인
ls -al 

zsh에 관하여 더 알고 싶은 분들은 아래 글을 더 참고해 주세요

Mac OS 터미널에 ZSH 설치하기 |

m1 맥북 초기 설정 정리해보기 · 지혜의 개발공부로그

- iTerm2 실행할 때마다 homebrew 실행 설정

vim ~/.zshrc

# brew 
export PATH=/opt/homebrew/bin:$PATH

# 저장 후 종료
:wq

# zsh 설정 파일 실행
source ~/.zshrc

 

 

- Node 설치

brew install node

# 버젼 확인
node --version

 

 

- nvm 설치 (선택)

# nvm 설치
brew install nvm

# iTerm2 실행할 때마다 nvm 실행 설정
vim ~/.zshrc

# 아래 코드 복사 붙여넣기
# 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"


# 저장 후 종료
:wq
source ~/.zshrc


# 설치 후 아래 명령어로 nvm default node버전을 셋팅해준다.
nvm install 설치할 노드 버전

 

 

- M1 mac 로제타 설정

xcode

• 응용 프로그램에서 오른쪽 마우스 클릭 ⇒ 정보 가져오기 ⇒ Rosetta를 사용하여 열기 체크

iTerm2

• 응용 프로그램에서 오른쪽 마우스 클릭 ⇒ 정보가져오기 ⇒ Rosetta를 사용하여 열기 체크

 

m1 mac 로제타 없이 실행

[React-Native] M1 arm64 react native 세팅(with. expo & React Native CLI)

 

 

 

 

 

2. IOS Setting

 

- Xcode 설치

설치시간이 대략 3시간이니 미리 앱 스토어에서 인스톨하는 게 좋습니다.

‎Xcode

 

- watchman 설치

# watchman 설치
brew install watchman

# 버전 확인
watchman --version 

 

 

- cocoapods 설치

# cocoapods 설치
brew install cocoapods

# 버전 확인
pod --version

 

 

- ffi 설치

# ffi 설치
sudo gem install ffi

vim ~/.zshrc

# 제일 아래에 추가
# GEM
export GEM_HOME=$HOME/.gem
export PATH=$GEM_HOME/bin:$PATH

:wq
source ~/.zshrc

 

- Xcode 시뮬레이터 설치

• Xcode 실행 후 -> 상태 바 xcode -> Preferences 열기

 

• Components -> 원하는 시뮬레이터 IOS 소프트웨어 버전 설치

 

 

 

 

 

3.  Android Setting

 

- Android JDK 설치

• JDK 버전 11.x 업데이트

Azul Downloads

 

설치가 완료되었으면 아래와 같이 zsh 설정 파일 적용

vim ~/.zshrc

# 맨 아래에 추가
# JDK
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home
export PATH=${PATH}:$JAVA_HOME/bin

:wq
source ~/.zshrc

# java_home 확인
/usr/libexec/java_home -V

 

더 자세한 참고

M1 Monterey Java 11.0.13 설치 후 환경변수 설정하기 — DevMinGeonPark

 

 

 

 

 

- Android Studio 프로그램 설치

Download Android Studio & App Tools - Android Developers

Mac 64bit ARM으로 인스톨 진행합니다.

 

 

 

 

 

 

- SDK 설정

 

Android Studio 실행 후 SDK 설치 경로 복사

 

• 아래와 같이 토글 클릭 후 메뉴에서 SDK Manager 선택

 

• Android SDK Location 경로 복사해 둡니다.

 

 

SDK Tools 설정 및 다운로드

• SDKTools 클릭 후 아래와 같이 체크 후 'Apply' 버튼을 눌러 인스톨/적용합니다. (아래의 이미지는 제 개발 환경 세팅입니다. 추후 개인의 각자 개발 환경에 따라 달라질 수 있습니다.)

 

 

 

zsh 설정 파일에 SDK 설정 추가

vim ~/.zshrc

# 맨 아래 추가
export ANDROID_HOME=/Users/young/Library/Android/sdk <- 여기에 Android SDK Location 경로 복사한거 붙여넣기
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

:wq
source ~/.zshrc

 

 

 

 

- Android 시뮬레이터 설치

• 아래와 같이 토글 클릭 후 메뉴에서 Virtual Device Manager 선택

 

• 원하는 디바이스 선택
  • M1에서 안 돌아가는 디바이스가 있으니 참고 이미지처럼 Pixel2로 선택 추천합니다. (제 M1 Mac에서는 Pixel2로 잘 실행됩니다.)

 

 

• Release Name 선택(처음에는 설치를 해줘야 됨, 다운로드 후 선택)
  • 마찬가지로 Release Name이 'S'을 추천합니다. (제 M1 Mac에서는 'S'로 잘 실행됩니다.)

 

 

• 지금까지 원하는 설정 후 Finish 버튼을 클릭하면 AVD가 생성됩니다.

 

 

 

 

4.  React-Native CLI 설치 및 프로적 트 실행

 

- 설치 전 캐시 삭제

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

 

- React-Native CLI 설치

npm install -g react-native-cli

# 버젼 확인
react-native --version

 

- 프로젝트 생성 및 실행

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

# ios
cd ios
pod install
cd ../
npm run ios

# android
npm run android

 

 

 

프로젝트 시뮬레이터가 등장하고 아래와 같이 'Success'가 등장하면 빌드 성공입니다!

 

 

최종 zsh입니다. 빠트린 것이 없는지 체크하세요~!

export PATH=/opt/homebrew/bin:$PATH

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

export GEM_HOME=$HOME/.gem
export PATH=$GEM_HOME/bin:$PATH

export ANDROID_HOME=/Users/young/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

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

 

 

감사합니다!