[RN] 지옥 같던 android:networkSecurityConfig 설정의 후폭풍 (feat. index.android.bundle, cluade)

오늘은 react-native 에서 release APK 를 추출하다가 생긴 해프닝을 기록하려고 한다.

1. 외부 테스트를 위한 Release APK 추출

QR code 리더기 테스트를 진행 해보자 (외부에서)

회사 내부에서 결제 모듈을 연동하고 있는 상황이다. 결제가 성공하면 특정 QR code 가 생성되고 이 QR code 의 정합성 그리고 실제 QR 리더기가 제대로 인식하는지 테스트가 필요했다.
QR code 테스트는 외부사에서 진행 되어야 하는 상황이라 외부사에게 전달할 외부apk 를 생성해달라는 요구 사항이 있었다.

2. release apk 에서 API 통신 에러

아직 운영서버가 구축되지 않았다.

React-native 에서 __DEV__ flag 로 baseURL 을 지정하고 있다.

// 기본 axios 인스턴스 생성
const baseURL = __DEV__ ? 'http://admin-dev.testapp.co.kr/api' : 'http://admin-dev.testapp.co.kr/api';

export const axiosInstance: AxiosInstance = axios.create({
  baseURL,
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

삼항연산자가 무색하게 어떤 빌드를 해도 baseURL 은 http://admin-dev.testapp.co.kr/api 으로 동일하다. (왜 이딴 코드를...?) 이유는 아직 운영서버가 배포되지 않았기 때문에 우선 외부테스트를 개발서버 환경으로 빌드하려는 의도였다.

release apk 는 http:// 통신을 허용하지 않는다.

라고 cluade.ai 가 말했다. 내가 빌드한 release apk 는 위의 코드로 인해 release 로 빌드가 됐음에도 "http://" 를 바라보고 있기 때문에 어떠한 서버통신도 불가했다. (에러 폭탄)
나는 당당하게 해결방법을 요구했고 claude 는 다음과 같은 해결책을 제시하였다

테스트를 위해 특정 http 통신을 허용하자.

그렇다면 테스트를 위해서 "admin-dev.testapp.co.kr" 이름을 가진 http 통신만 허용하면 되는것 아닌지? 휴먼 - cluade
라고 월급여 22달러 (환율 급등으로 32,000원 ㄷㄷㄷ) cluade.ai 가 말했다. 역시 유능하다 거침없이 바로 적용 시켜버렸다.

    <application
      ...
      android:usesCleartextTraffic="true"
      android:networkSecurityConfig="@xml/network_security_config"
      android:theme="@style/AppTheme">

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">admin-dev.testapp.co.kr</domain>
    </domain-config>
</network-security-config>

성공! 이제 release apk 에서도, 특정 주소를 가진 http 서버와 통신 할수 있는 테스트 전용 apk 가 탄생하였다! (이렇게 보니 참 문제 많은 apk 같다...)

그렇게 나의 디버깅 지옥이 시작되었다.

3. apk 전달 완료, 다시 개발 시작! 근데, Metro 서버가 안열려요

Unable to load script. Make sure you're either running a Metro server...

이 에러는 이전 글 React Native Android 빌드시 자주 보게되는 에러 에서 다루었듯이 yarn android 실행시 index.android.bundle 파일을 찾으면서 발생하는 에러이다. (자세한건 글에서...)

아무튼! 이 현상의 올바른(?) 해결법은 index.android.bundle 을 강제 생성 하는것이 아니라 yarn android 빌드시 Metro 번들러가 동작하지 않는 이유를 해결하는것이 포인트라고 나는 생각한다.

왜냐면 Metro 번들러 없이 RN 개발 한다는것은 HotReloading 도 안되고, 화면 변경 사항을 확인 할때마다 index.android.bundle 파일을 만들어야 한다. 때문에 이는 Metro 서버와 연결 문제를 해결하는 것이 맞다!

난 이 에러를 해결해봤어요!!! (feat. 이정재)

난 대수롭지 않게 여겼다. 왜냐면 이 문제를 이미 알고 해결해봤기 때문이다.다음의 체크리스트를 살펴보자 이 안에는 무조건 해결이 된다.

1. adb devices 로 디바이스가 연결되어 있는가? -> Yes!
2. adb reverse tcp:8081 tcp:8081 로 포트포워딩을 시도해 봤는가? -> Yes!
3. RN 디버그 모드에서 setting, host sever 를 Metro 서버로 직접연결 했는가? -> 넵!
4. 연결된 안드로이드 디바이스와, Metro 빌드 맥북이 같은 Wifi 에 연결되어 있는가? -> 네!
5. Metro 서버 클린 및 재시작 해보았는가? -> 네에
6. node_modules 및 gralde 재설치, 안드로이드 클린 뭐 암튼 다해봤는가? -> 네...
7. 안드로이드 디바이스 재시작, 맥북 재시작, wifi 변경 등등 다해봤는가? -> 했는데...

(된다며) 왜 안되지...?

아니 진짜 왜 안되지?

내.. 내 경력에 3시간 동안 처음 본것도 아닌 이런 기본적인을 디버깅을 못하다니... 이래서 다들 플러터 플러터 하는건가... 궁시렁 궁시렁..
이상한점은 Metro 서버는 분명히 열려있다. 왜냐면 IOS 는 잘 연결이 되기 때문에! 그럼 IOS 개발자로 전향 해볼까...

뭐 암튼 고뇌속에 이런 저런 생각을 하다가 결국 내린 특단의 조치는 "오늘 적용한 모든 코드 롤백" 이었다.
코드 롤백 도중에 그제서야 그제ㅔㅔㅔㅔ서야ㅑㅑㅑㅑㅑㅑㅑㅑㅑㅑㅑ아아앜!!!
위에 network-security-config 코드가 눈에 들어왔다.

admin-dev.testapp.co.kr 밖에 모르는 바보 (멍청이 해삼멍게 고릴라 @#!@ㄲㅃㅉㄹ)

다.. 다시보자..

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">admin-dev.testapp.co.kr</domain>
    </domain-config>
</network-security-config>

admin-dev.testapp.co.kr http 통신을 허용한다.
다르게 말하면 admin-dev.testapp.co.kr 만 허용한다.
admin-dev.testapp.co.kr 제외한 모든 http 는 거절한다...
그럼 http://localhost:8081 (Metro Server 기본 Port) 는요..?
-> 응 몰라 거절

... ...허용해 주자...

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">admin-dev.testapp.co.kr</domain>
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
</network-security-config>

10.0.2.2 는 Metro 의 기본 포트라는데 일단 크게 상심한 상태라 될수 있는건 다 추가 하였다.

4. 다시 개발시작! 및 후기

단박에 해결되었다.

이유는 위에서 말했듯이 network_security_config 설정으로 admin-dev.testapp.co.kr 을 제외한 모든 http 통신이 Block 되어있었기 때문에 Metro Sever 또한 예외가 아니었다.
후에 운영서버가 배포되면 network-security-config 설정 관련된 모든 코드는 삭제할 예정이다. 분명히 더 좋은 방법들이 존재할것 이다. 이는 또 다른 글이나 주제에서 다루어보자...

CluadeAI 로 해결코드 체리픽을 하다보니 크게 체한것 같은 기분이 든다.
하지만 그럼에도 불구하고 나는 새로운걸 배웠고 CluadeAI 주는 나의 개발 효율 향상의 이득이 더욱 크기때문에 나는 계속 AI 와 코딩 할것이다.

칼이 위험하다고 해서 요리사가 칼을 다루지 않을수는 없다.
뭐 거창한 비유겠지만 도구는 잘 다를수록 유용하다는건 누구나 아는얘기다.