react native에서 android에 사용된 fetch가 ssl 문제로 네트워크 에러 발생하는 경우 해결하기

만약 android에서 사용된 외부 네트워크 접근... fetch 등을 사용한 api 등이 동작하지 않을 때 해결하는 방법입니다. 원인과 해결 방법을 알아봅니다.

# android 외부 네트워크 문제 발생

react native의 expo를 사용하면 간단하게 테스트 및 빌드가 가능합니다. 그런데 android 6.0 이하의 버전에서 테스트 결과 네트워크가 동작하지 않는 이슈가 발생하였습니다...


!!! fetch가 동작 안하는 문제가 발생
이슈는 바로 android 6.0 이하에서 API를 콜할때 fetch 등의 네트워크 콜백에서 success 구문이 아닌 error 구문을 동작시키는 문제가 있었습니다. 물론 API는 정상 동작하였으므로 원인이 무엇인지 파악해보았습니다.

원인 파악에서 중요한 단서가 발견되었는데 모든 네트워크 통신에 문제가 아니라 동작하는 외부 api도 있다는 사실이었습니다. 즉... 단순 네트워크 문제가 아니었음을 알게되었는데 나중에보니 SSL 인증서의 차이에서 오는 문제였죠.

다시 말하면 Android에서 외부 접근을 사용하는 앱은 모든 외부 접근 시도는 SSL이라고 모두 만족하지 않는다는 점입니다. SSL이면서도 매우 strict한 인증을 요구한다는 점이었습니다... 다만 6.0을 넘는 버전에서는 이때의 에러를 무시하고 앱이 정상 동작 하지만 이하에서는 에러가 나타나 더 이상 동작하지 않는 차이점이 생기게됩니다.

# React Native SSL 네트워크 해결방법

어떻게 해결해야하나 생각해보니 두 가지 방법이 존재했습니다.

1. SSL을 바꾸는 방법
2. 네트워크 과정에서 생길 수 있는 인증서 오류를 escaping하는 코드를 추가하는 방법

위 두 가지 방법 중에서 SSL을 바꾸는 방법이 좋겠지만 앱 자체가 내부 목적... 내부 API 호출이므로 보안 이슈가 없다면 2번 방법도 괜찮아 보였습니다. 이를 해결하기 위해서 2번 방법을 적용하기로 결정.. 즉시 업데이트를 수행하였습니다.

! React native 사용에서의 문제

SSL 네트워크 과정의 에러를 벗어나는 코드를 앱 빌드 과정에서는 만들 수 있었지만 react native에서는 방법이 없었습니다... 지원하지 않는 경우 직접 컨트롤할 수 없기 때문이었죠.

다행히 이런 이슈를 해결할 수 있는 외부 모듈이 있더군요! fetch()함수를 좀 더 다양하게 활용하는 매우 뛰어는 모듈로 github에서도 매우 많이 쓰이는 모듈인 RNFetchBlob가 바로 그것입니다.

하지만 !!
npm을 사용하여 모듈 설치 후 동작될 것을 기대했지만 잘 되지 않더군요... 결국 해결 못하고 expo 빌드로는 어렵다고 판단 react native를 사용한 앱 빌드 방법을 위해 환경을 다시 구축하기 시작했습니다. 그 과정에서 expo에서는 크게 신경쓰지 않아도 되었던 JAVA와 Android SDK의 설정 그리고 설치과정에서 다양한 이슈가 발생하였습니다. 인내심을 가지고 하나하나 해결하니 결국 동작하였습니다. 일단 코드만 보면 아래를 참고하여 수정할 수 있습니다.

먼저 기존의 함수 구문입니다.

아래처럼 수정하여 동작시키도록합니다.

수정된 부분은 fetch()를 새로 설치한 RNFetchBlob 모듈의 함수로 바꾸고 config()에 trusty: false를 설정하여 동작시키는 방법입니다.

위 방법으로 바꾼 후 android 6.0 이하에서 테스트 해보니 잘 동작하였습니다. 결국 발생했던 이슈는 모두 해결 하였지만 시간과 과정이 꽤 어려운 과정이었습니다.