FE Development/React-Native10 CodePush 적용 적용 과정 AppCenter 설정 npm install -g appcenter npm install appcenter appcenter-analytics appcenter-crashes npm install react-native-code-push AppCenter 앱 생성 Appcenter 페이지에서 생성 또는 cli 활용 Appcenter 페이지 Release Type = Production Platform = React Native cli appcenter apps create -d appName-aos -o android -p react-native appcenter apps create -d appName-ios -o ios -p react-native AppCenter 로그인 appcenter.. 2022. 1. 17. 트러블 슈팅 - FlatList 최적화 문제가 되었던 사항 Flatlist로 페이지네이션한 리스트의 항목이 70개 이상이 되는 경우 눈에 띄게 버벅이는 현상 ListHeaderComponent에 넘긴 TextInput에서 한글자 입력할때마다 키보드 창이 dismiss되는 현상 해결과정 Flatlist 최적화 방법에 대하여 찾아보며 문제를 해결하였다. 1번 문제의 경우 유니크한 key값을 지정하지 않아 발생한 이슈였으며 2번 문제의 경우 인라인 함수 작성으로 인해 한글자 입력시마다 (setState 호출시마다) 상태 변화로 인해 ListHeaderComponent로 넘긴 함수가 재호출 되어 발생한 이슈였다. 기존 코드 예시 // render header const renderHeaderView = () => ( ); ... name} conte.. 2022. 1. 13. react-native-webview을 통해 띄운 웹과 앱간의 인터랙션 진행중인 프로젝트에서 신규 개발을 진행하던 중 웹뷰로 띄워지는 화면에서 특정 버튼 클릭시 앱 내에서 필요한 화면으로 이동해야 하는 기능을 구현하게 되었다. 이전에 지도를 webview로 띄웠던 경우에는 지도 웹 또한 직접 구현하였기 때문에 JavaScript의 postMessage를 활용한 경험이 있었지만 이번에는 해당 웹을 수정하기는 어려운 상황이었고 react-native-webview에서 제공되는 injectedJavaScript를 이용해 구현하기로 하였다. WebView 컴포넌트 예시코드 injectedJavaScript 예시코드 웹뷰가 로드될때 특정 javascript 코드를 심어줄 수 있다. 아래의 예시는 클릭한 버튼의 value 속성값을 받아 해당하는 상세 정보를 보여주는 페이지로 이동하는 .. 2022. 1. 10. 트러블 슈팅 - 키보드가 UI를 가리는 경우 (KeyboardAvoidingView) 문제가 되었던 사항 android의 경우 버튼을 하단에 위치시키면 키보드가 올라올때 자동으로 버튼이 키보드 위로 올라가게 된다. 그러나 ios의 경우 키보드가 올라와도 버튼이 제자리에 있어 키보드를 내린 후 버튼을 클릭해야 하는 불편함이 생기게 되었다. 해결방안 React Native에서 제공하는 KeyboardAvoidingView를 컴포넌트화하여 해당 문제가 발생하는 UI에 적용하였다. 키보드 높이를 구해 키보드만큼 버튼의 높이를 올리려고 하였으나 디바이스마다 키보드의 높이가 달라 몇가지 문제가 있었다. 1. keyboardVerticalOffset에 keyboardHeight을 그대로 전달하였으나 너무 높이 올라가 0.1씩 수정해가며 3.4라는 수치를 찾음 2. 3.4라는 수치는 찾았으나 keybo.. 2021. 11. 25. React Native 보안편 소스코드 난독화 - Android 적용 배경 업무 중 클라이언트 측 보안 정책에 위반되는 항목 중 소스코드 난독화가 되지 않은 점이 있어 난독화를 적용하게 되었다. 클라이언트 측에서는 안드로이드 앱에서의 난독화만 요청하였는데 일단 보안은 굉장히 중요한 부분이고 React Native로 개발을 하고 있기 때문에 조만간 IOS, JS 소스코드 난독화도 적용 후 기록할 예정이다. 적용 과정 Proguard 적용 알아보기 Proguard란 ? 소스코드를 난독화 및 최적화 해주는 무료 오픈소스 툴이다. Android grade plugin 3.4.0 이상 버전에서는 기본적으로 R8 컴파일러를 사용한다. R8은 프로젝트의 자바 바이트 코드를 Android 플랫폼에서 실행되는 DEX 형식으로 변환하는 기본 컴파일러입니다. R8 대신 proguard .. 2021. 11. 14. 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. React Native 작동방식 이해를 돕는 용어 RootView? 네이티브 화면들이 구성되는 컨테이너 역할 ( 자바스크립트 컴포넌트의 네이티브 표현방식 ) 브릿지? RootView를 포함한 대부분의 네이티브 쪽은 특정 플랫폼에 맞는 언어(Object-C 혹은 Java)로 작성되어 있다. 하지만 브릿지는 전부 C++로 작성되어 있다. 브릿지 인터페이스는 전자와 후자를 상호작용하도록 도와준다. 브릿지는 자바스크립트 -> 네이티브, 네이티브 -> 자바스크립트 두개의 엔드포인트를 가진다. UIManagerModule? 모든 자바스크립트 UI 컴포넌트와 이와 연관된 네이티브 화면 간의 맵핑 정보를 저장하고 있다. 자바스크립트 컴포넌트가 생성되거나 업데이트되거나 삭제될 때마다 이 맵핑 정보를 이용해 적절하게 관련 네이티브 뷰를 생성하거나 업데이.. 2021. 10. 7. 이전 1 다음
