[React Native] React Native 설치, 환경설정

React Native로 간단한 TodoList 예제를 만들게 되었습니다. 

이번 프로젝트에서는  react native cli를 사용한 ios와 안드로이드 앱을 생성할 예정입니다. 

 

 

React Native앱을 시작하기 전 필요한 환경설정입니다. 

 

1. Node js  설치

homebrew를 사용하여 설치합니다. 

brew install node

node --version

NodeJS가 성공적으로 설치되었다면 --version 커맨드를 통해 버전을 확인할 수 있습니다. 

 

2.  Watchman 설치

brew install watchman

watchman --version

 

+ cocoapods 설치

sudo gem install cocoapods

pod --version

3. React Native Cli 설치

1번에서  설치한 nodejs의 npm 을 사용하여  react native cli를  설치합니다. 

npm install -g react-native-cli

react-native --version

 

4. 안드로이드 스튜디오 설치

안드로이드 앱 개발을 위해 안드로이드 스튜디오를 설치합니다. 

https://developer.android.com/studio?hl=ko

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

안드로이드 설치 후 개발에 필요한 SDK를 설치합니다. 

 

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

안드로이드의 경우 .bash_profile 파일을 열어서 환경변수를 설정해야한다. 

vi ~/.bash_profile

 

source ~/.bash_profile
adb

환경변수를 설정했다면 source ~/.bash_profile 실행 후 adb 입력 시 설정된 화면을 볼 수 있다. 

 

5. XCode설치

앱스토어에서 Xcode를 검색해 설치합니다. 

 

 

 

React Native 프로젝트 생성

 

react-native init ProjectName

 

- IOS 실행

react-native run-ios

 

 

 

ios 실행 시 기본 앱이 실행된다. 

 

 

- Android  실행

react-native run-android

 

 

 

실행화면.