Window에서 react-native Android 환경 구축하기

VM위에 설치한 리눅스로 돌리자니 내 오래된 노트북이 버티질 못했다.

리눅스는 나중에 사양 좋은 컴퓨터가 생긴다면 다시 도전해봐야겠다.

그래서! 결국 윈도우로 돌아왔다.

또 다른 프로젝트를 진행하기 위해 윈도우에서 react-native Android환경을 구축해보자.

여기저기 많은 블로그들을 찾아봤지만 지속적으로 업데이트됨에 따라 이전 정보들은 유효하지 않았다. 역시 공식 사이트가 가장 믿음직스러운 것 같다.

Window 이외에 Linux, MaxOS에 대한 가이드도 친절하게 나와있으니 참고하자!

https://facebook.github.io/react-native/docs/getting-started.html

react-native를 사용하기 위해서는 기본적으로 nodejs와 python2가 필요하다고 한다.

이를 설치하기 위해 Chocolatey라는 보조 프로그램을 먼저 설치한다.

1. Chocolatey 설치

윈도우에서는 항상 설치파일을 다운로드받아 설치했었는데 cmd로 파일을 설치해보는 건 처음이다. chochlatey라는 프로그램이 이런 것을 도와주는 프로그램인듯 하다.

cmd를 "관리자 권한"으로 실행하여 아래 명령어를 입력한다.

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

설치에 문제가 있다면 아래 공식 페이지에 접속해보자.

https://chocolatey.org/install

2. nodejs, python 설치

위 페이지에 있는 커맨드를 cmd에 입력하면 chocolatey가 설치되고 react-native 설치 가이드 페이지로 돌아와 choco 명령어를 통해 nodejs와 python을 설치한다.

choco install nodejs.install choco install python2

Reacti Native CLI를 설치하려고 npm을 입력하니 npm을 찾지 못했다.

설치가 잘못된 줄 알고 재설치를 시도해봤다. 이미 설치되었단다.

stackoverflow에 검색해봤더니 NODE_PATH라는 환경변수를 설정해줘야 한다고 한다. (chocolatey는 자동으로 잡아주더니 node는 안잡아주나보다.)

NODE_PATH

%AppData%\npm\node_modules

3. React Native CLI 설치

npm으로 React Native CLI를 설치해준다.

npm install -g react-native-cli

4. Android Studio 설치

아래 android developer 홈페이지에서 다운로드하여 설치한다.

https://developer.android.com/studio/install.html

설치 시 아래 항목을 체크하라고 한다.

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

5. Android SDK 설치

5-1. API 23인 Marshmellow를 설치한다.

현재 24(Nauget)이 나온 상황인데 아직 지원을 하지 않는 것인지는 알아보아야겟다.

(Show Package Details 버튼을 클릭하면 세부 메뉴를 볼 수 있다.)

5-2. SDK Tools로 넘어가 Android SDK Build-Tools 23.0.1도 설치한다.

5-3. 안드로이드 또한 환경변수를 설정해주어야 한다.

아래 경로는 sdk가 설치된 경로이다. 경로를 찾아 입력해준다.

ANDROID_HOME

C:\Users\User\AppData\Local\Android\sdk

환경변수 설정을 완료하면 cmd를 다시 실행해준다.

6. 실행해보기

AVD를 실행하거나 실제 Android 디바이스를 연결합니다.

(저는 Genymotion이라는 프로그램으로 진행했습니다.)

react-native init 명령을 통해 AwesomeProject라는 이름으로 프로젝트를 생성하고 react-native start 명령으로 이 프로젝트를 실행한다.

react-native init AwesomeProject cd AwesomeProject react-native start

새로운 cmd를 열어 AwesomeProject로 이동해 react-native run-android 명령을 실행시켜 Android App을 설치및 실행한다.

react-native run-android

이 명령을 실행하고 한참 반응이 없길래 설정이 잘못되었나 했다. 컴퓨터가 느린건지 원래 느린건지 모르겠지만 몇 분 후에 이것저것 혼자 깔기 시작하더니 정상적으로 앱이 실행되었다.

AwesomeProject 폴더 안에 index.android.js 파일을 수정 후 R키를 두번 클릭하거나 메뉴 버튼을 누르고 Reload를 클릭하면 페이지가 새로고침 된다.