React Native - Unable to load script 에러 해결

 

unable to load Script 에러 해결 ( Wi-Fi와 host 바인딩으로 해결! )

---

문제상황

프로젝트가 안드로이드 실물 기기에서 동작하는지 확인하고자

adb를 이용했으며,

adb reverse tcp:8081 tcp:8081 등의 명령어를 치고 ( adb연결 명령어 )

npx react-native run-android 를 치면, 위와 같은 에러가 난다.

PC에서 localhost:8081로 들어가면 별 문제없이 metro 서버와 연결이 되었다.

 

문제원인

adb를 통해 연결된 모바일 기기가 pc의 메트로 서버에 접근하지 못해서 생긴 문제였다. ( adb reverse tcp:8081 tcp:8081 이라 치고, adb reverse —list로 확인도 했지만, 실제로는 제대로 동작하지 않은 것 같다. )

 

해결방법

이를 해결하고자,

Wi-Fi를 이용해 metro 서버에서의 JS 번들링 파일을 가져오기로 했다.

 

해결 방법은 다음과 같다.

• 모바일(안드로이드) 기기와 PC를 같은 네트워크 상에 둔다. ( Wi-Fi 등 )
• 모바일 기기와 PC를 usb로 연결해 놓는다. ( 이때도 adb devices로 장치를 인식하는지 확인은 해주어야 한다. )
• npx react-native start --host 0.0.0.0 --reset-cache 라고 쳐주자. (메트로 서버 구동) (host 옵션을 주어 꼭 바인딩을 해주어야 한다. 이 옵션이 없으면, pc에서도 localhost로 밖에 접근 못한다.)
• 다른 터미널에서 npx react-native run-android를 쳐주면 메트로 서버에서 로그가 뜨는지 확인하자.
• 모바일 기기에서 debug 서버의 주소와 포트를 [pc의 ip주소]:8081로 해주자.
• 다시 리로드하자. 그리고 다시 메트로 서버에서 로그가 뜨는지 확인하자.

위 순서를 거쳐 fast refresh가 가능한 개발 환경 설정이 구축되었다.

---

(잘못 적혀진 내용에 대한 비판 및 지적은 언제나 환영입니다. 훈수 달게 받습니다. )