[React Native] 앱 실행을 확인하기 위한 로컬 개발 환경 세팅

React Native 프로젝트를 Expo Go라는 앱을 통해 QR 코드를 생성하여 스캔 후 실행하는 방법에 대해서 정리해보았는데, 매번 이러한 작업 내용에 대한 반영 사항 여부를 앱을 매번 열어 확인할 수 없는 노릇이기 때문에

이와 같은 앱 변화 및 작업 사항을 즉각적으로 확인하기 위해 웹 상의 로컬 환경에서도 확인할 수 있도록 세팅하는 작업도 필요합니다.

 

 

(1) 로컬 개발 환경 구성을 위한 특정 플랫폼 프로그램 설치 (window 환경)

저는 일단 안드로이드 환경으로 진행하기 위해 Android Studio 프로그램을 설치하도록 하겠습니다.

 

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Developers

안드로이드 스튜디오 사이트에 접속하여 해당 프로그램을 다운받아 설치합니다.

설치에는 약간의 시간이 걸리며 설치 후 설치 마법사를 통해 아무런 작업 필요없이 next를 눌러 설치를 전부 진행해주면 됩니다.

 

 

설치 마법사 또한 아무런 변동 사항없이 전부 next 및 accept 처리 후 설치를 진행해줍니다.

 

 

(+) 로컬 개발 환경 구성을 위한 특정 플랫폼 프로그램 설치 (Mac 환경)

Mac 환경에서는 Mac 상의 앱 스토어에 xcode를 입력하여 앱을 다운받습니다.

window 환경에서는 xcode 와 같은 ios 용 시뮬레이터 앱을 받아 실행할 수 없습니다.

즉, window 나 리눅스 환경에서는 안드로이드 용 만으로 테스트 할 수 있습니다.

 

 

(2) 안드로이드 스튜디오 앱 환경 세팅 및 실행

설치된 안드로이드 스튜디오를 실행하면 위와 같은 초기 프로젝트 설정 화면이 나오고 More Actions 를 눌러 Virtual Device Machine 항목을 선택해줍니다.

 

 

임의의 가상 머신이 하나 생성되어있는 것을 확인할 수 있지만 새롭게 추가하기 위해 Create Device를 눌러줍니다.

 

 

각각 맞는 앱 환경에 따라 설정해줄 수 있습니다.

저는 Pixel 5 형식의 모바일을 선택하겠습니다.

Pixel 5를 선택후 Next를 눌러줍니다.

 

 

이제 선택한 앱 환경 형식에 실행될 API 버전을 선택합니다.

특별한 상황이 아니라면 기본적으로 선택되어있는 API 버전을 그대로 선택하여 Next를 눌러줍니다.

 

 

다음 설정 사항은 아무것도 설정할 필요없이 그대로 유지 한 채 Finish를 눌러 완료해줍니다.

 

 

무사히 가상 머신이 생성된 것을 확인할 수 있습니다.

 

 

플레이 버튼을 눌러 에뮬레이터를 실행해봅니다.

 

 

실행에 성공하면 가상의 모바일 환경이 활성화되어 나오게 됩니다.

 

 

(3) 가상 모바일 앱 에뮬레이터에서 앱을 실행

이제 가상 앱 환경 세팅이 얼추 완료되었으니 에뮬레이터에 생성한 React Native 프로젝트를 실행해보겠습니다.

 

 

프로젝트를 실행시킵니다.

 

 

이 때 Press 명령어가 나열되는데 여기서 방금 설치한 가상 머신의 플랫폼 종류에 맞는 형식의 명령어를 눌러주도록 합니다.

저는 안드로이드 이므로 a 버튼을 눌러주었습니다.

명령어가 정상적으로 수행되면 Expo Go 앱이 연동되게되고 방금 켜놓은 가상 머신 모바일 화면에 App.js 내용이 보이게 됩니다.

 

+ 만약, Bundling complete 문구가 나오지 않고 에러가 발생한다면, 설치한 가상 머신의 타입과 일치하지 않는 명령어를 입력하여 그런 것일 확률이 큽니다.

 

 

이렇듯 이전에 실제 핸드폰에 Expo Go 앱을 설치하여 QR 코드를 스캔하여 작업 내용을 불러온 것처럼 가상 머신 자체에 내용을 성공적으로 불러오게 되었습니다.

 

이렇게 해서 React Native 프로젝트 개발 작업을 수행할 때마다 컴퓨터의 로컬 환경에서 즉각적으로 확인할 수 있습니다.

프로젝트를 실행할 때 QR 코드와 함께 나오는 press 명령어들을 활용하여 즉각적으로 맞는 동작을 수행할 수 있습니다.

그리고 개발 작업을 수행 후, ctrl + s 버튼을 눌러 작업 내용을 저장하기만 해도 즉각적으로 반영되어 업데이트 됩니다.

 

 

이렇게 해서 로컬 개발 환경 세팅을 수행함과 동시에 가상 머신에 앱 실행을 확인할 수 있도록 진행해보았습니다.