React Native Android 빌드시 자주 보게되는 "Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release" 의 근본적인 해결방법 (부제: RN 코드 변경사항이 적용이 안돼요...?)

개요

나만 그런지 모르겠지만 React Native Android 빌드시에 이런 에러를 많이 보게 된다. 다행히도 많은 개발자 분들이 해결법을 블로그에 올려주었다.

android/app/src/main/assets/index.android.bundle

위의 경로에 bundle 파일을 만들어 주는것으로 앱을 실행하는 것은 문제가 없다.

다만, 나의 문제는 이후부터 시작되었는데.. 현상은 이러하다.

현상

1. 나는 처음에 Maker Label에 Sally 라고 표기하였다. (이 시점에서 index.android.bundle 생성)

   

   

2. 그런 다음 Maker Label을 Sally 에서 Donald 로 수정하였다.

   

   

3. 그러고 나서 테스트를 위해 MacBook 과 안드로이드 디바이스의 USB 연결을 해제 하였다.
   그럼 "Cannot connect to Metro..." Warning 메세지가 출력된다. (대충 Metro 연결이 끊겼다는 의미)

   

4. 그럼 다시 디바이스 에서 앱 종료 후 다시 실행시켜보자

   

아닛!!? 다시 Sally 로 돌아갔다. 이게 어떻게된 일이지..? (나만 이런가 ㅋ_ㅋ)

원인

나는 이 문제가 index.android.bundle 관련 에러와 분명히 연관되어 있을거라고 의심했고 열심히 리서치 하여 조금더 근본적인 원인을 찾을수 있었다.

단순하게 그림으로 표현해보자

1. USB 연결 O
   

2. USB 연결 X
   

절대 기술적으로 옳은 표현은 아니다. 그냥 맥락의 이해를 돕기위한 그림이다.

해결

사실 해결 방법은 간단하다. 이미 많은.. 대부분이 알고있는 방법이기도 하다. 그림으로 보자면...

USB 연결에 (아마도 localhost 이지 않을까..) 의존하지 말고 RN 에서 바로 Macbook 에서 돌아가고있는 Metro 서버에 번들파일 요청을 하면 된다!

"저는 Metro 서버를 켠적이 없는데요?!" yarn android 하면 나오는 이 터미널을 말하는 것이다..!
이 터미널에서 키보드 "d" 누르면 "open Dev Menu" 가 열린다고 친절하게 써져있다.

1. Setting 버튼 누르기

2. Debug server host & prot for device

3. 맥.북.I.P:8081

자신의 맥북 아이피는 확인할수 있다는 가정하에 대충 넘어가겠다!

마지막으로 "확인" 을 누르고 전부 종료후 yarn android 로 재빌드 해보면 현상이 해결되어 있을 것이다...! (제꺼에선 잘되는데요..?)

후기

RN 을 오랜만에 다루다보니 참 알았던 것인데도 모든 문제가 처음 겪는것 처럼 생소하다.. 기록 하자..
블로그는... 꾸준히 하는것... ㅠ...