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