“Unable to load script” 오류 해결 방법: React Native Metro Bundler와 Proxyman

1. 문제

Proxyman이나 Charles Proxy를 사용하면서 React Native를 Metro Bundler와 함께 쓰고 있다면, 다음과 같은 오류가 나타날 수 있습니다:

Unable to load script. Make sure you're either running Metro (run 'npx react-native start') or that your bundle index.android.bundle is packaged correctly for release.

“Unable to load script” 오류 화면입니다. Metro를 실행('npx react-native start')하거나 index.android.bundle이 release용으로 올바르게 패키징되었는지 확인하세요.

이 오류는 Metro Bundler가 10.0.2.2:8081에 연결을 시도하는데, Proxyman과 Charles Proxy가 이 요청을 제대로 처리하지 못해서 발생합니다.

2. ✅ 해결 방법 (권장)

최신 Proxyman 릴리스를 다운로드하세요. Metro 관련 수정 사항은 Proxyman 5.9.0부터 포함되어 있으므로, 예전 베타 빌드는 더 이상 필요하지 않습니다.
Android 설정 가이드를 따라 에뮬레이터의 프록시를 설정하세요. 그래도 Metro가 로드되지 않으면, 번들 트래픽이 에뮬레이터와 Mac 사이에서만 오가도록 로컬 Metro 주소를 프록시 우회 목록에 추가하세요.
프록시를 변경한 뒤에는 Metro를 다시 시작하고 앱을 새로고침하세요.

Android용 React Native Metro Bundler에서 사용하는 Proxyman 5.9.0

3. 해결 방법 (비권장)

Map Remote 도구로 10.0.2.2:8081을 127.0.0.1:8081로 직접 매핑하면 문제가 해결됩니다.
방법은 다음과 같습니다:

Proxyman을 열고 Tools 메뉴 -> Map Remote를 선택합니다.
다음 설정으로 새 매핑을 만듭니다:

Rule: http://10.0.2.2:8081
"Include all subpath" 체크
Method에서 ANY 선택
Protocol: http
Host: 127.0.0.1
Port: 8081
Done 클릭

Certificate 메뉴 -> Install for Android -> Emulator로 이동한 다음 Override Emulator를 클릭합니다. 프록시가 자동으로 설정되고 인증서가 한 번의 클릭으로 설치됩니다.
Metro Bundler를 다시 로드합니다.
완료: Metro Bundler 오류가 없습니다 ✅

4. Charles Proxy 해결 방법

Proxyman과 비슷하지만, 10.0.2.2:8081에서 127.0.0.1:8081로 Remote 도구 매핑을 직접 설정해야 합니다. Tools 메뉴 -> Map Remote...에서 Map Remote 도구를 열 수 있습니다.

5. React Native(Metro Bundler) Android 에뮬레이터에서 HTTPS 요청/응답 복호화하기

Proxyman -> Certificate 메뉴 -> Install for Android -> Emulator로 이동한 다음 Override Emulator를 클릭합니다. 프록시가 자동으로 설정되고 인증서가 한 번의 클릭으로 설치됩니다.

Android Studio -> Import를 열고 프로젝트 안의 android 폴더를 선택합니다. Android Studio가 모든 종속성을 불러올 때까지 기다리세요.
app/src/main/res 폴더 안에 xml이라는 이름의 새 폴더를 만들고, 그 안에 network_security_config.xml 파일을 새로 만듭니다.
network_security_config.xml에 다음 코드를 추가합니다:

<network-security-config>
  <debug-overrides>
    <trust-anchors>
      <!-- Trust user added CAs while debuggable only -->
      <certificates src="user" />
      <certificates src="system" />
    </trust-anchors>
  </debug-overrides>

  <base-config cleartextTrafficPermitted="true">
    <trust-anchors>
      <certificates src="system" />
      <certificates src="user" />
    </trust-anchors>
  </base-config>
</network-security-config>

AndroidManifest.xml을 열고 application 태그에 다음 코드를 추가합니다:

android:networkSecurityConfig="@xml/network_security_config"

완료되었습니다. Metro 번들러를 다시 로드한 뒤 SSL 트래픽 캡처를 시작하세요.

6. React Native(Metro Bundler) iOS 시뮬레이터에서 HTTPS 요청/응답 복호화하기

iOS는 시뮬레이터에서 HTTPS 트래픽을 캡처하는 데 추가 설정이 필요 없으므로, Android보다 훨씬 간단합니다.

Proxyman -> Certificate 메뉴 -> Install for iOS -> Simulator로 이동한 다음 Override Simulator를 클릭합니다. 프록시가 자동으로 설정되고 인증서가 한 번의 클릭으로 설치됩니다.

완료되었습니다. Metro 번들러를 다시 로드한 뒤 SSL 트래픽 캡처를 시작하세요.

다음 단계

실제 iOS 기기에서 가로채려면 다음 문서를 참고하세요: Proxyman으로 iOS 실제 기기의 HTTPS 트래픽을 캡처하는 방법

10.0.2.2는 표준 Android 에뮬레이터에서만 호스트 Mac을 가리킬 때 사용합니다. 실제 Android 기기는 같은 네트워크에 있는 Mac의 IP 주소가 필요합니다. network_security_config.xml은 디버그 빌드에서만 사용하고, 릴리스 앱이 사용자가 추가한 모든 인증서를 신뢰하지 않도록 하세요.

Noah Tran

2024년 9월 16일