완숙의 블로그

[React-Native] 2 - 가상 디바이스 (Virtual Device) 본문

Programing Language/React-Native

[React-Native] 2 - 가상 디바이스 (Virtual Device)

완숙 2019. 7. 11. 13:55

QR 코드를 내폰으로 스캔해서 확인했지만

너무 귀찮은 관계로!

가상 디바이스를 사용할 수 있도록 하는 법을 배워보자!

 

 

Android Studio 설치

스크린샷 2019-07-09 오전 1 25 01

Android Studio 설치하기

 

그대로 쭉~ 설치 후에 실행해보자.

 

스크린샷 2019-07-09 오전 1 26 02 스크린샷 2019-07-09 오전 1 26 37 스크린샷 2019-07-09 오전 1 26 39 스크린샷 2019-07-09 오전 1 26 48 스크린샷 2019-07-09 오전 1 26 59 스크린샷 2019-07-09 오전 1 27 39

 

설치가 완료된 후 Finish를 눌러주면 끝!

 

 

 

Android Virtual Device 만들기

스크린샷 2019-07-09 오전 1 29 41

스크린샷 2019-07-09 오전 1 34 00

빈 프로젝트 클릭!

 

스크린샷 2019-07-09 오전 1 34 21

이름 정하고, Finish 누르기.

 

스크린샷 2019-07-09 오전 1 40 20

나온 창에서 빨간색 화살표가 가리키는 녀석 누르기

 

 

스크린샷 2019-07-09 오전 1 41 38

가상 디바이스를 선택하는 곳!

생성 누르기.

 

스크린샷 2019-07-09 오전 1 41 58

어떤 디바이스를 선택할지 고르고 Next!

 

스크린샷 2019-07-09 오전 1 44 12

맨 위에껄로 다운로드 받자.

안드로이드 버전이다.

다 받은 뒤 Next!

 

스크린샷 2019-07-09 오전 1 47 09

이대로 Finish!

 

 

여기서 만약에 안된다면, 아마 폴더의 소유자 설정을 잘못해서일 가능성이 높다.

help -> show log file 메뉴를 눌러 로그파일의 첫 문장을 구글링해서 해결하자.

 

 

스크린샷 2019-07-09 오후 1 51 46

우리의 새로운 디바이스가 추가되었다!

 

재생 버튼을 눌러보자.

 

스크린샷 2019-07-09 오후 1 53 12

 

멋지다!

 

 

스크린샷 2019-07-09 오후 1 54 56

 

자, 그러면 이제 저번에 했던, 내 앱을 이 가상 디바이스로 실행해보자.

 

 

Android Virtual Device에서 앱 실행하기

저번에 만들었던 프로젝트 폴더(first-project) 에 터미널로 들어간뒤,

npm start 를 쳐주자.

 

이번에도 역시 오류가 난다면 권한 설정때문이니, sudo 키워드를 붙인 뒤에 실행해주자.

 

스크린샷 2019-07-09 오후 2 09 53

여기서! Run on Android device/emulator 를 눌러주자.

 

이 때, 가상 디바이스가 떠있는 상태여야 한다!

 

 

스크린샷 2019-07-09 오후 2 11 47

 

그러면 이렇게 내 가상 디바이스에, expo 앱을 다운받는 둥 여러가지 일을 하고 있다.

 

 

스크린샷 2019-07-09 오후 2 13 04

 

이렇게 뜰텐데, 허용해주자.

 

그러고 좀 기다리면!

 

스크린샷 2019-07-09 오후 2 21 25

 

짜잔! 우리 핸드폰에서 하던 방식대로 뜨는 것을 알 수 있다.

 

 

 

 

Xcode 설치하기

iOS에서 동작하는 것을 보고 싶으면, Xcode를 받아야 하는데,

맥 유저만이 할 수 있다 ㅎㅎ

 

Xcode를 받은 뒤에,

 

아까 켜진 웹 화면에서, Run on iOS simulator 를 누르게 되면,

 

`Simulator not installed. Please visit https://developer.apple.com/xcode/download/ to download Xcode and the iOS simulator. If you already have the latest version of Xcode installed, you may have to run the command sudo xcode-select -s /Applications/Xcode.app.

이런 에러가 뜰텐데,

 

xcode-select 는 개발자용 command line 도구이다.

 

터미널 창에

스크린샷 2019-07-09 오후 2 37 02

 

 

이렇게 치고, 설치해주자.

 

이제 다시 Run on iOS simulator 를 누르면!

 

스크린샷 2019-07-09 오후 3 44 14

켜지고!

 

스크린샷 2019-07-09 오후 3 50 17

예쁘게 뜬다.

 

그리고 다시한번 Run on iOS simulator 를 누르게되면,

expo 앱을 받고 실행된다.

 

'Programing Language > React-Native' 카테고리의 다른 글

[React-Native] 1 - 소개 / 설치 / Virtual DOM  (0) 2019.07.11
Comments