[React Native] Windows 에서 react-native 로컬환경 세팅

순서

1. nvm 설치 (Node Version Manager)

2. Node.js 설치 (12.13.1 버전 사용)

3. Python 설치 <--- 생략 가능

4. Open JDK 설치

5. Git 설치 <--- 생략 가능

6. React Native Cli 설치

7. Android Studio 설치 / 세팅 

8. 에뮬레이터 & 안드로이드 폰 실행

 

 

1. nvm 설치 (Node Version Manager)

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

위 사이트에서 nvm-setup.zip 을 받은 후 설치

 

 

2. Node.js 설치 (12.13.1)

명령 프롬프트 - 관리자 권한으로 열기

> nvm install 12.13.1

node.js 12.13.1 설치

> nvm on
> node -v
> npm -v

설치 후 nvm 활성화 및 설치된 Node.js 버전 확인

> nvm use 12.13.1

Node.js 12.13.1 버전을 사용한다는 명령어

 

 

3. Python 설치

https://www.python.org/downloads/

Download Python

위 사이트에서 Python 최신버전 다운로드 후 설치

React Native 빌드 시스템은 Python에 의존하기 때문에 설치 해줘야 함 (그런줄 알았는데, 파이썬 설치 안해도 되더라..)

(MAC OS 에는 기본적으로 Python 이 설치되어 있으므로 생략해도 무방)

> python --version

설치 후 버전 확인

* 가이드에는 Python2 를 설치하라고 되어있는데, 최신버전 설치해도 무방함

 

 

4. Open JDK 설치

www.oracle.com/kr/java/technologies/javase/javase-jdk8-downloads.html

위 사이트에서 Java SE Development Kit 섹터에 Windows x64 다운로드 후 설치

> java -version

설치 후 확인

 

 

5. Git 설치

git-scm.com/download/win

Git - Downloading Package

위 사이트에서 64-bit Git for Windows Setup. 다운로드 후 설치

 

 

6. React Native Cli 설치

- 기존 사용하던 Git Repository가 없을 때 (처음 프로젝트 시작 할 때)

위 5번 과정 생략 가능.

> npm install -g react-native-cli
> react-native --version

새 react-native 프로젝트 생성

새 프로젝트를 생성할 폴더위치로 이동 후 아래 명령어 입력

> react-native init myProject

'myProject' 프로젝트 이름은 마음대로 설정하면 됨

 

 

- 기존에 Git Repository를 사용하고 있어서 프로젝트를 받아올 경우

위 5번 과정을 하고나서 프로젝트 폴더 내로 이동해서 clone 명령어로 Git에 있는 소스를 받아온다.

그 다음 받아온 Git 소스 폴더 내로 이동하여 React Native Cli 설치

> npm install -g react-native-cli
> react-native --version

그리고 npm install 로 package.json 내에 적혀있는 라이브러리들을 node_module 폴더에 설치한다 

> npm install

설치된 프로젝트 안에 android/gradle.properties 에

-org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

위 내용 삭제

 

 

 

 

7. Android Studio 설치 / 세팅

developer.android.com/studio/

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

위 사이트에서 Android Studio 다운로드 후 설치

 

- Import Android Studio Settings From .. 

> Do not import settings 선택

 

- Install Type

> Custom 선택

 

- SDK Components Setup

> Performance 체크

> Android Virtual Device 체크

> Android SDK Location 경로 확인 (보통 C:\Users\자신의PC계정명\AppData\Local\Android\Sdk)

> Next로 설치

 

- SDK Manager 선택

- 우측 하단 Show Package Details 체크 후

> Android SDK Platform xx

> Intel x86 Atom System Image

> Google APIs Intel x86 Atom System Image

> Google APIs Intel x86 Atom_64 System Image

 

위 항목들 체크 후 설치

SDK Tools 에 NDK 관련 라이브러리들도 설치

> Android SDK Build-Tools

상세보기로 안에 보면 빌드 버전이 있는데, react-native 프로젝트 폴더 안에 /android/build.gradle 파일에 있는 buildToolsVersion 에 맞게 설치 해줘야 한다

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 16
        compileSdkVersion = 29
        targetSdkVersion = 29
}

> NDK (Side by side)

> Google Play service

 

 

- 환경변수 세팅

내 PC 우클릭 > 속성 > 고급시스템 설정 > 고급탭 > 환경변수 클릭

사용자 변수 > 새로 만들기 클릭 후 아래 경로 지정

변수 이름 : ANDROID_HOME

값 : 자신의 Sdk 경로

