React Native Expo 초간단 환경 설정 (Window10)

React Native로 개발을 하려면 크게 2가지 방법이 있습니다.

 

하나는 컴퓨터 내 에뮬레이터를 이용하여 가상의 핸드폰으로 개발을 하는 것과

두 번째는 Expo라는 앱을 이용한 (실제) 핸드폰으로 연결하는 방법이 있습니다.

 

Expo는 개발자의 생산성을 높이는 장점이 있고 간편하여 저는 이 방법을 택하였습니다.

 

여기서는 부가적인 설명없이 환경설정 단계만 간단하게 설명하였으니,

이렇게만 하시면 환경설정 하는데에는 문제없이 설치할 수 있습니다.

 

1. Node.js 10 LTS 이상의 버전 및 npm 6이상의 버전 설치

   node -v 와 npm -v 명령어를 입력하여 버전을 확인한다.

 

 

2. cmd 창에서 실시 (GIt Bash로 설치를 여러 번 했으나, 명령어 인식이 안되어서 cmd 창에서 해결 완료)

 

3. Expo CLI 설치

npm install -g expo-cli

 

 

 

4. Expo 프로젝트 생성

expo init 프로젝트명

 

 

 

5. 템플릿 설정 (저는 기본인 blank 설정을 하였습니다.)

 

 

1. blank

 

비어있고 한개의 페이지만 존재하는 프로젝트를 만드는 템플릿

 

2. tabs 

 

react-navigation을 통해 여러 페이지가 만들어져 있는 템플릿

 

6. 해당 폴더 진입

cd 프로젝트명

 

 

7. Expo 프로젝트 실행 방법

expo start  or  npm start  or yarn start  (모두 동일)

 

 

 

8. 자동으로 expo dev tool 웹페이지가 열림

 

 

 

9. 핸드폰에 'Expo'(ios) or 'Expo client'(Android) 애플리케이션을 다운

   ※주의 컴퓨터와 핸드폰이 같은 인터넷으로 연결

 

10. expo 앱 실행

 

11. 로그인 (ios는 로그인 필수)

 

12-1. (Android) expo dev tool 웹 페이지의 QR코드 expo앱으로 스캔

 

12-2. (IOS) 핸드폰 카메라 앱으로 QR코드 스캔