해당 글에서는 React-native로 구성한 앱을 Google Play Console에 설정하는 방법에 대해 공유합니다.  💡 [참고] Android / iOS에 각각 앱을 배포하는 과정에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.플랫폼분류링크AndroidReact Native Google Play Store 등록 방법 -1 : 초기 환경 설정https://adjh54.tistory.com/301AndroidReact Native Google Play Store 등록 방법 -2 : Google Play Console 설정https://adjh54.tistory.com/306AndroidReact Native Google Play Store 등록 방법 -3 : Google Play Cons..

해당 과정은 앱을 Google Play Store에 출시하기 이전에 Google Play Console에서 처리해야 하는 작업 이전사전에 준비하는 작업에 대해 알아봅니다.    💡 [참고] Android / iOS에 각각 앱을 배포하는 과정에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.플랫폼분류링크AndroidReact Native Google Play Store 등록 방법 -1 : 초기 환경 설정https://adjh54.tistory.com/301AndroidReact Native Google Play Store 등록 방법 -2 : Google Play Console 설정https://adjh54.tistory.com/306AndroidReact Native Google Play Stor..

해당 글에서는 react-native에서 Modal 팝업을 띄우는 방법과 오버레이가 된 상태에서 백그라운드에 색을 적용하는 방법에 대해 알아봅니다. 1) React Native Modal 💡 React Native Modal - React Native 애플리케이션에서 모달 창을 구현하기 위해 사용되는 컴포넌트입니다. - 모달은 사용자에게 추가 정보나 작업을 요청하거나 알림을 표시하기 위해 사용됩니다. 모달은 화면에 오버레이 형태로 나타나며, 일시적으로 주요 콘텐츠를 가리고 사용자의 입력에 집중할 수 있도록 도와줍니다. Modal · React Native The Modal component is a basic way to present content above an enclosing view. react..

해당 글에서는 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"..