EXPO ( windows 환경 설치 ) + QR 코드 인식 이슈

이 글은 Windows(윈도우) 에서 설치하는 방법이다.

1. 직접 스마트폰으로 React-Native를 실행하는 방법

2. Visual Studio Code를 통한 React-Native 프로젝트 개발

3. 안드로이드 스튜디오를 통한 React-Native 실행하는 방법

위 3가지를 다룰 것이다.

 

기본 React Native 설치하는 방법

2018/11/11 - [Develop/React Native] - React Native 설치 Windows, Android Studio 사용하기.

 

 

Expo 가 v31.0.0 이 되면서 홈페이지에 XDE설치하는 것이 사라지고 Expo SDK를 설치하는 것이 생겼다.

예전의 강의들을 찾아보면 죄다 XDE를 설치하라고 되어있는데, XDE를 설치하고 싶다면 v29이하에서 설치할 수 있다.

 

https://docs.expo.io/versions/latest/

위 사이트에 접속해서 v29.0.0 의 Installation 메뉴엔 XDE를 설치 하는 것이 있다.

 

하지만 이 글은 최신버전인 v31.0.0 을 설치하는 방법이다.

 

1. https://docs.expo.io/versions/latest/ - 사이트에 접속하여 Installation 메뉴에 들어간다.

 

그리고 Node.js가 없다면 Node.js를 먼저 설치한다.

 

 

 

2. Node.js 가 정상 설치되었다면

 

package.json 파일을 만들어야한다. (안만들고 바로 expo설치하니까 없다고 에러가 뜰 수도 있음)

 

?

1 2 3

npm --version npm install express npm init -y

이렇게 하면 package.json 파일이 생성되며 생성된다면 아래와 같이 입력한다

 

?

1 2 3 4 5 6 7 8 9 10 11 12

{ "name": " ", "version": "6.4.1", //처음에 1.0.0 이라고 되어있는 걸 최신 버전에 맞게 수정 "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

 

다음 Windows의 cmd창을 열어 아래의 명령어를 입력한다.

?

1	npm install -g expo-cli

이러면 expo설치는 끝이난다.

 

3. expo 설치를 한후 react-native 프로젝트를 만든다.

 

?

1	expo init test-app

 

하면 프로젝트를 고를 수 있다 빈프로젝트로 시작하기와 아닌 걸로 시작하기. 위는 키보드의 화살표 커맨드로 선택할 수 있으며

엔터를 하면 프로젝트가 생성된다.

프로젝트 생성 후

?

1 2	cd test-app npm start 또는 expo start

실행을 하게되면

 

 

QR코드가 생성된다.

이 QR코드를 안드로이드 휴대폰에 Expo라는 앱을 깔아서 스캔하면된다.

 

4. Expo 어플리케이션 설치

※ 주의할점 스마트폰과 컴퓨터의 네트워크 환경이 같은 환경에 있어야 어플리케이션이 실행됩니다.!! 같은 환경이 아니라면

7번으로

Play스토어에 들어가서 Expo라는 앱을 설치한다. 그 후에 어플리케이션을 실행한다.

 

 

그리고 위 사진에 Scan QR Code를 클릭하고 위의 QR코드를 스캔하면

 

 

위와 같이 빌드를 한다. 맨 처음 빌드할 땐 조금 느리기때문에 기다린다.

 

빌드가 성공하면 위와 같이 되며 Expo를 이용한 React-native 설치 및 실행이 기본적으로 끝이난다.

(아래 Visual Studio Code로 프로젝트를 한번 간단하게 만져 볼 거기 때문에 종료시키지말고 기다린다.)

 

5. React Native Visual Studio Code

 

React Native 의 에디터로 atom, vscode, sublimetext 등이 있지만 vscode가 가장 빠르다고 한다. 그래서 vscode를 사용한다.

https://code.visualstudio.com/ 옆의 홈페이지를 통해 간단하게 설치를 할 수 있다.

다음 Visaul Stuido Code를 연다 연다음 아까 만든 test-app 프로젝트를 추가한다.

 

 

6. App.js 에 들어가서 글 수정하고 Ctrl+s 를 눌러 저장을 해본다.

아래의 Open up App.js ~~~~부분을

 

 

아래 테스트!!! 처럼 하고 바로 Ctrl+s를 눌러 저장을 해보자

 

 

 

저장을 했으면 다시 스마트폰의 어플리케이션 화면을 보면 테스트!!! 라고 바로 바껴져있다.

실시간으로 바로바로 바뀌는 것을 Expo라는 것을 통해 확인 할 수 있다.

 

7. Expo Android Studio

 

https://developer.android.com/studio/install?hl=ko 사이트에 접속하여 안드로이드 스튜디오를 우선 설치한다.

 

Tools - SDK Manager에 들어간다.

설치후 React Native 는 4.1 부터 지원하므로 필자는 9.0과 8.1를 설치했다.

그리고 SDK Location을 복사한다.

 

 

복사한 SDK LOCATION을 환경변수에 추가한다 ANDROID_HOME 그리고 JAV_HOME이라는 환경변수를 추가한다

JAVA_HOME은 c드라이브의 programfile에 java폴더의 jdk 폴더 경로를 추가한다. (C:\Program Files\Java\jdk1.8.0_191)

 

 

 

그리고 SDK Tools에 들어가 체크되어있는 것들을 설치한다.

 

 

 

그리고 Tools - AVD Manager에 들어가서

 

Create Virtual Device를 통해 ADV를 설치한다 필자는 API Ver 28을 설치했다. 그리고 Action의 시작버튼을 클릭하면 가상에뮬레이터가 실행된다.

 

 

마지막으로 다시 cmd창에서

아래의 명령어를 입력한다.

?

1	npm run android 또는 expo start --android

 

 

설치후 성공적으로 테스트!!! 화면이 에뮬레이터에 뜨는 것을 확인할 수 있다.

출처: https://blog.wky.kr/24 [PangYeon`s IT Log]

 

 

 

 

+ 스마트폰 QR 코드 인식이 안되는 경우 

( 아이피 주소가 다른 경우가 있었다.  동일한 환경을 만들어 주어야 한다 )

 

1. ipconig /all 을 쳐서

IPv4 Address 를  알아야 한다.  ( 와이파이, 이더넷 환경에 따라 선택해서 복사 한다 . )

 

2. 프로젝트를 시작하는 폴더 ( npm start 나 expo start 를 입력하는 위치에 가서 CMD 창을 열어준다 )

 

3.  set REACT_NATIVE_PACKAGER_HOSTNAME=my-custom-ip-address 를 작성해 준다

( my-custom-ip-address  는  위에서 알아낸  IPv4 Address 주소를 입력하는 것이다. )

 

예시 )

 For example:

4. 다시 npm start 나 expo start 를 입력후  QR 코드 스캔을 해본다.

 

 

+ DevTools 가 뜨지 않는 경우 ( npm start Or expo start 후 실행되는 인터넷 창 )

익스플로어에서는 까만 화면만 나왔지만, 주소를 복사한 후 크롬에서 실행하니 잘됨.