react-native

해당 글에서는 react-native 개발 환경에서 gif 파일을 불러오는 방법에 대해서 확인해 봅니다. 1) Andriod 환경에서 Gif 지원 💡 "자체 네이티브 코드를 빌드할 때, Android에서 GIF와 WebP는 기본적으로 지원되지 않습니다."라고 공식사이트에서 이야기하고 있습니다. 이에 따라 추가 설정이 필요합니다. 💡 기존 iOS 환경에서는 아래의 설정 필요없이 수행이 잘된다고 합니다. 2) 환경 구성 1. metro.config.js 💡 해당 파일 내에서 assetExts 내에 .gif 확장자를 추가해 줍니다. const path = require("path"); const { getDefaultConfig, mergeConfig } = require("@react-native/metro..

해당 글에서는 firebase 관리 기능을 사용하는 도중 개발 단계와 운영단계를 분리하기 위한 방법에 대해서 알아봅니다.  💡 React Native 환경에서 Firebase 설정에 관련된 링크들입니다.분류플랫폼링크Firebase Analytics + Crashlytics 이해 및 설정 방법Androidhttps://adjh54.tistory.com/254Firebase Analytics + Crashlytics 이해 및 설정 방법iOShttps://adjh54.tistory.com/530firebase 개발/운영 분리(Android) google-services.jsonAndroidhttps://adjh54.tistory.com/297firebase 개발/운영 분리(iOS) : GoogleServic..

해당 글에서는 React-native 환경에서 Android Studio의 디버깅 툴(Locat, Profiler, App Inspection)을 사용하는 방법에 대해 알아봅니다.1) Android Studio 디버깅 주요 기능 1. Logcat💡 Logcat- 안드로이드 스튜디오에서 제공하는 디버깅 도구이며, 애플리케이션에서 발생하는 로그 및 디바이스 로그 메시지를 표시해 줍니다 - 이를 통해 로그 출력을 모니터링하고 필터링하여 앱을 디버깅하기 쉽게 도와줍니다. Logcat을 이용하여 로그 보기  |  Android 스튜디오  |  Android DevelopersAndroid 스튜디오에서 Logcat 창에 시스템 메시지를 표시하는 방법을 알아보세요.developer.android.com  2. Pr..

해당 글에서는 react-native 환경에서 expo-keep-awake를 활용하는 방법에 대해 알아봅니다.1) expo-keep-awake💡 expo-keep-awake- 화면이 자동으로 어두워지거나 잠기는 것을 방지할 수 있는 패키지입니다. 이는 프레젠테이션 중이나 앱을 긴 시간 동안 사용하는 경우와 같이 앱이 실행 중일 때 화면을 계속 켜 두고 싶은 상황에서 유용합니다.- 안드로이드 기기에서 배터리 최적화 모드로 전환되는 것을 방지할 수 있습니다. 또한 해당 기능을 이용하여 앱을 유지하거나 유지된 것을 해제할 수 있습니다. KeepAwakeA React component that prevents the screen from sleeping when rendered.docs.expo.dev exp..

해당 글에서는 React-native에서 firebase_analytics를 APK 파일을 구성하는 단계에서 발생하는 오류와 해결 방법에 대해 알아봅니다.   1) 문제점💡 아래와 같은 문제가 발생하였습니다.- @react-native-firebase_analytics:copyReleaseJniLibsProjectAndLocalJars> Task :@react-native-firebase_analytics:copyReleaseJniLibsProjectAndLocalJars FAILEDFAILURE: Build failed with an exception.* What went wrong:A problem was found with the configuration of task ':@react-native..

해당 글에서는 React-native 개발 환경 중 안드로이드 디바이스에 대해 뒤로 가기 버튼에 대해서 방지하는 방법에 대해 공유합니다. 1) BackHandler 💡 BackHandler - Android 기기의 하드웨어 백 버튼을 처리하는 인터페이스를 제공하는 모듈입니다. 이 모듈을 사용하면 백 버튼 누름 이벤트를 감지하고 버튼이 눌렸을 때 사용자 정의 로직을 구현할 수 있습니다. - react-native 설치 시 해당 모듈이 포함되어 있습니다. 💡 [참고] 해당 디바이스 화면에서 뒤로가기 버튼을 의미합니다. 2) BackHandler 활용 1. 라이브러리 가져오기 import { BackHandler } from 'react-native'; 2. 이벤트 리스너 등록 💡 화면이 렌더링 된 이후 us..

해당 글에서는 react-native에서 발생하는 오류에 대한 해결방법에 대해 공유합니다 1) 문제점💡 콘솔 상에 아래와 같이 .env 파일에 정의한 데이터를 불러오지 못하여 undefined 값으로 출력되고 있는 문제가 발생하였습니다.handleWebViewStateChange {"canGoBack": false, "canGoForward": false, "loading": false, "target": 139, "title": "", "url": ""} WARN Encountered an error loading page {"canGoBack": false, "canGoForward": false, "code": -2, "description": "net::ERR_NAME_NOT_RESOLVED"..

해당 글에서는 react-native에서 발생하는 오류에 대한 해결방법에 대해 공유합니다1) 문제점💡 아래와 같은 문제가 발생하였습니다Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.      2) 해결방법 시도한 해결 방법-1 : 포트포워딩 — 해결되지 않음💡 adb reverse tcp:8081 tcp:8081 명령어는 안드로이드 디버깅 브리지(ADB)를 사용하여 포트 포워딩을 설정하는 명령입니다. 이 명령은 로컬 8081 포트의 트래픽을..

해당 글에서는 react-native에서 발생하는 오류에 대한 해결방법에 대해 공유합니다.1) 문제점💡아래와 같은 문제가 발생하였습니다.Execution failed for task ':app:installDebug'.java.util.concurrent.ExecutionException: com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package com.xxx signatures do not match previously installed version; ignoring!💡 해당 문제는 로컬에서 react-native를 실행하는..

해당 글에서는 react-native에서 발생한 오류에 대해 해결방법에 대해 공유합니다.1) 문제점💡 아래와 같은 문제점이 발생하였습니다.- 이는 프로젝트 경로에 로컬 debug.keystore가 존재하지 않아 발생하는 문제입니다.FAILURE: Build failed with an exception. What went wrong: Execution failed for task ':app:validateSigningDebug'. Keystore file '/Users/lee/Desktop/workspace/xxx/xxxx/android/app/debug.keystore' not found for signing config 'debug'.    2) 해결방법💡 이를 해결하기 위해 debug.keysto..