FE Development17 React Native Firebase-Crashlytics 적용 적용 배경 앱 상용 배포 후 구글 콘솔을 통해 몇몇 비정상 종료건이 발견되었으나 구글 콘솔의 로그만으로는 정확한 원인 파악이 어려워 에러 추적을 위해 Crashlystic을 적용하기로 하였다. 사용 라이브러리 @react-native-firebase/crashlytics 적용 과정 App Module Setting 필요 https://rnfirebase.io/ Firebase Crashlytic 세팅 전 앱 모듈 ( @react-native-firebase/app )이 먼저 세팅 되어 있어야 한다. React Native Firebase | React Native Firebase Welcome to React Native Firebase! To get started, you must first setup.. 2021. 11. 12. 트러블 슈팅 - ReactNative http request 중 백그라운드 전환시 Network Error 문제가 되었던 사항 특정 정보를 등록하는 api 요청시 응답시간이 최대 1분가량 걸리는 상황 안드로이드의 경우 문제가 없었지만 ios에서 문제가 발생했다. api 요청을 보낸 후 백그라운드 진입시 요청 cancel 되어 포그라운드 재진입시 네트워크 에러가 반환된다. 사용된 라이브러리 https://github.com/ivanzotov/react-native-begin-background-task 해결 과정 접근 방식 서버 개발자와 해당 이슈에 대해 소통한 결과 안드로이드의 경우 앱이 종료된 경우 cancel과 관련되어 보이는 요청을 보내는데 ios의 경우 백그라운드 진입 또는 앱이 종료된 경우 모두 해당 요청을 보내는 것을 확인하였다. 해당 요청을 보내 network error가 반환이 되어도 서버단에서.. 2021. 11. 11. 에러노트 - 웹뷰 Did not receive response to shouldStartLoad in time 워닝 문제가 되었던 사항 이벤트 페이지 이동 후 해당 이벤트 정보 api 호출 후 응답 데이터를 웹뷰로 띄워주는 스크린에서 진입시마다 Did not receive response to shouldStartLoad in time, defaulting to YES 워닝이 발생하며 진입 속도가 느려 버벅거림이 발생한다. 사용된 라이브러리 https://github.com/react-native-webview/react-native-webview GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView React Native Cross-Platform WebView. Contribute to react-native-w.. 2021. 11. 5. React Native 세션 타임아웃 (session timeout) 설정 앱 보안 진단 결과 취약점 중 세션 타임아웃 미설정이 있어 세션 타임아웃을 구현하였다. 취약점 일정시간이 지난 후 사이트에 재 접속 하였을 때 로그인 상태가 유지되거나 동일 세션 ID가 생성되는 경우 취약할 수 있다. 공격자가 다른 취약점을 통해 획득한 세션 ID를 브라우저에 적용하여 재 로그인 될 때를 기다리다가 해당 권한으로 접근이 될 수 있다. 또한 로그인 후 세션을 종료하지 않고 자리를 비우는 동안 악의적인 사용자가 접속된 터미널을 이용하여 불법적인 행위를 시도할 수 있다. 설정 방법 react-native의 AppState를 사용하여 구현 앱이 백그라운드로 전환된 후 30분 이상 경과 후 앱 복귀 시 로그아웃 처리 하였다. useEffect(() => { const handleAppStateCh.. 2021. 10. 7. Web Storage ( 브라우저 저장소 )와 쿠키 쿠키란? HTTP 쿠키 서버가 사용자의 웹 브라우저에 보내는 작은 데이터 조각이다. Stateless 한 HTTP 프로토콜의 상태 저장 정보를 기억하는데 사용된다. Stateless 란? 모든 HTTP Request는 완전히 독립되어 전후 요청에 영향을 받지 않는다. 즉, 이전 요청에 대한 데이터를 따로 저장하지 않으면 서버에서 매번 모든 데이터를 보내야 한다. 이를 극복하기 위해 쿠키 ( 외 다양한 Storage )를 사용한다. 쿠키 특징 HTTP 요청이 있을 때마다 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다. HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안에 취약하다. 쿠키는 개수와 용량에 제한이 있으며 만료일자를 지정하게 되어 있다. 만료.. 2021. 10. 7. React Native 작동방식 이해를 돕는 용어 RootView? 네이티브 화면들이 구성되는 컨테이너 역할 ( 자바스크립트 컴포넌트의 네이티브 표현방식 ) 브릿지? RootView를 포함한 대부분의 네이티브 쪽은 특정 플랫폼에 맞는 언어(Object-C 혹은 Java)로 작성되어 있다. 하지만 브릿지는 전부 C++로 작성되어 있다. 브릿지 인터페이스는 전자와 후자를 상호작용하도록 도와준다. 브릿지는 자바스크립트 -> 네이티브, 네이티브 -> 자바스크립트 두개의 엔드포인트를 가진다. UIManagerModule? 모든 자바스크립트 UI 컴포넌트와 이와 연관된 네이티브 화면 간의 맵핑 정보를 저장하고 있다. 자바스크립트 컴포넌트가 생성되거나 업데이트되거나 삭제될 때마다 이 맵핑 정보를 이용해 적절하게 관련 네이티브 뷰를 생성하거나 업데이.. 2021. 10. 7. useContext, useReducer useContext 와 useReducer를 활용한 상태관리 1. useContext 기존의 컴포넌트 간에 데이터를 전달하려면 props를 이용해야 한다. props는 부모 자식 관계에서 데이터를 전달한다. A, B, C 컴포넌트가 각각 부모자식 관계인 경우 A 에서 C 컴포넌트로 데이터를 보내주려면 중간 B 컴포넌트를 거쳐야 한다. 컴포넌트가 많아져 구조가 깊어질 경우 비효율적이다. 이를 해결하기 위해 주로 사용된 라이브러리에 여러가지 전역 상태 관리 라이브러리가 있다. 주로 사용하였던 Redux를 대신 할 useContext와 useReducer에 대해 알아보았다. context는 한때 React 공식문서에서 사용하지 말라고 얘기했었으나 React 팀에서 context api를 새롭게 되살려 내고, .. 2021. 10. 7. 이전 1 2 다음
