React_Native_cli 프로젝트 생성

리액트 네이티브를 cli로 프로젝트를 생성하여 android 에뮬레이터로 실행해 보겠습니다.

 

 

-------------------윈도우 개발환경 구축-------------------

 

 

1) node.js, python2, JDK, React Native Cli 설치

일단 Chocolatey를 설치하여 cmd창에서 설치를 돕도록 하겠습니다.

실행 -> cmd 에서 

 

 

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

 

 

다음과 같이 입력하여 Chocolatey를 설치합니다.

Chocolatey 버전확인 :  choco –version

 

------------------------------------------------------------------------------------------------------------------------------

choco install -y nodejs.install       :       nodejs 설치합니다.

 

버전확인 :
node --version    node 버전확인

npm --version     npm 버전확인     

 

* npm(nodejs 를 깔면 npm(노드 패키지 매니저)자동 설치됩니다.)  

 

------------------------------------------------------------------------------------------------------------------------------

 

 

choco install -y jdk8                :         jdk8을 설치합니다.

* 리액트네이티브로 안드로이드 앱을 개발하기 위해서 JDK(Java Development Kit)를 설치해야 한다.

 

버전확인 : 

java -version    : 자바의 버전 확인

javac -version   : 자바 컴파일러 버전 확인

 

 

------------------------------------------------------------------------------------------------------------------------------

 

choco install -y python2                   python2을 설치합니다.

 

python --version    : 파이썬 버전 확인

 

 

------------------------------------------------------------------------------------------------------------------------------

 

이제 모두 설치가 완료되었다.

 

안드로이드 스튜디오를 설치해보자.

 

 

2) 안드로이드 스튜디오 설치 

안드로이드 스튜디오 설치 

http://developer.android.com/studio

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

 

 

 

 

만질거없이 next를 누르며 Android Virtual Device를 체크후 Next > 후 설치를 한다.

 

 

 

 

Do not import settings를 선택 후 OK를 누른다.

 

 

 

 

 

Custom을 체크 후 Next를 한다.

 

 

 

 

전부 체크후 Next를 한다.

 

 

 

 

2.0 GB 나 4.0 GB 를 선택 후 Next를 한다.

 

 

 

 

 

Configure에서 SDK Manager를 클릭한다.

 

 

 

 

* Android 9.0(Pie)
         - Android SDK Platform 28
         - Sources for Android 28
         - Intel x86 Atom System Image
         - Google APIs Intel x86 Atom System Image
         - Google APIs Intel x86 Atom_64 System Image

다음과 같이 선택 후 설치 한다.

 

 

 

 

 

 

윈도우 키 누른 후 환경 변수를 입력해 "시스템 환경 변수 편집"  을 들어간다.

 

 

 

 

 

환경 변수 클릭해 사용자 변수에 새로만들기 를 클릭한다. ( SDK Manager 상단에 위치가 나와있다. )

아래와 같이 추가 한다.

 

 

 

 

 

 

 

사용자 변수에 Path 를 편집한다.

아래에 C:\Users\[사용자 이름]\AppData\Local\Android\Sdk\platform-tools 을 추가한다.

 

 

 

 

 

AVD Manager에 들어가서 Create Virtual Device를 클릭한 후 Nexus 5X 를 누른후 Next로 넘어간다.

 

 

아까 Android 9.0 버전을 다운 받았기에 똑같이 Pie 버전(9.0버전) 을 누른 후 Finish를 누른다.

 

 

 

visual studio code 터미널 -> npm install -g react-native-cli

* react-native-cli 최신 버전 설치

* 특정 버전 설치 법  :  npm install -g react-native-cli@1.3.0

* 버전 고정 :  npm config set save-exact=true

프로젝트 생성  :  react-native init [프로젝트 명]

위의 사진과 같이 Test_App 파일 아래에 설치된 것을 확인 할 수 있다.

 

 

 

 

그럼 이제 에뮬레이터를 실행시키고

앱 실행 :  npm run android 

 

 

을 실행시키면 아래와 같이 실행이 된다.

 

윈도우 에서 React Native Cli 설치하여 에뮬레이터로 실행보았습니다.

 

3줄 요약 :

1) Chocolatey로 nodejs , jdk8 , python2 설치

2) 안드로이드 스튜디오 설치 AVD Manager 에서 에뮬레이터 설치

3) npm run android 명령으로 실행