Proxyman으로 React Native 앱의 HTTPS 트래픽 캡처
API 호출을 다루다 보면, 콘솔에는 아무 오류가 없는데 앱에 데이터가 표시되지 않는 문제를 겪은 적이 있으신가요? 디버깅을 위해 앱의 네트워크 호출을 살펴보고 싶었던 적은 없으신가요? 이 튜토리얼에서는 Proxyman을 MITM(man-in-the-middle) 프록시로 사용해 React Native 앱의 HTTPS 트래픽을 캡처하고 확인하는 방법을 알아봅니다.
1. 사전 준비 사항
- 최신 버전의 Proxyman을 다운로드하여 설치합니다
- Mac에서 Xcode 11.4 이상을 사용합니다
- 이 튜토리얼에서는 디버깅을 위해 오픈 소스 React Native 앱인 Trackie를 사용합니다. 소스 코드는 여기에서 확인할 수 있습니다.
2. 시작하기
Proxyman을 다운로드하여 설치하면, Proxyman이 React Native 앱에서 보내고 받는 모든 요청과 응답을 캡처할 수 있게 됩니다.
보시다시피 앱의 트래픽은 캡처할 수 있지만, 응답 내용은 아직 볼 수 없습니다.
이제 SSL Proxying을 활성화하고 시뮬레이터에 Proxyman 인증서를 설치할 차례입니다!
3. SSL Proxying 활성화
“Enable only this domain” 또는 “Enable all domains from Trackie”를 클릭합니다.
4. iOS 시뮬레이터에 Proxyman 인증서 설치 및 신뢰
탭 바 메뉴에서 Certificate -> Install Certificate for iOS -> Simulators → Install Certificate를 선택합니다.
Proxyman은 수동 작업을 줄여 주는 Setup Guide를 제공합니다. 설정 창에서 Install and Trust를 클릭하면 인증서가 자동으로 구성됩니다.
5. 네트워크 트래픽 확인
인증서를 설치하고 시뮬레이터를 재부팅한 뒤에는 앱을 다시 실행하고 API 호출을 수행합니다. 그러면 Proxyman이 디버깅에 필요한 요청과 응답의 내용을 캡처해 표시합니다.
6. 앱의 트래픽이 보이지 않는다면 어떻게 해야 하나요?
iOS 시뮬레이터에서 SSL 오류가 발생하거나 HTTP/HTTPS 요청이 보이지 않는다면, Proxyman 문서의 문제 해결 섹션에서 해결 가능 여부를 확인해 보시기 바랍니다. 그래도 해결되지 않으면 가능한 한 자세한 내용과 함께 이메일로 문의해 주시기 바랍니다. 기꺼이 도와드리겠습니다.
7. 마치며
네트워크 호출을 다루는 일은 때로 까다롭고 답답하지만, 이제 디버깅이 한결 수월해질 것입니다. Proxyman이나 다른 MITM 프록시 도구를 사용하면 iOS, Android, React Native 앱의 HTTP/HTTPS 트래픽을 캡처하고 확인할 수 있습니다. 네트워킹의 고수가 되고 싶다면 Map Local, Breakpoint, Scripting 같은 Proxyman 고급 기능 시리즈도 살펴보시기 바랍니다. 이 기능들을 사용하면 HTTP/HTTPS 요청과 응답을 수정할 수 있습니다.
이 튜토리얼이 도움이 되셨기를 바랍니다. 즐거운 디버깅 되시길 바랍니다! 👨🏻🚀
플랫폼 참고 사항
React Native는 일반적인 기기 네트워크 경로를 사용합니다. 따라서 iPhone이나 iOS 시뮬레이터에서는 iOS 가이드를, Android 기기나 에뮬레이터에서는 Android 가이드를 따르시기 바랍니다. Android 디버그 빌드는 테스트 인증서가 시스템 저장소에 없다면 네트워크 보안 설정(Network Security Configuration)이 필요할 수 있습니다. 프록시를 설정한 뒤 Metro가 로드되지 않는다면, API 호스트의 캡처를 끄는 대신 로컬 Metro 호스트를 프록시 우회 목록(bypass list)에 추가합니다.
Proxyman은 개발자가 iOS 기기, iOS 시뮬레이터, Android 기기의 앱과 도메인에서 HTTP(S) 트래픽을 캡처하고 확인할 수 있도록 돕는 고성능 macOS 앱입니다.
다운로드 주소: https://proxyman.com/
