본문 바로가기

React

react-native : Cli 윈도우 설치방법

react-native-cli 설치방법



React-Native-Cli은 expo와 다르게 초기환경설정이 복잡한 대신, native file들을 직접 다룰 수 있다는 장점이 있다.

크게 다음과 같은 4가지 과정으로 진행된다.


과정

  1. chocolatey 설치
  2. node, python, jdk 설치
  3. 안드로이드 스튜디오 설치 및 SDK 설정
  4. react 프로젝트 생성

Requirements

  • Node.js(8.3버전 이상), Python2, JDK(8버전 이상)이 설치되어있다면 넘어가도 된다.chocolatey를 통해 세 가지가 한번에 설치할 것이다.
  • 때문에 하나 빼고 모두 설치 되어 있다면 없는 하나만 설치하는 것이 낫다. 하지만 하나라도 명령어로 간편하게 설치하고 싶다면 chocolatey를 사용하자.
  • chocolatey는 윈도우용 패키지 관리자이다.

  1. "chocolatey"를 설치한다.
    • window powershell 관리자 권한으로 실행
    • 파워셸에 다음 명령어 입력
    • 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'))
    • 에러가 없이 설치되면 choco -v 입력 -> 설치버전 확인 및 설치성공여부 확인.

Dependencies

1. Node.js(8.3버전 이상), JDK(8버전 이상), Python2 설치

> cmd 관리자 권한 실행

>

choco install -y nodejs.install python2 jdk8

위 명령어로 choco로 필요한 패키지를 한번에 설치할 수 있다.

빨간 에러가 뜨지 않는다면 설치 성공.

node -v

jdk -version

python --version

을 통해 설치버전을 확인해본다.

2. Android Studio 설치

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

해당 링크를 통해 안드로이드 스튜디오(윈도우)를 다운받는다.

next를 눌러 설치를 진행한다.

단 Android Virtual Device, Performance (Intel HAXM)​는 체크하고 설치한다.

 

 

 

3. Android SDK 설치

1) 설치가 완료됐으면 메인화면에서 Configure 클릭

(또는 아무 프로젝트나 생성한 뒤, File > Settings > Appearance & Behavior > System Settings > Android SDK > SDK Platforms로 들어간다.)

2) Click "show Package Details"

3) 다음과 같이 체크한다.

4. Android SDK 환경변수 설정

- 내 PC > (오른쪽버튼) 속성 > 고급 시스템 설정 > 환경변수 > 사용자 변수

- 변수: ANDROID_HOME

- 값: C:\Users\PC명\AppData\Local\Android\Sdk (default 경로)

에 없으면 File > Settings > Appearance & Behavior > System Settings > Android SDK Location 복사

5. platform-tools 환경변수 추가

같은 방법으로

환경변수 > 사용자 변수 > Path > C:\Users\PC\AppData\Local\Android\Sdk**\platform-tools**


React-Native-Cli 프로젝트 생성

 

- cmd창 열기

- 프로젝트 생성 원하는 폴더로 이동

// 프로젝트 생성 원하는 폴더로 이동
cd [프로젝트 폴더]

- react-native-cli 프로젝트 생성

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

- 프로젝트 폴더 이동

// 프로젝트 폴더 이동
cd [프로젝트명]

- 안드로이드 시뮬레이터와 함께 실행

// 시뮬레이터와 함께 실행
react-native run-android

 

결과화면

 

 

 

 

 

 

 

해당 화면까지 뜨면 설치완료!

ctrl + M 을 눌러 디버깅 메뉴를 사용할 수 있다는 정보도 나온다.

오류가 있을 경우 빨간색 오류문이 뜨는데 프로젝트 생성 시 생기는 오류로 버전오류, 다른 프로젝트를 닫지 않아 생기는 오류 정도를 생각할 수 있다.

오류문이 뜬다면 그대로 구글에 검색해보면 해결책이 대부분 나와있을 것이다.

그럼 #react-native 설치완료:))