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 스튜디오
developer.android.com
만질거없이 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 명령으로 실행