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

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

[RN] react-native 라이브러리 활용 총 정리 : 라이브러리, 환경설정, 앱 배포

해당 글에서는 react-native 내에 활용하였던 라이브러리, 환경설정, 앱 배포와 관련하여서 중간정리를 하기 위한 목적으로 작성한 글입니다. 1) 라이브러리 총 정리💡 라이브러리 총 정리 - 지금까지 react-native 프로젝트를 수행하면서 사용하였던 라이브러리와 이와 관련되어 링크를 포함하여 정리하였습니다. - 라이브러리는 react-native 내부에서 제공해 주는 라이브러리, 써드파티 라이브러리를 이용한 외부 라이브러리, Expo Modules에서 사용하는 라이브러리들로 구성되어 있습니다.라이브러리 명사용처라이브러리 활용처링크AppState사용자의 앱 상태 확인에 사용- 사용자가 앱을 사용하고 있는 상태(active)이거나 앱을 벗어난 상태(background) 상태일때의 관리를 하여 각각..

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

[RN] react-native 버튼 중복 호출 막는 방법 : lodash Debounce + useCallback

해당 글에서는 버튼의 중복 호출을 막기 위해 lodash 라이브러리의 Debounce 모듈을 활용하는 방법에 대해 알아봅니다. 1) 문제점 파악💡 문제점 파악 - SetState()로 버튼을 누르면 즉각적으로 버튼에 대해 disabled = true 처리를 하면 해결이 되지만, 부모와 자식 구조간에 관계에서 빠르게 처리가 되지 않아서 중복으로 함수 처리가 되는 문제가 발생하였습니다. - 이에 따라서 버튼을 여러 번 빠르게 눌러도 한 번의 처리인 것과 같은 기능을 구현하고 싶어서 찾아보는 중 lodash 라이브러리의 Debounce 모듈을 알게 되어 이를 적용하였습니다. 2) lodash💡 lodash - JavaScript에서 사용할 수 있는 유틸리티 라이브러리입니다. - 배열, 객체, 함수, 언어 유틸..

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

[RN] react-native-version-check 이해하고 활용하기 : App 버전, Google PlayStore 버전 정보

해당 글에서는 react-native-version-check 라이브러리를 활용하여 App 버전과 Google PlayStore 내에 등록된 버전을 비교하여 앱 업데이트를 하는 방법에 대해 알아봅니다. 1) react-native-version-check 💡 react-native-version-check - React Native 앱의 버전을 확인하고 업데이트를 관리하는 데 도움이 되는 라이브러리입니다. - 이를 사용하면 현재 앱의 버전 정보를 불러오거나, 앱 스토어에 새로운 버전이 출시되었는지 확인하는 등의 기능을 사용할 수 있습니다. - 또한 사용자가 앱을 최신 상태로 유지하도록 권장하는 메시지를 보여주는 기능도 제공합니다. 이 라이브러리는 Android와 iOS 모두에서 사용할 수 있습니다. 1...

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

[RN] React Native Notification 푸시 메시지 예약 발송 활용하기 : Notifee Trigger

해당 글에서는 Notifee 라이브러리를 이용하여 예약 발송 방법에 대해 이를 활용하는 방법에 대해 알아봅니다. 💡 [참고] FCM 관련해서 구성 내용에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다. 분류 링크 FCM Spirng Boot API 구성 : 단순 전송 기능 https://adjh54.tistory.com/432 FCM React Native 초기 환경 설정 https://adjh54.tistory.com/431 FCM React Native Notifee 메시지 수신 구성 https://adjh54.tistory.com/4333 FCM React Natiive Notifee 메시지 전송 및 예약 발송 구성 https://adjh54.tistory.com/434 1) Notifee ..

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

[RN] React Native Firebase Cloud Message(FCM) 활용하여 푸시 메시지 수신 구성 : Notifee

해당 글에서는 실제 FCM을 이용하여 메시지를 전송하고 수신하는 방법에 대한 활용방법에 대해 알아봅니다. 💡 [참고] FCM 관련해서 구성 내용에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다. 분류 링크 FCM Spirng Boot API 구성 : 단순 전송 기능 https://adjh54.tistory.com/432 FCM React Native 초기 환경 설정 https://adjh54.tistory.com/431 FCM React Native Notifee 메시지 수신 구성 https://adjh54.tistory.com/4333 FCM React Natiive Notifee 메시지 전송 및 예약 발송 구성 https://adjh54.tistory.com/434 1) 전체 환경 구성 1. ..

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

[RN] React Native Firebase Cloud Message(FCM) 이해 및 환경설정, 간단 테스트: Android

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

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

[RN] expo-sensor의 DeviceMotion 이해하고 활용하기

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

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

[RN] ONNX(Open Neural Network Exchange) 이해하기 - 4 : 앱 배포시 주의사항

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

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

[RN] react-native calendars 이해하고 활용하기

해당 글에서는 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 특정 날짜에..

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

[RN] ONNX(Open Neural Network Exchange) 이해하기 -3 : ONNX 모델 정리

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

adjh54
'React & React Native/라이브러리 활용' 카테고리의 글 목록