React & React Native

해당 글에서는 react-native 내에서 firebase를 활용하는 경우 iOS 플랫폼에서 환경 파일을 개발(Debug)과 운영(Release) 상황에 따라 GoogleService-Info.plist 파일을 분리하는 방법에 대해 알아봅니다. 💡 React Native 환경에서 Firebase 설정에 관련된 링크들입니다.분류플랫폼링크Firebase Analytics + Crashlytics 이해 및 설정 방법Androidhttps://adjh54.tistory.com/254Firebase Analytics + Crashlytics 이해 및 설정 방법iOShttps://adjh54.tistory.com/530firebase 개발/운영 분리(Android) google-services.jsonAndro..

해당 글에서는 React Native에서 iOS 개발환경에서 Firebase Analytics와 Crashlytics를 이해하고 설정하는 방법에 대해 확인합니다. 💡 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 개발/운영 ..

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

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

해당 글에서는 안드로이드 12 이하 버전에서 디바이스 알림 권한 체크가 안됨을 확인하였습니다. 이에 따라 이를 대체하는 방법에 대해 알아봅니다.1) 현상 1. 개발 현상 파악💡 개발 현상 파악- 기존 ‘안드로이드 13’이상 버전에서 사용되던 알람에 대한 권한이 ‘안드로이드 12’ 내에서는 POST_NOTIFICATIONS 속성을 이용하여 알림에 대한 권한을 체크를 하였을 때 이에 대해 통제가 되지 않는 현상이 발생하였습니다.  💡 [참고] 권한에 대한 정보- 안드로이드 13이상 버전에서는 ‘POST_NOTIFICATIONS’ 권한을 이용하여서 알람 허용에 대한 권한을 체크하고 있었습니다.  종류설명Andriod 키 값 notification푸시 알림 사용 권한POST_NOTIFICATIONS [RN]..

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

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

해당 글에서는 실제 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://adjh54.tistory.com/434     1) 전체 환경 구성1. 공통 환..

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

해당 글에서는 빠르게 구성할 수 있는 CRA를 이용하고 Typescript 템플릿을 이용하여 React 프로젝트를 간단하게 구현하는 방법에 대해 알아봅니다.  1) 프로젝트 환경💡 프로젝트 개발환경- 프로젝트에서 사용된 환경과 버전입니다.환경버전Node18.17.1yarn1.22.19IDEVisual Studio Codereact18.2.0typescript4.9.5react-router6.21.2react-router-dom6.21.2  2) 프로젝트 환경 구성 1. CRA + Typescript 프로젝트 구성# format$ npx create-react-app --template typescript# 프로젝트 구성 예제$ npx create-react-app multi-flex-lunch --t..