[ React Native ] 윈도우에서 리액트 네이티브 개발 환경 구성 - React Native CLI [펌]

[ React Native ] 윈도우에서 리액트 네이티브 개발 환경 구성 - React Native CLI [펌]

 

React Native 개발환경?

• Expo CLI와 React Native CLI 두가지가 있음. => React Native CLI를 사용할 것!
• Expo CLI가 가장 쉽게 시작할 수 있는 방법으로 React Native 기반으로 구축된 도구 모음을 많이 포함하고 있지만 필요없는 기능까지 설치되기 때문에 무거움
• Expo CLI는 Node.js만 있으면 사용할 수 있지만 React Native CLI는 Xcode 또는 Android Studio가 필요함

 

설치 목록

 

• Node.js
• React Native CLI
• Python2(* Python3를 사용해도 괜찮지만 공식문서에서는 Python2를 설치하라고 나옴)
• JDK
• Android Studio
• Chocolatey

Chocolatey?

> Windows용 패키지 관리자로 Chocolatey를 통해 필요 패키지를 설치한다.(Node.js, Python, JDK 설치가능)

> 공식 홈페이지

 

 

1. Chocolatey 설치

1.1 Windows PowerShell 열기(관리자 권한)

 

 

1.2 Chocolatey 공식 홈페이지의 install commend 복사 + 붙여넣기

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

 

 

2. Chocolatey로 필요 패키지 설치

2.1 명령 프롬프트 열기(관리자 권한)

 

 

2.2 Chocolatey  설치 확인

> choco -v

 

 

 

2.3 Node.js 설치 및 버전 확인

> choco install -y nodejs.install

> node --version

> npm --version

 

 

 

 

2.4 Python2 설치

> choco install -y python2

 

 

2.5 jdk8 설치 및 확인

> choco install -y jdk8

 

- 설치 확인

C:\Program Files\Java

 

 

 

3. 안드로이드 스튜디오 설치

3.1 공식 홈페이지 다운로드

 

3.2 기본 설정대로 Next 후 Install

 

 

 

3.3 Do not import settings > OK

 

 

3.4 Custom > Next

 

 

3.5 Performance와 Android Virtual Device 체크 후 설치완료

 

 

4. SDK 관리자 설정

4.1 SDK Manager 선택

 

 

4.2 우측 하단 Show Package Details 체크

 

 

4.3 아래 패키지 찾아서 체크 후 확인을 눌러 설치 진행

• Android SDK Paltform 28

• Intel x86 Atom System Image

• Google APIs Intel x86 Atom System Image

• Google APIs Intel x86 Atom_64 System Image

 

 

 

5. 환경 변수 설정

5.1 내 PC 우클릭 > 속성

 

 

5.2 고급 시스템 설정 > 고급 > 환경 변수

 

5.3 상단 사용자 변수 탭의 새로 만들기

• Variable name : ANDROID_HOME
• Variable value : [ Sdk 경로 ]

 

 

 

* SDK 경로 찾기

   > SDK Manager에서 상단

 

 

5.4 사용자 변수 탭에서 Path 선택 후 편집

 

 

5.4 새로만들기

[ Sdk 경로 ]\platform-tools

 

 

5.5 확인

> 명령 프롬프트 실행 > adb

 

 

6. React Native CLI 설치

6.1 명령 프롬프트 실행

> npm install -g react-native-cli

 

- 확인

> react-native --version

 

 

7. 새로운 프로젝트 생성

7.1 버전 고정

> npm config set save-exact=true

 

7.2 프로젝트 생성

> react-native init FirstApp

 

 

 

8. 안드로이드 애뮬레이터 연결

8.1 프로젝트 폴더로 이동 후 실행

> cd FirstApp

> npm run android

 

* 환경 변수가 제대로 설정되었다면 따로 안드로이드 스튜디오에서 ADV를 실행하지 않아도 자동으로 실행된다.

 

 

출처: https://jy-tblog.tistory.com/13 [jy.log]