사용자 변수 > path 편집

 

* 참고사항

사용자변수에만 세팅 했지만, 시스템 변수로 세팅해도 무방함

사용자 변수 : PC의 각 계정에서 사용하는 변수임 (해당 사용자의 계정으로 PC 로그인 시에만 적용 됨. 지역변수 개념)

시스템 변수 : 모든 계정 적용 (전역변수 개념)

 

SDK Manager 에서도 sdk 경로 확인

 

 

8. 에뮬레이터 & 안드로이드 폰 실행

- 에뮬레이터로 띄울 때

\Android Studio Configure 클릭 후 AVD Manager 실행

설치하고 싶은 사이즈의 에뮬레이터 설치

처음에 Pixel 3 을 설치 했는데, Firebase AUTHENTICATION 오류가 자꾸 떠서

 

Pixel 2 로 다시 설치, Release Name 은 Q 버전으로 설치했다. (안드로이드는 최신버전으로 하면 잘 안되는것 같아서 안정성 면에서 한버전 아래껄로 설치권장)

 

 

이 과정을 안하게 되면, React Native 로 에뮬레이터를 띄울수 없기 때문에 

> react-native run-android 명령시 오류

 

- 안드로이드 폰으로 연결해서 띄울 때

* 폰 설정 (삼성 갤럭시 S10 기준)

1. 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드번호 부분을 연타 (7~8회) 하면 개발자모드로 바뀜

2. 다시 설정 부분으로 가서 젤 하단으로 내려보면 '개발자 옵션' 탭 클릭

3. 디버깅 부분에서 USB 디버깅 사용으로 변경

4. Samsung폰 USB 연결을 위한 DEX 설치 또는 삼성 통합 USB 드라이버 설치

www.samsung.com/sec/apps/samsung-dex/

삼성 덱스 | 앱 & 서비스 | Samsung

local.sec.samsung.com/comLocal/support/down/kies_main.do?kind=usb

https://local.sec.samsung.com/comLocal/support/down/kies_main.do?kind=usb

폰 설정은 준비 완료

 

USB로 PC와 폰 연결

명령 프롬프트 관리자 실행

  

> adb devices

위 명령으로 연결된 디바이스명 확인

adb 는 SDK 를 설치할때 Sdk/platform-tools 안에 같이 들어있을 것임

> cd 프로젝트 폴더명

에뮬레이터 실행 할 react-native 프로젝트 안으로 이동 후 아래 명령어로 에뮬레이터 실행

> npm run android

또는

> react-native run-android

둘 다 에뮬레이터 실행하라는 명령어임

폰이 연결되어 있다면 폰에서 에뮬레이터가 실행 되고,

연결 되어있지 않은 상태면 Android Studio 에뮬레이터가 실행 됨

 

* MAC OS 에서는 기기에서 에뮬레이터를 실행하기 위해서는 --device 옵션을 붙여주면 기기를 찾음

> react-native run-android --device

배포 시

> react-native run-android --device variant=release

정상 실행되면 아래 화면이 뜨면서 에뮬레이터가 실행 된다

 

 

만약 에뮬레이터 실행 시 문제 발생 시 : 

- 화면 멈춤

위 그림 처럼 하얀색으로 먹통이거나 page 오류가 뜨면, 에뮬레이터 안에서 인터넷 브라우저를 켜서 인터넷이 정상적으로 실행되는지 확인하자.

에뮬레이터 내에서 인터넷이 안된다면 이미지처럼 네트워크 설정 변경 (기본 설정 DNS 서버 : 8.8.8.8)

- 스크립트를 실행할 수 없다는 오류 ~.ps1 가 보일 때

power shell 에서 

> Set-ExecutionPolicy -Scope CurrentUser

> ExecutionPolicy : RemoteSigned 입력

> A 입력

 

- run 'react-native start 오류일때

1. [패키지명]/android/app/src/main/assets 폴더가 있는지 확인하고 없으면 생성

2. [패키지명]/android 폴더에서 ./gradlew clean 실행

3. [패키지명] 폴더에서 아래 명령어 실행

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

4. react-native run-android

 

아래 블로그 참고 :

dlevelb.tistory.com/1142

[react-native] 오류 : Unable to load script. Make sure youre dither running a Metro server...

참고 : 

https://dev-yakuza.github.io/ko/react-native/android-running-on-device/
https://medium.com/@adityasingh_32512/solved-unable-to-load-script-from-assets-index-android-bundle-bdc5e3a3d5ff

Solved: Unable to load script from assets ‘index.android.bundle’