Panth Solanki 작성
React Native를 배우기에 가장 좋은 시기가 바로 지금입니다. React Native 앱을 개발하는 방법은 크게 두 가지가 있는데, 이 글에서는 Expo를 활용해 안드로이드 기기에서 인터넷 연결 없이 앱을 만드는 방법에 집중해 보겠습니다.
인터넷이 연결된 상태에서 기기의 Expo Client 앱을 사용하면 개발이 아주 쉽다는 것을 알고 있습니다. 하지만 인터넷 연결에 문제가 있다면 어떨까요? 데이터 용량이 제한적이라 개발에 MB를 낭비하고 싶지 않거나, 모바일 Wi-Fi 연결이 불안정하거나, 혹은 그냥 올드스쿨 방식으로 앱을 개발하고 싶은 경우도 있을 것입니다. 이유야 어떻든, 오늘 그 방법을 알려드리겠습니다.
시작해 볼까요? 과정은 단 세 단계로 이루어져 있습니다. 참고로 이 방법은 Windows 운영체제에서 Android 기기를 대상으로 개발할 때 적용됩니다.
사전 준비 사항
먼저 PC에 ADB 드라이버를 설치해야 합니다. 설치 파일과 설치 절차는 각각 공식 문서에서 확인할 수 있습니다.
설치를 마쳤다면 모바일 기기를 PC에 연결하세요. 그런 다음 명령 프롬프트(Command Prompt)를 열고 다음 명령어를 실행합니다.
adb devices
명령어 실행 결과 list of devices 항목 아래에 기기 이름이 표시되면 설정이 완료된 것입니다. 반대로 아무 이름도 나타나지 않는다면 ADB 드라이버를 제대로 다시 설치해야 합니다.
참고: 모바일 기기의 개발자 옵션에서 USB 디버깅(USB debugging)이 켜져 있어야 합니다.
또한 구글 플레이 스토어에서 Expo Client 앱을 설치해 두세요.
React Native 프로젝트 설정하기
공식 문서에 안내된 순서를 따르면 됩니다. 여기서도 같은 단계를 정리해 드리겠습니다. Node 10+ 버전이 설치되어 있다고 가정하고, 다음 명령어들을 차례로 실행합니다.
npm install -g expo-cli
expo init AwesomeProject
cd AwesomeProject
npm start
위 명령어를 실행하면 브라우저가 자동으로 열리며 https://localhost:19002 페이지에 접속됩니다. 자동으로 열리지 않는다면 직접 주소를 입력해 접속하세요.
localhost 페이지에 접속하면 아래와 같이 Tunnel Ready라는 메시지가 표시됩니다.
Tunnel Ready 메시지가 보였다면, 이제 마법 같은 일이 일어날 시간입니다 :)
설정 후 연결 단계
이제 기기를 연결하고 새 명령 프롬프트 창을 열어 다음 명령어들을 실행합니다.
adb devices // 연결된 기기의 이름을 확인합니다
adb -s reverse tcp:8081 tcp:8081 // 이 명령어는 별도의 출력 없이 실행됩니다
브라우저에서 https://localhost:19002로 이동한 뒤, Run on Android device/emulator 버튼을 클릭합니다.
Run on Android device/emulator를 클릭하면 내 기기에서 결과를 확인할 수 있습니다
그러면 기기 화면에서 번들(bundle)이 로딩되는 것을 볼 수 있습니다. 모든 번들이 로딩되면 앱이 기기에서 실행되고, 브라우저 화면은 다음과 같이 바뀝니다.
사이드바에 연결된 기기가 표시됩니다
화면 오른쪽 상단의 버튼을 클릭하면 앱을 디버깅할 수 있습니다.
오른쪽 상단 버튼을 클릭하면 기기로 전달되는 데이터를 확인할 수 있습니다
이 정보가 어떤 식으로든 도움이 되었기를 바랍니다. 궁금한 점이 있다면 댓글로 남겨주세요. 기꺼이 도와드리겠습니다.
읽어주셔서 감사합니다.