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을 설치한다.
Reacti Native CLI를 설치하려고 npm을 입력하니 npm을 찾지 못했다.
설치가 잘못된 줄 알고 재설치를 시도해봤다. 이미 설치되었단다.
stackoverflow에 검색해봤더니 NODE_PATH라는 환경변수를 설정해줘야 한다고 한다. (chocolatey는 자동으로 잡아주더니 node는 안잡아주나보다.)
NODE_PATH
%AppData%\npm\node_modules
4. Android Studio 설치
아래 android developer 홈페이지에서 다운로드하여 설치한다.
https://developer.android.com/studio/install.html
설치 시 아래 항목을 체크하라고 한다.
Android SDKAndroid SDK PlatformPerformance (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 명령으로 이 프로젝트를 실행한다.
새로운 cmd를 열어 AwesomeProject로 이동해 react-native run-android 명령을 실행시켜 Android App을 설치및 실행한다.
이 명령을 실행하고 한참 반응이 없길래 설정이 잘못되었나 했다. 컴퓨터가 느린건지 원래 느린건지 모르겠지만 몇 분 후에 이것저것 혼자 깔기 시작하더니 정상적으로 앱이 실행되었다.
AwesomeProject 폴더 안에 index.android.js 파일을 수정 후 R키를 두번 클릭하거나 메뉴 버튼을 누르고 Reload를 클릭하면 페이지가 새로고침 된다.