React Native in Android #1

Long ago and far away… 여러가지 이슈로 인해서 React Native 를 도입하게 되었습니다. 도입하게 되는 이유에 대한 설명은 뭐 워낙 관련 자료가 많으니 패스하고… 개발자가 가장 먼저 하는 일, 설치부터 해보도록 하죠. Getting Started 문서를 보고 차례대로 설치해 봅니다.

Homebrew 를 설치합니다.

Homebrew 는 Apple 에서 제공하지 않는 패키지들을 관리하는 녀석이죠. 터미널을 열고 아래 명령을 입력합니다.

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

그리고 테스트 삼아 업데이트를 한번 해봅니다.

brew update

Watchman 을 설치합니다.

Watchman exists to watch files and record when they change. It can also trigger actions (such as rebuilding assets) when matching files change.

brew install watchman

Node 를 설치합니다.

Node 버젼 관리를 위해 NVM (Node Version Manager: Simple bash script to manage multiple active node.js versions) 부터 설치합니다.

brew install nvm

이후 터미널에 나오는데로 따라하면 되는데요. 전 일단 nvm 디렉토리가 없다고 만들라고 나오네요.

mkdir ~/.nvm

그리고 ~/.bash_profile 에 NVM_DIR 설정을 하라고 하네요. 파일이 있는지 부터 확인하려니 hidden file 부터 볼 수 있도록 설정해야 겠네요. Finder 에서 Command + Shift + . 를 누르면 해당 기능 토글이 됩니다. 해당 파일이 없으니 만들고 아래 내용을 추가합니다.

export NVM_DIR="$HOME/.nvm"
. "/usr/local/opt/nvm/nvm.sh"

source ~/.bash_profile 하거나, 재부팅 한번 하시고, 이제 NVM 을 통해 Node 를 설치합니다.

nvm install node
nvm alias default node

Node v7.8 이 default 로 설정되었습니다.

React Native CLI 를 설치합니다.

Node.js comes with npm, which lets you install the React Native command line interface.

npm install -g react-native-cli

IDE 를 설치합니다.

iOS 개발은 Xcode 를, Android 개발은 Android Studio 를 설치하고, Android SDK 등 모바일 앱 개발에 필요한 툴을 설치합니다.

Android 의 경우 아래 항목은 반드시 설치되어야 합니다.

Google APIs
Android SDK Platform 23
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image

~/.profile 에 ANDROID_HOME 설정도 필요합니다.

export ANDROID_HOME=${HOME}/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

JDK 를 설치합니다.

JDK 버젼 관리를 위해 jEnv 를 설치합니다.

brew install jenv

그리고 ~/.bash_profile 에 jEnv 설정을 해야 합니다. 아래 내용을 추가합니다.

export PATH="$HOME/.jenv/bin:$PATH"
eval "$(jenv init -)"

아래 경로에서 설치된 JDK 버젼을 확인합니다. 전 하나도 없더군요.

cd /Library/Java/JavaVirtualMachines

JDK 를 설치합니다.

brew cask install java

설치된 경로를 확인하고 jEnv 에 추가합니다. 그리고 Java 버젼 확인을 해보세요.

jenv add /Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home
java -version

AwesomeProject 를 설치하여 테스트 합니다.

프로젝트를 초기화 합니다.

react-native init AwesomeProject

초기화 하면 생성되는 프로젝트를 본인의 안드로이드 프로젝트 폴더로 이동합니다. 이후 실행해 보세요.

cd /Users/richard/Documents/Android/AwesomeProject
react-native run-android

성공 했네요. 축하합니다. 아래 링크로 이어집니다.