React Native (21) 썸네일형 리스트형 React Native: 스플래시 화면 구성 # splash screen # Android Google Play Console에 앱을 테스트 하는 과정에서, 사전 출시 보고서에 아래와 같은 경고가 떴다. 이중 스플래시 화면..단어 자체가 생소한데, 앱을 구동시 첫 화면이 로드 되기 전에 보여지는 화면을 말한다.상용 앱들을 켜보면 대부분 그 앱이나 회사의 로고가 일정시간 떠있는 그 화면 말이다. 문제는 내 앱에서는 스플래시 화면을 설정한 적이 없기에아이콘 이후 빈 로딩 화면이 뜨는데 이게 UX를 해칠수 있기에 경고를 하는 것이다. 그럼 이제 문제가 있음을 알았으니 해결을 해보자. react-native-splash-screen 이라는 라이브러리를 사용이 가능하다. 라이브러리 설치npm i react-native-splash-screen --save Android native 설정- MainA.. React Native: Android 난독화 이후 release 네트워크 에러 발생 앱 배포시,앱 용량을 줄이고 취약점을 최대한 노출시키지 않기위해서 난독화 과정을거친다.proguard는 난독화 하는 방법 중 하나이다. 난독화를 하는 과정에서 class 등의 명칭 또한 바뀌고, 특정 클래스에서 사용하는 메소드 등이 난독화 과정을 거치게 되면서 동작이 되지 않는 오류가 발생한다. 특히나 axios나 네트워크와 관련된 패키지들에서 난독화 과정을 거치면서 이런 문제가 나타나서디버깅에서는 앱이 동작하고 네트워크 요청에 문제가 없는데,배포용 으로 빌드한 앱에서는 네트워크가 동작하지 않는 문제가 생긴다. 이를 위해서 android/app/proguard-rules.pro에 다음과 같이 난독화에서 제외시켜줄 코드들을 포함하였다.# Add project specific ProGuard rules he.. React Native: iOS 개발환경 셋팅 # pod install # following Swift pods cannot yet be integrated as static libraries pod install시 아래 오래 발생 [!] The following Swift pods cannot yet be integrated as static libraries:The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries), you may set `use_modular_headers!` globally in your Podfile, or specify.. React Native: iOS 개발 환경 셋팅 # pod install error # dependency were found, but they required a higher minimum deployment target # kakao-login React Native를 통해 Android 앱 개발시, kakao 로그인을 구현하기 위해 kakao-login 라이브러리를 이용했다.iOS에서 cd ios pod install을 진행하는 중에 [!] CocoaPods could not find compatible versions for pod "kakao-login": In Podfile: kakao-login (from `../node_modules/@react-native-seoul/kakao-login`)Specs satisfying the `kakao-login (from `../node_modules/@react-native-seoul/kakao-login`)` dependency were found, but they require.. React Native: iOS 개발환경시 오류 # Error spawn ./gradlew EACCESS # Mac Mac에서 react native 설치후, 관련 프로젝트를 받아서 npx react-native run-android 명령어 실행시 에뮬레이터까지도 잘 켜지는데 아래 오류가 발생 Error: spawn ./gradlew EACCES at ChildProcess._handle.onexit (node:internal/child_process:286:19) at onErrorNT (node:internal/child_process:484:16) at process.processTicksAndRejections (node:internal/process/task_queues:90:21) android/gradlew 실행권한이 없어서 발생한 문제 cd androidchmod +x gradlew 로 실행권한을 줘서 .. React Native: React Devtools 연동하기 React 관련 프로젝트를 편하게 디버깅 할 수 있는 React Devtools를 연동시켜보자 설치npm install -g react-devtools 실행react-devtools 위 명령어를 실행하면 아래와 같은 창이 뜬다.The server is listening on the port 8097 이라는 문구를 볼 수 있다.React devtools와 react native의 Android 프로젝트를 연결해보자 우선 npx react-native run-android를 통해 안드로이드 앱을 개발모드로 실행한다.그리고adb -s 디바이스명 reverse tcp:8097 tcp:8097 또는, 하나의 디바이스만 연결되어 있는 경우 디바이스명을 생략하고adb reverse tcp:8097 tcp:8097 (.. React Native: 여러 request 병렬 처리시, 토큰 refresh 하기 # single-flight # interceptors Axios의 interceptors 기능을 통해 access token을 갱신하는 로직을 구현하는 과정에서,request에서 token이 만료되었을 때 새로운 토큰을 갱신하는 로직을response interceptors에 구현해놓은 상태였다. 그런데, 여러가지의 request를 동시에 병렬적으로 요청하는 로직에서 오류가 발생했다.예를들어 request1, request2, request3가 모두 만료된 토큰을 가지고 실행되었을 때, request1이 refresh_token을 통해 새로운 토큰을 발급받아서 new_access_token과 new_refresh_token을 발급받아서 request를 다시 요청하는 것까지는 문제가 없다. 그런데 request2부터는 access_token을 새로 발급받기 위.. React Native: Android, gradle # gradle-wrapper # AGP (com.android.tools.build:gradle) React Native를 통해 Android개발을 진행하는 과정에서 빌드를 할 때 gradle을 통해 진행이 된다.이때 gradle의 버전이 프로젝트에 따라서 중요한데, gradle의 버전과 관련하여 혼동되는 부분이 존재한다. 프로젝트/android/grale/wrapper/gradle-wrapper.properties 를 보면,distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip위와 같은 형태로 프로젝트 빌드시 사용할 gradle 버전이 명시되어 있다. 그리고 내가 현재 진행하는 프로젝트의 프로젝트/android/build.gradle 에는 다음과 같은 gradle 버전이 명시되어 있다.buildScript { .. 이전 1 2 3 다음
