[React Native] expo로 만들 때 안드로이드 가상화까지 돌려보기 (windows 10)

[React native] expo로 만들 때 안드로이드 가상화까지 돌려보기 (windows 10)

서문

짧은 직장생활 후에 퇴사하고, 담금질이 필요할 듯 하여 예전에 생각해둔 것들을 만드는 과정 중에 있다. 지금은 스마트폰 어플리케이션을 작업하고 있는데 예전에는 안드로이드 스튜디오로 끄적여봤지만 전 직장에서 쓰던 Vue와 비슷한 VDOM형태의 라이브러리인 React로 Native app 및 iOS와 안드로이드 앱까지 커버할 수 있는 React Native에 관심이 생겨 공부 중이다. 애초에 React를 조금 했었고, 전 회사에서 Vue를 본격적으로 다뤘기 때문에 다시 React를 공부한다는 마음으로 React Native를 하면 되겠다는 마음으로 작업 중이다. 남는게 시간이기도 하고.

 

아무튼 그 시작이라고도 할 수 있는 개발환경 셋팅 과정을 기록해두기 위해 이 포스팅을 남긴다. windows에서 expo를 이용해 React Native app을 만들려고 준비 중인 사람이라면 누구에게나 도움될 것이다.

 

준비물

1. IDE (난 IntelliJ를 썼다.)
2. node.js (yarn)
3. Android Studio (Android 가상화 실행을 위해)

먼저 node.js를 설치하자. https://nodejs.org/en/에서 설치한다. 기억은 잘 나지 않지만 내가 전에 쓰던 버전이 10.x.x였나 해서 설치가 안됐다. 이 글을 쓰는 시점(2020.11.10)은 14.15.0가 LTS로 올라와있다. 이것을 설치하자.

 

그다음은 yarn이다. https://classic.yarnpkg.com/en/docs/install#windows-stable 이곳에 가서 설치하자. yarn과 npm은 취향차이니까 그냥 node로 진행해도 무관하다. (npm의 명령어도 남길 것이다.)

 

그다음은 expo이다. https://reactnative.dev/docs/environment-setup이곳에 가면 상세한 설치 방법을 알 수 있다. 여기에 옮겨 적어보자면

#npm
$ npm install -g expo-cli
#yarn
$ yarn global add expo-cli

이렇다.

 

아니 RN(React Native)하려는데 RN는 어디가고 expo만 있습니까!!!!!!!!!!!!!!!!!!!!!!!!!!!! 하는 사람도 있겠지만 RN은 위 expo-cli라는 패키지의 의존성에 포함돼있어서 같이 설치된다. 정상적으로 설치되면 이런 모습이다.

그다음엔 위 expo 사이트의 예제에서처럼 따라해보자. 아래 명령어에서 주의할 것은 절대 git bash에서 실행시키지 말고 명령프롬프트에서 실행시켜야 한다는 점이다. git bash에서 실행시키면 이런 에러를 볼 수 있다.

$ expo init it_doesnt_work
[18:04:23] Input is required, but Expo CLI is in non-interactive mode.
--template: argument is required in non-interactive mode. Valid choices are: "blank", "tabs", "bare-minimum" or any custom template (name of npm package).

그런 고로 시작 -> cmd 입력 -> 실행하여 명령프롬프트에서 명령어를 실행하자.

$ expo init AwesomeProject

그럼 뭔가 쪼르르르르르 빌드되면서 템플릿을 선택하라는 화면이 나오는데 입맛에 따라 선택하자. 물론 TypeScript를 선호하는 사람은 TypeScript옵션이 붙은 애들을 선택하면 된다. 보통 맨 첫번째 옵션(blank)을 선택한다. 그 다음 아래 명령어를 실행해서 expo로 만들어진 RN project를 시작해보자.

$ cd AwesomeProject
#npm
$ npm start
#yarn
$ yarn start
#공통
$ expo start

그러면 이런식으로 뭔가 어지럽게 출력될 것이다. 그리고 인터넷창이 하나 팝업된다.

(start를 갈긴 커맨드창)

