React & React Native/라이브러리 활용

해당 글에서는 Firebase Cloud Message(FCM)에 대해 이해하고 환경을 구성하며 메시지를 수신하는 형태를 테스트하는 환경 구성 방법에 대해 이해를 돕기 위해 작성하였습니다.  💡 [참고] FCM 관련해서 구성 내용에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.분류링크FCM Spirng Boot API 구성 : 단순 전송 기능https://adjh54.tistory.com/432FCM React Native 초기 환경 설정https://adjh54.tistory.com/431FCM React Native Notifee 메시지 수신 구성https://adjh54.tistory.com/4333FCM React Natiive Notifee 메시지 전송 및 예약 발송 구성https:/..

해당 글에서는 expo-sensor를 이용하여서 실제 디바이스가 움직이는 모션을 이용하는 방법에 대해 알아봅니다. 💡 [참고] 이전에 작성한 글을 기반으로 좀 더 보기 편하게 재구성하였습니다. [RN] 자이로센서를 활용한 자이로스코프, 디바이스 모션 이해하기: expo-sensors 해당 글에서는 디바이스에 탑재되어 있는 자이로 센서를 이용하는 expo-sensors 라이브러리를 활용하여 자이로스코프(Gyroscope)와 디바이스 모션(DeviceMotion)을 이해하고 값을 추출하는 방법을 이해하 adjh54.tistory.com 1) expo-sensors 💡 expo-sensors - Expo SDK에서 제공하는 센서 관련 기능을 사용하기 위한 라이브러리입니다. 이 라이브러리를 사용하면 Expo 앱..

해당 글에서는 ONNX Runtime을 이용하면서 앱을 배포할 때 주의사항에 대해서 알아봅니다. 1) 문제점 💡 앱을 apk로 구성하는 과정에서 ONNX Runtime을 수행하는 부분에서 Crush 오류가 발생하여 앱 자체가 튕기는 증상이 발생하였음. 💡 [참고] Google Firebase Crashlytics 2) 해결방법 1. app/build.gradle : debuggable 속성 추가 💡 debuggable 속성 - 안드로이드 앱의 빌드 유형 중 하나인 debug 빌드에 대한 설정입니다. 이 속성을 true로 설정하면 디버그 모드에서 앱을 실행할 수 있습니다. 디버그 모드에서는 앱의 디버깅 및 테스트 작업을 수행할 수 있습니다. 이 속성은 개발 단계에서 유용하며, 배포 또는 프로덕션 환경에서는..

해당 글에서는 react-native-calendars에 대해 이해하고 응용하는 다양한 예시를 알아봅니다. 1) react-native-calendars 💡 react-native-calendars - 리액트 네이티브 애플리케이션에서 캘린더 기능을 구현하기 위한 패키지입니다. 해당 패키지는 Android 및 iOS 둘 다 호환이 가능합니다. 1. 설치 과정 💡 패키지 매니저인 npm이나 yarn을 이용하여 설치하여 주시면 됩니다. $ npm install --save react-native-calendars # or $ yarn add react-native-calendars 2. Calendar 속성 속성 설명 onDayPress 날짜를 선택했을 때 호출되는 콜백 함수 markedDates 특정 날짜에..

해당 글에서는 ONNXRuntime에서 모델을 불러온 이후 페이지를 이동하는 경우 메모리 누수가 발생함에 따라서 ONNX 모델 정리하는 방법에 대해서 공유합니다. 💡 [참고] 해당 글은 이전에 작성한 글들을 기반으로 작성하였습니다. [RN] ONNX(Open Neural Network Exchange) 이해하기 -1: React Native 활용해당 글에서는 React Native 기반의 ONNX에 대해서 이해하고 사용 방법에 대해서 확인합니다. 1) ONNX(Open Neural Network Exchange) 💡 ONNX(Open Neural Network Exchange) 란? - 딥러닝 모델을 서로 다른 프레임워크 간adjh54.tistory.com [RN] ONNX(Open Neural Netw..

해당 글에서는 react-native에서 statusBar에 대해 이해하고 활용하는 방법에 대해 알아봅니다. 1) StatusBar 💡 StatusBar - 모바일 애플리케이션의 상태 표시줄을 제어하는 데 사용됩니다. - StatusBar 컴포넌트를 사용하여 상태 표시줄의 스타일, 배경색, 텍스트 색상 등을 설정할 수 있습니다. 1. 주요 속성 💡 StatusBar에서 사용되는 주요한 속성입니다. 속성 플랫폼 타입 설명 animated 공통 boolean - 상태 표시줄의 애니메이션 여부를 제어합니다. barStyle 공통 StatusBarStyle - 상태 표시줄의 텍스트 색상을 설정합니다. - Andriod 23이상 버전에서 이용이 가능합니다. hidden 공통 boolean - 상태 표시줄을 숨깁니..

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

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