리액트 네이티브(react native) 설치~앱 구동 기초

< Expo 를 사용한 리액트 네이티브 설치 ~ 앱 실행 >

* 윈도우10(window10) 환경 기준임.

1. node.js 설치

 - 리액트(react) 및 자바스크립트(JavaScript) 라이브러리를 실행하기 위한 기반 

 - 접속 주소 : https://nodejs.org/ko/download/ 에 접속해서 LTS 최신 버젼 다운로드

 - 필요에 따라 yarn 설치 : https://yarnpkg.com/en/docs/install#windows-tab

* 기본 code 편집기가 없는 경우 : visual studio code 설치 (VSCode 설치 후 react native로 연관 모듈 검색해서 필요시 설치)

2. 엑스포(Expo) 설치

 - 엑스포 XDE github 에 접속해서 최신버젼 XDE 설치

 - 엑스포 XDE에 react-native 가 포함되어 있으므로 리액트 네이티브를 별도 설치할 필요 없음.

 - 접속 주소 : https://github.com/expo/xde/releases

* expo 사용하지 않을 때는 npm install -g react-native-cli 로 리액트 네이티브 설치

3. 엑스포(Expo) 가입

 - 접속 주소 : https://expo.io/

 - 로그인 : user id 사용(이메일 xxx)

4. android studio 설치(iOS는 맥북에서 x-code 설치)

 - 엑스포 사용시 PC에서 virtual 모바일 화면을 사용하기 위함. (실물 모바일 디바이스만 사용하려면 설치할 필요 없음.)

 - 접속 주소 : https://developer.android.com/studio/

 - 설치 --> 실행 --> 프로젝트 생성 --> AVD manager 실행(우상단 핸드폰 모양 아이콘) --> mobile virtual machine 생성 --> play 버튼(삼각형 모양)으로 VM 실행

 - android emulator에서 expo 개발자 메뉴 show : ctrl + M

 - iOS emulator에서 expo 개발자 메뉴 show : 폰 흔들기

 - 개발자 메뉴에서 라이브 리로딩(전체화면 리렌더딩[re-rendering], 핫리로딩(수정 부분만 리렌더링) 선택 실행.

5. 엑스포(Expo) 실행

 - 로그인 : 이메일 사용

 - 새 프로젝트 생성 : create New Project

 - VSCode에서 App.js 파일 편집 및 New_Component.js 파일 생성 등 App Coding

 - 우상단 버튼

    1) publish : 앱 배포 후 code update시 구글(google)이나 애플(apple)의 재승인/재심사 필요없이 expo 앱에서 해당앱의 수정 버젼을 publish하면 됨)

    2) share : 실물 모바일 디바이스에 expo 앱 설치해서 QR code read

    3) device : iOS 또는 Android 가상 디바이스에 앱화면 송출(iOS는 x-code, android는 android studio 를 설치해야하며, iOS 앱 제작시는 반드시 맥북에서 해야함.)

 * bash 또는 cmd에서 react native app 실행시키고, 모바일 디바이스로 QR code 인식시키면 작동안됨. 

--> 구글링의 어떤 방법을 시도해도 문제 해결안됨. (일단, 윈도우에서 지원되지 않는 것으로 간주함. 리액트 네이티브의 버그인 듯 하나 최종 확인은 안 됨.)

 --> EXPO 프로그램 실행을 통한 QR code는 작동했음.

 - 엑스포에서 실행방식이 localhost 나 LAN 방식으로 실행되면 모바일로 화면 전송 오류 발생함.(아마도 방화벽 문제인 듯) --> Restart 누르면 Tunnel 방식으로 다시 연결되지만, 계속 localhost 나 LAN 방식으로만 실행이 된다면 엑스포 캐시를 비워줘야 함. 주로 앱 빌드 후에 이런 현상 발생. 초기화면에서 최근 사용앱을 지우려하거나 엑스포의 오류로 보이는 현상들이 발생할 경우에도 엑스포 캐시를 비우면 됨.

 - 엑스포 캐시 비우기 : C:\Users\사용자이름 --> .expo 폴더안에 있는 파일을 모두 삭제 후 엑스포 재실행.

 - 가상 디바이스 화면 연동시 오류발생하는 경우 가상 디바이스를 먼저 구동 후 엑스포를 실행해 보자.

* expo에서 사용할 앱은 bash나 command에서 만들지 말고 expo에서 직접 만드는게 바람직함. 명령창에서 만들어도 작동은 하지만 약간 이상 현상 발생하기도 함.

expo에서 만든 앱의 위치는 이동하지 않는게 좋음.

expo에서 만들 때 앱이 만들어지는 위치를 제대로 지정할 것!

* 과거 버젼에는 ID를 만들어주는 uuid 모듈을 별도로 설치(npm install uuid --save)해야 했으나, 최신 버젼의 리액트-네이티브(엑스포)에는 uuid가 기본으로 설치되어 있음. (설치된 상태에서 재설치할 경우 다른 모듈을 지워버리는 오류 발생하기도 함.)

6. 앱 빌드

 - 빌드 모듈 exp 설치 : yarn global add exp

 - 빌드 명령어 확인 : exp

 - 빌드 : exp build:android

(빌드 진행 과정에서 key 관리에 대해 확인창이 뜨는데 expo가 app의 key를 관리하도록 선택해도 무방함.)

* 빌드 실행하기 전 대상 app의 app.json 파일에서 아래 내용 확인. (안드로이드의 경우 package 값을 지정해줘야 함. package 값 없으면 오류 발생.)

"ios": {

"supportsTablet": true

},

"android": {

"package": "co.test.app"

}

* github에서 다운로드 받은 expo 앱 source 를 그대로 또는 copy해서 사용시 app.json을 수정없이 그대로 빌드하면, 빌드까지는 정상적으로 진행되지만 앱을 실행시키면 react-native 와 JavaScript 의 버젼이 안 맞다는 등의 오류가 발생함.

--> 다운로드 소스를 실행시키는 경우는 필요한 code만 copy해서 사용하거나 전체를 사용하고자 하는 경우에는 app.json 의 내용을 주의해서 확인 후 빌드.

* 구글 등록시...

 - 개발자 등록하고, 앱 apk 와 스크린샷 업로드

 - 앱 빌드전 icon image 와 splash image 저장 

"icon": "./assets/icon.png",

"splash": {

"image": "./assets/splash.png",

"resizeMode": "contain",

"backgroundColor": "#ffffff"