React Native에서 Visual Studio Android Emulator 사용하기

윈도우에서 React Native 환경을 구축하던 중에

아주 제대로 삽질을 했다.

웹 개발 관련해서는 대부분 docker에서 작업 중인데,

hyper-v 환경을 이용 중이었다.

문제는 hyper-v 환경에서는 AVD를 사용할 수가 없다.......

hyper-v를 끄고 설정을 했었긴 하지만,

기존 개발환경을 버리기는 여러모로 어렵다보니 결국 hyper-v에서 할 수 있도록 환경을 꾸민다고 제대로 삽질을 하게 된 것이다.

삽질한 내용중 핵심은 나중에 적겠지만, PATH에 platform-tools와 tools를 추가하는 것었다.

참고로 구축하는 방법은 아래 동영상을 참조하거나(안드로이드 스튜디오에서 VS Android Emulator 사용하는 방법이다.)

https://www.youtube.com/watch?v=PbeyGCtdtl8&t=17s

문서를 참조해도 좋다.(물론 영문으로 나온다.)

http://blog.tpcware.com/2017/03/visual-studio-2017-android-emulation/

참고로 문서에서는 최종 인터넷 접속 관련 부분도 있지만, 최근에는 대부분 자동으로 설정된 체 만들어질 때가 많아 생략해도 된다.

react native 설치가 끝나고 안드로이드 스튜디오 설치도 끝나 가상에뮬레이터 부분만 하면 되는 것을 전제로 설명한다.

그 외 설치 방법은 공식 문서에 자세히 나와 있다.

( https://facebook.github.io/react-native/docs/getting-started.html )

첫 째로 할 일은 안드로이드 스튜디오에서 Visual Studio Android Emulator를 사용할 수 있게 하는 것이다.

일단 Visual Studio Android Emulator를 설치한다.

다행히도 Android Emulator 설치만 할 수 있는 파일을 제공한다.(VS를 다 설치하지 않아도 된다.)

https://www.visualstudio.com/ko/vs/msft-android-emulator/

에서 설치파일을 다운 받아 설치한다.

안드로이드 에뮬레이터를 실행시킨다.

그리고 마쉬멜로 기기를 선택해 추가한다.

(추가 후에는 권한이 필요하다며 로그아웃 후 로그인 하는 것을 요구한다.)

안드로이드 스튜디오를 실행한다.

File > Settings로 이동한다.

Tools의 External Tools로 이동한다.

+버튼을 클릭하여 추가한다.

Name : VS Emulator 5.7 Mashmallow(원하는 데로)

Description : Quick Launch(원하는데로)

Program : C:\Program Files (x86)\Microsoft Emulator Manager\1.0\emulatorcmd.exe

Arguments : /sku:Android launch /id:4B675905-D130-4929-91C8-FC62E9C03A24

프로그램 등록

Arguments에 넣을 값은 Command 창에서 확인을 해야한다.

cmd.exe를 실행하여 아래의 명령을 실행하면,

기기 리스트가 나오며 ID 가 필요하다.

emulatorcmd.exe /sku:Android list /type:device

아래의 ID가 필요하다.

이제 테스트를 해보면 잘 시작되는 것을 확인할 수 있다.

성능은 확실히 AVD보다 나은 것 같다.

이제 안드로이드 스튜디오에서 에뮬레이터로서 인식하도록 작업을 해줘야 한다.

이제 에뮬레이터를 VS Emulator를 사용하기 위해 추가 설정을 해준다.

Run > Edit Configurations를 실행하고

아래와 같이 Use same device for future launches를 체크해준다.

이제 Run을 실행해 정상적으로 Emulator를 사용할 수 있는지 본다.

그런데 원래대로면 Run을 할 경우 기기가 보여야 하는데 보이지 않는다.

그 이유는 SDK 경로가 정상인식을 못하게 되어 그렇게 된다.

참조 : https://stackoverflow.com/questions/31763470/android-studio-cannot-find-the-visual-studio-emulator

실행창에서 (윈도우키 + Q) regedit.exe를 실행시킨다.

HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node

이 위치로 이동한다.

Android SDK Tools 라는 키를 만들어 준다.

그리고 Path 라는 Value를 추가하고

값은 C:\Users\유저명\AppData\Local\Android\Sdk

으로 입력한다.(사용자에 따라 중간 유저명이 다를 수 있다.)

입력을 모두 했으면 에뮬레이터를 재시작 한다.

다시 Run을 하면 에뮬레이터를 선택하영 사용할 수 있는 것을 확인할 수 있다.

물론 화면은 정상적으로 나오지 않는다.

마지막으로 SDK에 있는 툴들의 패스를 어디서든 쓸 수 있도록 해줘야 한다.

이제 react native 프로젝트를 한 번 동작 시켜 본다.

에뮬레이터를 실행 시키고 react-native run-android를 하게 되면

뭔가 진행은 되지만 이상한 화면이 나오게 되거나,

인스톨을 실패하게 된다.

이 부분은 아래 문서를 통해 최종 해결을 할 수 있었다.

https://stackoverflow.com/questions/46516595/how-to-setup-an-react-native-environment-in-windows-10-with-hyper-v-enabled

문서 중간에 보면 PATH에 추가할 것들을 알려준다.

PATH 추가는 제어판 > 시스템 및 보안 > 시스템 에서 시스템 고급 설정을 클릭한다.

그리고 환경 변수를 클릭한다.

Path를 선택 후 편집을 클릭한다.

새로 만들기를 클릭하여 폴더 경로를 추가한다.

C:\Users\유저명\AppData\Local\Android\Sdk\tools

C:\Users\유저명\AppData\Local\Android\Sdk\platform-tools

이제 에뮬레이터를 다시 실행 시키고 react-native run-android를 하게 되면 정상적으로 동작하는 것을 확인할 수 있다.

꽤 험난한 삽질이긴 했는데

이래나 저래나 가능한 방법이 있어 천만 다행이었다.

아래는 혹시라도 동일한 고생을 한 사람이 있으면 보고 찾아올 수 있게 하려고 추가한 글씨다.

(무시해도 좋다.)

React Native Visual Studio Android Emulator

VS Android Emulator

Hyper-V React Native

Hyper-V Android Emulator React Native