React Native CLI 설치 (Mac)

Homebrew 설치(Terminal)

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

Nodejs 설치(Terminal)

brew install node

Watchman 설치(Terminal)

brew install watchman

 

React-Native CLI 설치(Terminal)

npm install -g react-native-cli

 

Xcode 설치

설치 후 실행하고 Xcode > Preferences > Locations 에서 Command Line Tool 확인(빈칸이면 설치한 버전으로 설정해준다)

 

Cocoapods 설치(Terminal)

sudo gem install cocoapods

 

JDK 설치(Terminal)

brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

 

아래 코드를 Terminal에 각각 입력하면 잘 설치되었는지 확인할 수 있다.(각각의 설치된 version이 출력됨)

brew —-version
node —-version
npm —-version
watchman —-version
react-native —-version
pod —-version
java -version
javac -version

 

Android Studio 설치

https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android 스튜디오

(왼쪽) 해당 화면을 제외하고 나머지 설정은 그냥 그대로 두면 된다 / (가운데, 오른쪽) SDK Manager에서 오른쪽과 같이 해당란을 체크하고 OK버튼을 누른다

환경변수 설정(Terminal)

vi ~/.bash_profile

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

tools까지 다 썼으면 esc를 누르고 :wq 를 입력한뒤 enter

source ~/.bash_profile

 

adb 를 입력하면 환경변수가 잘 변경 되었는지 확인할 수 있다.

adb

 

개발을 시작하기 전 React-Native는 version이 바뀜에 따라 error 가 발생할 수 있으므로 아래와 같이 version을 고정시켜주는 것이 좋다.(Terminal)

npm config set save-exact=true

 

Test(Terminal)

SampleApp 이라는 이름의 React-Native Project를 생성한다.

react-native init SampleApp

SampleApp 으로 이동한 후 IOS Android 각각 실행

cd SampleApp
npm run ios
npm run android

(왼쪽) Android / (오른쪽) IOS

 

Android의 경우 emulator가 켜져있지 않으면 제대로 동작하지 않을 가능성이 있다. error가 나더라도 emulator가 켜지기 때문에 emulator 상에서 app을 종료하고 한번 더 npm run android 실행해보자. + npm run ios/android 가 아닌 npm start 로 서버만 실행시킨 경우 ctrl+C 를 누르면 종료 시킬 수 있다. + Termianl을 재실행 할때마다 아래 코드를 실행시켜줘야 한다.(이유는 모르겠지만 path가 재실행 시 적용되지 않음)

source ~/.bash_profile