1. 작성 이유
리엑트 네이티브 개발을 하다 보면, 어느 순간 운영이 아닌 로컬 데이터를 만져야 할 순간이 올 수 있다.
그리고, 그 데이터를 이용해서 실기기에서 실제 테스트를 해봐야 할 수도 있을 것이다.
하지만, 당신이 그것이 쉬울것이라고 생각한다면 정말 크나큰 오예! 라고 말해주고 싶다.
IOS와 Android 둘 다 localhost 요청에 대한 처리가 다르므로, 이것을 오전 내내 삽질한 후 성공해서 결과를 남기려고 한다
a. IOS
만약 당신이 아이폰으로 실기기 테스트를 할 때 로컬요청을 하고 싶다면, 아래의 방법을 따르면 된다
1. info.plist에 localhost 인 http 요청이 허가되도록 한다.
몹시 분노스럽게도, IOS는 기본적으로 http 요청을 허락하지 않는다. 그래서 빌드를 수십번 하더라도 로컬 요청은 성공을 할 수가 없다.
이것을 허용하려면 info.plist에 환경 설정을 작성해줘야만 가능하다.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
🧨주의 !! 이 파일을 그대로 레파지토리에 올릴 경우, 당신의 앱은 http 요청도 허용하는 아주 보안적으로 위험한 앱이 된다. 그러므로, 항상 파일을 올릴 때에는 파일 변경점을 확인한 뒤에 이 파일이 올라가지 않도록 주의하도록 하자.
2. 요청을 날리는 url을 실제 ip 주소로 변경한다
위에서 localhost 요청을 허가하는 설정을 했다고 허락해주지 않는다.
localhost라는 명칭이 아닌, http 요청 상에서 실제 ip 주소를 사용하여 통신이 이루어지도록 만들어야 한다.
즉, localhost:포트번호 => 당신의 아이피 주소:포트번호, 로 변경하면 된다.
이렇게 하면 로컬호스트라는 명칭이 아닌, 실제 당신의 컴퓨터에 배당된 네트워크 주소를 이용하여 내부적으로 요청을 날릴 수 있게 된다.
이 후에 Xcode에서 빌드를 하면 로컬호스트 요청이 잘 이루어진다.
참고로, 서버 역시 로컬이기 때문에 서버의 주소 역시 네트워크 ip 주소로 변경해야 함을 명심하자.
b. Android
안드로이드는 오히려 더 친절하다. 그냥 커넥트되어있는 기기에 전달되는 포트를 경유하도록 reverse 시키면 된다.
1. 실기기 연결 뒤 adb devices를 통해 연결된 안드로이드 기기를 확인한다
해당 명령어를 터미널에 입력하면, 실제 해당 컴퓨터와 연결되어 있는 안드로이드 기기를 확인할 수 있다. 심지어 에뮬레이터도 잡히기 때문에 이것을 활용하여 기기의 디바이스번호를 얻는다
에뮬레이터를 킨 상태의 디바이스번호는 "emulator-5554" 이다.
2. 포트를 경유시킨다.
명령어는 "adb -s 디바이스번호 reverse tcp:4000 tcp:4000" 이다.
adb 명령어에서 reverse가 하는 역할은 핸드폰의 포트를 로컬 영역의 포트와 싱크하는 것이다.
앞의 tcp부분은 로컬 영역의 포트 번호를 설정하는 것이고 뒤의 tcp 부분은 핸드폰에서 로컬로 연결이 되어 데이터를 전송할 때 포트를 의미한다.
즉, 위의 상태로 쓴다면 로컬 포트 4000번을 이용해 폰과 로컬이 소통하도록 연결하겠다는 뜻이다.
에뮬레이터를 킨 상태라고 한다면 "adb -s emulator-5554 reverse tcp:4000 tcp:4000" 이 될 것이다.
이후, yarn android와 같이 안드로이드 빌드를 하면 로컬호스트 요청도 잘 가는 것을 확인할 수 있다.
