Application 개발 시 Network handling, React, Android

https://unsplash.com/s/photos/mobile-app

React, Android Application ( 이하 App ) 개발 시 신경 써서 처리해야 하는 게 네트워크 핸들링 ( Network handling )이다.

Retry policy ( 에러 발생 시 재시도 ), Local cache policy ( 앱 저장 캐시 ), 에러 발생 시 처리를 잘 신경 써야 사용자가 쾌적함을 느낄 수 있는 환경의 앱을 만들 수 있다. 

Retry policy

모바일 환경에서는 네트워크 핸드오버 또는 Mobile - Wifi 간의 전환 때문에 네트워크 에러가 발생하는 경우가 흔하다. 특히나 아침 출퇴근 시간 때에는 직장인들이 엘리베이터에서 앱을 사용하는 경우가 있어서, 타임아웃 에러가 많이 발생하기도 한다.

사용자가 에러가 발생했을 때 재 시도를 할 수 있는 UI, 그리고 특정 에러가 발생했는 때 App에서 Retry policy를 정하여 실패 시 재 시도를 해주어야 한다.

• Retry 횟수
  • React App의 경우에는 Axios와 RxJS 를 이용하여 구현 가능하다, 
  • Android 의 경우에는 Retrofit + RxJava 를 이용하여 구현 가능하다.
    • 에러의 종류를 파악하여 Retry 를 시도하는 게 좋다. 원인을 알 수 있는 에러 ( 4xx 에러 ) 의 경우에는 불필요하게 Retry 할 필요 없다.
• Local Cache policy
  • Android 경우에는 LRU Cache를 이용하여 key ( API url + parameter ), data ( API 결과 response ) 를 key/value 형태로 저장한다. 
  • React 경우에는 IndexDB 를 이용하여 key ( API url + paramter ), data ( API 결과 response ) 를 key/value 형태로 저장한다.
    • Android 경우에는 POST call 을 cache 해본 경험이 있지만, React 의 경우에는 axios cache adapter library 를 사용 하였었는데, POST 에 대해서는 지원하지 않는 듯 했다.
    • 당연한 내용이지만 위 두 경우 모두 실패한 Call은 저장하지 않는다.

 

생명주기에 따른 API 취소 ( cancellation ) 및 에러 핸들링

주니어 개발자의 경우에 많이 하는 실 수가 네트워크 에러 또는 생명주기에 대해 예상하지 못하고 BM 관련 코드를 응답 이후에 동작하도록 만들어 심각한 Crash 를 발생하는 경우가 있다 

• Android 의 경우에 Fragment 에서 API 응답을 처리하는 때 Fragment 종료 이후 에 응답을 받았을 경우에 대한 처리
  • 흔히 발생하는 일이지만 페이지가 렌딩되는 시점에 많은 API를 호출한다. 이 때 사용자는 원치않는 동작에 의해 진입된 페이지에서 빠르게 Back function 을 수행해 Fragment 가 종료되는 경우가 있다.
  • 이 때 Fragment 가 Activity 에 잘 붙어있는지 확인하는 게 중요하다. Android 경우에는 Context 를 사용하는 경우가 많아 Fragment 가 Detached 되었을 때 Context를 사용하면 Null crash가 발생할 수 있다.
• React Class component 일 경우 class 변수로 특정 Flag를 선언하여 ( ex. isMounted ) Component 생명주기에 따른 에러를 방어해야 한다.
• React hooks 의 SideEffect 를 이용할 경우에는 Dependencies 의 변화할 때마다 Axios 의 API call 을 취소해 주어야 한다.
  • SPA 특성상 App이 크래시가 크게 발생하지 않지만 history로 URL Context 를 변경될 경우 사용자가 의도하지 않았음에도 페이지가 변경되는 경우가 발생한다. 
  • Class component 에서 특정 Flag를 이용한 처리, useEffect 에서의 API cancellation 처리가 잘 되어있다면, 안정적이고 빠른 App을 만들 수 있다.
    • Javascript 특성상 Single thread 로 종료되어야 하는 Routine 이 Background 에서 동작하여 성능에 문제를 일으키는 경우가 많다.
    • 이런 불상사를 막기 위해서는 비동기로 수행되는 Network handling 이 잘 되어야 한다.

 

위 주제를 시작으로 간단하게 두 프레임웍에 대한 네트워크 처리를 정리해보려고 한다.

https://family-gram.tistory.com/603

axios 를 이용한 REST API 호출 및 취소