[Mac] React Native 시작하기

React Native는 Facebook이 만든 오픈소스 모바일 앱 프레임워크로 JavaScript로 Android와 iOS 앱을 동시에 개발할 수 있는 오픈소스다. 

 

 

Homebrew 설치하기

Homebrew

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

 

Homebrew 버전 확인하기

brew -v

 

 

Nodejs 설치

Node.js

brew install node

node -v
npm -v

 

 

Watchman 설치

brew install watchman

 

 

React Native CLI 설치

npm install -g react-native-cli

또는

yarn global add @react-native-community/cli

 

설치 되었는지 확인

npx react-native --version

 

 

Xcode 설치

‎Xcode

 

react-native로 iOS 앱을 개발하기 위해서는 iOS 개발 툴인 Xcode가 필요하다.

Xcode 설치가 완료되면, Command Line Tools를 설정해야한다.

Xcode를 실행하고 상단 메뉴에서 Xcode > Preferences... > Locations로 이동하여 아래와 같이 Command Line Tools가 잘 설정되었는지 확인한다.

 

 

 

 

JDK 설치

brew tap adoptOpenJDK/openjdk
brew cask install adoptopenjdk8

 

 

Cocoapods 설치

brew install ruby

sudo gem install -n /usr/local/bin cocoapods

 

 

안드로이드 스튜디오 설치

Download Android Studio and SDK tools  |  Android Developers

 

react-native로 안드로이드 앱을 개발하려면 안드로이드 스튜디오를 설치해야 한다.

 

앱 개발 시작 - Mac에 안드로이드 스튜디오 설치하기 및 초기설정

위의 페이지를 참고하여 설치를 해줬다.

 

안드로이드 스튜디오 SDK 설정

More Actions > SDK Manger를 선택하여 안드로이드 SDK 설정 화면으로 이동해준다.

 

 

아래와 같이 설치가 잘 되어있는지 확인한다.

 

 

✔︎  환경 변수 추가

zsh 셸의 경우 터미널에서 nano ~/.zshrc 를 입력하고 파일 가장 아래쪽에 아래 코드를 추가

bash는 nano ~/.bash_profile을 입력하여 추가

 

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

 

입력 후 ctrl + x, y를 차례로 입력한 뒤 엔터로 저장한다.

터미널을 종료 한 뒤 재시작한다.

재시작한 터미널에 adb --version를 입력하여 안드로이드 스튜디오가 정상적으로 설치되었는지 확인한다.

 

 

다음엔 프로젝트 생성에 대해 알아보자!!