윈도우에서 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
