crossorigin="anonymous">
[RN] Google Firebase Analytics & Crashlytics 설치 및 세팅 가이드 : 0.80.2+ 버전 기준
·
React & React Native/환경 설정 및 구성
해당 글에서는 Google Firebase Analytics & Crashlytics 설치 세팅 방법에 대해 알아봅니다. Swift와 Kotlin 환경 내에서 구성이 됩니다.💡 [참고] 이전 react-native의 0.80.2 버전 아래에 대한 설치에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다. [RN] React Native Firebase Analytics + Crashlytics 이해 및 설정 방법 : Android해당 글에서는 React Native에서 Android 개발환경에서 Firebase Analytics와 Crashlytics를 이해하고 설정하는 방법에 대해 확인합니다. 💡 React Native 환경에서 Firebase 설정에 관련된 링크들입니다.분류플랫adjh54.ti..
[RN/오류노트] Solved - Sentry std::allocator error
·
React & React Native/오류노트
해당 글에서는 React Native 환경에서 앱을 빌드하는 과정에서 발생한 오류 중 Sentry 빌드 오류에 대한 해결 방법에 대해 알아봅니다.1) 문제점 확인💡문제점 확인- Xcode로 빌드를 수행중에 아래와 같은 문제가 발생하였습니다.1. Static assertion failed due to requirement '!is_const::value': std::allocator does not support const types2. Static assertion failed due to requirement 'is_same, std::allocator>::value': [allocator.requirements] states that rebinding an allocator to the same t..
[RN] React Native 환경에서 react-native-rename을 활용하여 프로젝트 명, 패키지 일괄 변경하기
·
React & React Native/라이브러리 활용
해당 글에서는 React Native 환경에서 react-native-rename을 이용하여서 프로젝트 명, 패키지 명을 일괄적으로 변경하는 방법에 대해 알아봅니다 1) react-native-rename 💡 react-native-rename- React Native 프로젝트의 이름과 번들 ID(패키지명)를 변경해 주는 CLI 도구입니다. - 프로젝트 생성 이후 앱 이름이나 번들 ID(예: Android의 com.example.app, iOS의 org.reactjs.native.example.MyApp)를 바꾸고 싶을 때 유용하게 사용됩니다. react-native-renameRename react-native app with just one command. Latest version: 3...
[RN] React Native에서 구글 애드몹(Google Admob) 이해하고 활용하기 -2 : 광고 종류 및 구현 확인
·
React & React Native/라이브러리 활용
해당 글에서는 React Native에서 구글 애드몹 종류를 해보고 구현해 보는 방법에 대해서 알아봅니다. 💡 [참고] 구글 애드몹에 대해 이해하고 설정 방법에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다. [RN] React Native 환경에서 구글 애드몹(Google Admob) 이해하고 활용하기 -1 : 가입에서 간단 연결까지해당 글에서는 React Native 환경에서 구글 애드몹을 연동하여 광고를 출력하는 방법에 대해 알아봅니다. 1) 구글 애드몹(Google Admob)💡 구글 애드몹(Google Admob)- 모바일 앱 수익화를 위한 구글의 광고adjh54.tistory.com 1) 구글 애드몹(Google Admob)💡 구글 애드몹(Google Admob)- 모바일 앱 ..
[RN] React Native 환경에서 구글 애드몹(Google Admob) 이해하고 활용하기 -1 : 가입에서 간단 연결까지
·
React & React Native/이해하기
해당 글에서는 React Native 환경에서 구글 애드몹을 연동하여 광고를 출력하는 방법에 대해 알아봅니다. 1) 구글 애드몹(Google Admob)💡 구글 애드몹(Google Admob)- 모바일 앱 수익화를 위한 구글의 광고 플랫폼입니다. 개발자들이 자신의 앱에 광고를 게재하고 수익을 창출할 수 있도록 도와주는 서비스입니다.특징설명다양한 광고 형식배너, 전면, 리워드 광고 등 여러 형태 지원높은 성과우수한 광고 채우기율(Fill Rate)과 수익률(eCPM) 제공분석 도구상세한 분석 도구와 리포트를 통한 성과 모니터링글로벌 네트워크전 세계적인 광고주 네트워크 보유간편한 사용손쉬운 구현과 관리 가능 1. 광고 유형 광고 유형설명배너앱 레이아웃의 일부를 차지하는 직사각형 광고가 게재됩니다...
[RN] React Native 환경에서 Drawer Navigation 이해하고 활용하기: @react-navigation/drawer
·
React & React Native/라이브러리 활용
해당 글에서는 React Native 환경에서 Drawer Navigation 이해하고 활용하는 방법에 대해 알아봅니다 1) Drawer Navigation 💡Drawer Navigation- React Native 앱에서 슬라이드 메뉴(사이드바)를 구현하기 위한 내비게이션 컴포넌트입니다. - 주로 앱의 메인 메뉴나 섹션 간 이동을 위해 사용됩니다.기능설명슬라이드 메뉴화면 왼쪽 또는 오른쪽에서 스와이프하여 메뉴를 열 수 있습니다.커스터마이징메뉴의 스타일, 애니메이션, 동작 등을 사용자 정의할 수 있습니다.제스처 지원스와이프 제스처를 통한 자연스러운 상호작용이 가능합니다.중첩 네비게이션Stack, Tab 등 다른 네비게이션 타입과 함께 사용할 수 있습니다. Drawer Navigator | Re..
[RN/오류노트] Solved - setBackgroundMessageHandler duplicate : FCM 중복 발송 문제 해결방법
·
React & React Native/오류노트
해당 글에서는 FCM에서 푸시메시지가 중복되어 전송되는 문제를 해결하기 위한 해결방법에 대해 알아봅니다1) 문제점💡문제점- 앱에 있는 상태(foreground)에서는 FCM을 전송하는 경우 정상적으로 한번 메시지가 전송이 되었지만, 아래와 같이 앱을 벗어난 상태(background)에서 똑같은 FCM이 두 개가 전송되는 문제가 발생하였습니다. 1. 소스코드 확인💡 소스코드 확인- 아래와 같이 App.tsx 파일이 실행되었을때, 앱에 있는 상태(foreground) 상태에서 메시지를 받기 위해 messaging().onMessage() 메서드를 사용하였고, 앱을 벗어난 상태(background) 상태에서 메시지를 받기 위해 messaging().setBackgroundMessageHandler()를 메..
[RN] React Native iOS 환경에서 Xcode를 이용하여 IPA 파일 생성(export) 및 설치(import) 방법
·
React & React Native/환경 설정 및 구성
React Native iOS 환경에서 IPA 확장자 파일로 생성하거나 혹은 IPA 파일을 설치하는 방법에 대해서 알아봅니다1) IPA(iOS App Store Package)💡 IPA(iOS App Store Package)- iOS 애플리케이션의 배포 패키지 파일 형식입니다. 이는 앱의 실행 파일과 리소스를 포함하는 압축된 아카이브입니다.- 앱스토어 배포, 기업 내부 배포, 테스트 배포 등 다양한 용도로 사용됩니다. 앱의 바이너리, 에셋, 메타데이터 등 앱 실행에 필요한 모든 파일을 포함합니다.- Apple의 코드 서명이 포함되어 있어 앱의 무결성과 신뢰성을 보장합니다.- XCode를 통해 생성할 수 있으며, 테스트 기기에 직접 설치하거나 App Store에 업로드할 수 있습니다.  2) App i..
[RN/오류노트] Solved - database is locked : SQLite
·
React & React Native/오류노트
해당 글에서는 database is locked 오류에 대해서 이를 해결하는 방법에 대해 알아봅니다1) 문제점💡 문제점- 모바일 기기에서 API 통신을 하는 도중에 아래와 같은 오류가 발생하였습니다.- database is locked- 해당 환경에서 데이터베이스를 사용하는 경우는 내부 DB로 SQLite를 사용하였고, 외부 DB로 PostgreSQL을 사용하고 있습니다. 💡 HTTP Client를 통한 로컬 데이터베이스 조회- 실제 IntelliJ HTTP Client로 호출을 하였을때 database is locked라는 문제가 발생하지 않았습니다.- 또한, 특정 모바일 기기에서만 수행이 되기에 해당 외부 PostgreSQL은 문제가 되지 않는다고 판단이 되었습니다. 💡 [참고] HTTP Cli..
[RN/오류노트] Solved - ScrollView doesn't work on android, Switch Component not working Click
·
React & React Native/오류노트
해당 글에서는 ScrollView, Switch에서 발생하는 오류에 대해서 이를 해결한 방법에 대해 알아봅니다.1) 문제점💡 문제점- 해당 문제점은 iOS 기기에서는 로 구성한 부분이 수행이 되지만, Android 기기에서는 ScrollView가 동작하지 않아서 스크롤이 생기지 않는 문제점이 발생하였습니다.- 또한, 두번째 문제로는 로 구성한 부분에 대해 클릭이 되지 않는 문제가 발생하였습니다.  💡부모 컴포넌트- 아래와 같이 부모 컴포넌트에서 자식 컴포넌트를 불러오는 구성입니다.import { Text, View } from "react-native";import ChildScreen from "./ChildScreens";const ParentsScreen = () => { return ( ..