팝업된 인터넷창. 이곳이 현재 앱의 상태 체크를 할 수 있곳이라고 생각하면 편하다. 한번 Run on Android device/emulator버튼을 눌러보자. 안된다. 당연히 안되지 연결된 폰이나 발견된 안드로이드 버추얼 디바이스가 없는데.

 

이제 expo와 터미널에서 할 수 있는 건 다 했고 AndroidStudio를 설치하자. 설치나 그런 건 너무 기본적이니까 그냥 생략하겠다. 임시로 만들어본 앱을 돌릴 수 있는 버추얼 디바이스를 설치했는지 확인해보자. 확인은 AndroidStudio 내의 Tools -> AVD Manager에서 할 수 있다. 없다면 좌측 하단의 Create Virtual Device버튼을 클릭하여 적당한 가상화기기를 하나 만들자. 나는 Pixel에 API버전 24로 진행하였다.
 그리고 다음으로 필요한게 있다. 바로 환경변수 설정이다. expo에서 컴파일해서 앱을 올릴 때 안드로이드의 sdk를 참조해야 하는데 AndroidStudio설치만으로는 해당 부분이 해결되지 않는다. Android 메뉴의 File -> Appearance & Behavior -> System Settings -> Android SDK 부분에 가면 상단에 Android SDK Location이라고 경로가 적혀있다. 단순 Shift를 더블탭 한다음 SDK만 타이핑해넣어도 SDK Manager가 뜬다. 아무튼 해당 경로를 환경변수에 추가한다.

위 Android SDK Location이라고 적힌 부분의 경로를 확인할 수 있다. 보통

C:\Users\[사용자이름]\AppData\Local\Android\Sdk

이런식으로 저장되는 것 같다. 그리고 밑에 Android SDK Build-Tools라고 적힌 부분에도 꼭 체크가 돼있어야 한다. 이렇게 되면 준비는 끝났다.

 

AndroidStudio 상단의 run 버튼을 눌러보자.

그럼 이렇게 안드로이드 에뮬레이터가 생성될 것이다. 이 상태에서 아까 yarn start를 갈겼던 터미널 창으로 가서 ctrl + c 명령어를 날려서 작동을 중지시킨 다음에 다시 yarn start로 작동시켜보자. 그리고 팝업되는 인터넷창에서 아까 작동되지 않았던 Run on Android device/emulator 버튼을 클릭해보자. 그러면

짠! 이렇게 expo로 생성한 RN project가 AndroidStudio에서 제공하는 Virtual Device에서 돌아가는 모습을 확인했다. 정말 좋은 점은 이렇게 올려놓으면 Live Edit기능을 저절로 지원해줘서 해당 파일의 내용을 바꾸면 Virtual Device 내부에서도 변경된 점이 실시간으로 적용된다는 점이다.

여기까지 windows에서 expo를 이용해 안드로이드 버추얼 디바이스에 RN 앱을 띄워봤다. 물론 진짜 핸드폰을 이용하면 Android Studio를 깔고 환경변수 설정이나 기타등등 귀찮은 짓은 안해도 되지만 그래도 나는 이렇게 개발할 거라서 이렇게 해봤다. 제작하다가 또 도움이 되는 내용이 있다면 틈틈히 포스팅하겠다. 끗!

 

★★★★★아 참, 중요한 게 만약 IntelliJ를 통해 expo로 생성한 프로젝트를 수정할 거라면 프로젝트를 디렉터리단위로 오픈할 때(예제로 따지면 AwesomePoject 디렉터리를 열 때) 무슨 gradle 어쩌구 있는데 읽을까? 패키지 설치할래? 이런식으로 IDE가 물어보는 경우가 있는데 install 하면 안 된다. 아직은 때가 아니다.

아 그리고 뭔가 잘 안된다 싶으면 저 오른쪽 아래 네모난 버튼을 누르면 현재 켜져있는 안드로이드 앱 목록이 쭉 나오는데 그걸 아래로 드래그하면 우측 상단에 Clear all 이라는 버튼이 있고, 그걸 눌러서 모든 창을 다 지운 다음에 안드로이드 바탕화면 -> 앱 메뉴들 -> expo를 켜서 Recently opened에 있는 exp://ipaddress:19000 으로 연결돼있는 프로젝트를 눌러보고 꺼보고 다시 켜보고 해보면 된다.