해당 글에서는 React Native 환경에서 모니터링을 위한 Firebase Crashlytics, Sentry에 대해서 알아봅니다. 1) Firebase Crashlytics💡 Firebase Crashlytics - 사용자의 장치 및 앱 환경과 관련되어 발생하는 디버그 정보를 수집하고 보고서를 생성하는 기능을 제공합니다. Crash Error와 같이 애플리케이션에서 예기치 않게 종료되는 심각한 문제에 대해서 이를 수집하고 보고서를 생성합니다. - 이를 통해 개발자는 앱의 문제를 신속하게 파악하고 수정할 수 있습니다. Crashlytics는 앱의 안정성과 품질을 향상하는 데 도움을 줄 수 있습니다. - Firebase와의 통합을 통해 앱의 분석과 성능 모니터링을 한 곳에서 관리할 수 있습니다. 💡 [..

해당 글에서는 React Native 환경에서 Firebase Crashlytics에 대해 Slack 메시지를 전달받는 설정에 대해 알아봅니다.  1) Firebase Crashlytics💡 Firebase Crashlytics- 사용자의 장치 및 앱 환경과 관련되어 발생하는 디버그 정보를 수집하고 보고서를 생성하는 기능을 제공합니다. Crash Error와 같이 애플리케이션에서 예기치 않게 종료되는 심각한 문제에 대해서 이를 수집하고 보고서를 생성합니다.- 이를 통해 개발자는 앱의 문제를 신속하게 파악하고 수정할 수 있습니다. Crashlytics는 앱의 안정성과 품질을 향상하는 데 도움을 줄 수 있습니다.- Firebase와의 통합을 통해 앱의 분석과 성능 모니터링을 한 곳에서 관리할 수 있습니다...

React Native 환경에서 모니터링을 위한 Sentry를 구성하며 Slack Integration을 통해 Sentry의 메시지를 전달받는 형태를 구성합니다. 1) Sentry💡Sentry- 실시간 애플리케이션 모니터링 및 오류 추적 플랫폼입니다. 개발자들이 소프트웨어의 성능을 모니터링하고 버그를 신속하게 식별하고 해결할 수 있도록 도와줍니다. React Native | Sentry for React NativeLearn how to set up Sentry's React Native SDK.docs.sentry.io 1. Sentry 주요 기능💡Sentry 주요 기능- Sentry에서 제공하는 주요 기능들에 대해 알아봅니다.기능설명충돌 해결 가속화- 사용자 정의 알림으로 신속한 조치- 실시간 통..

해당 글에서는 출시 모드로 APK 또는 Android App Bundle에 서명해야 합니다. 오류 메시지에 대해서 이를 해결하는 방법에 대해 알아봅니다.1) 문제점💡 문제점- Google Play Console에 최초 앱을 출시할 때, 이를 위해 aab 확장자 빌드 파일을 구성하고 업로드를 하는 도중에 "디버그 모드로 서명한 APK 또는 Android App Bundle을 업로드했습니다."라는 아래와 같은 오류가 발생하였습니다.     2) 해결방법💡해결방법- app/build.gradle 파일 내에 아래와 같은 설정을 추가해야합니다.- android.buildTypes.release 내에 signingConfig signingConfigs.release 속성을 지정합니다. - 이를 지정하는 이유는 ..

해당 글에서는 React-Native 환경에서 Android / iOS 플랫폼에서의 앱 이름을 바꾸는 방법에 대해 알아봅니다. 1) Android에서 앱 이름 바꾸기 1. main/AndroidManifest.xml💡main/AndroidManifest.xml- 해당 파일은 android/app/src/main 디렉터리 내에 해당 파일이 존재합니다.- 해당 파일에서 @string/app_name을 참조하고 있습니다. 그렇기에 string.xml 파일을 찾아서 이를 수정해 줍니다.  2. string.xml💡string.xml- android/app/src/main/res/values 디렉터리 내에 해당 파일이 존재합니다. 앱 이름  3. 변경 적용 화면   2) iOS 1. XCode💡XCod..

해당 글에서는 react-native에서 자주 사용하는 명령어들을 pacakge.json 파일 내에서 scripts로 구성하여서 편하게 이용하기 위한 방법을 확인해 봅니다. 1) Run 1. Android💡Android 실행 명령어 - 해당 실행 명령어는 연결되거나 혹은 안드로이드 시뮬레이터를 실행하기 위한 스크립트입니다. - 기본적으로 “npx react-native run-android” 명령어를 통해서 안드로이드를 실행하는 명령어로 구성되었습니다. - --port 8081 옵션을 통해서, 개발 서버를 8081 포트로 실행하도록 지정하였습니다. 이는 일반적으로 사용하는 8080 로컬 서버와의 충돌을 피하기 위해 지정하였습니다. - APP_ENV=local은 dotenv에서 지정한 환경 파일을 불러오기..

해당 글에서는 React-Native에서 빌드 시 발생하는 오류에 대한 해결방법을 확인합니다. 1) 문제점💡문제점- React-Native 환경에서./gradlew assembleRelease 명령어를 통해서 APK 파일을 생성하기 위해서 터미널에서 명령어를 수행하였으나 아래와 같은 빌드 오류가 발생하였습니다.WARNING: The specified Android SDK Build Tools version (33.0.0) is ignored, as it is below the minimum supported version (34.0.0) for Android Gradle Plugin 8.2.1. Android SDK Build Tools 34.0.0 will be used. To suppress thi..

해당 글에서는 react-native 환경에서 ScrollView로 최상단, 최하단을 이동했을 때 이벤트를 발생시키는 동작 처리 방법에 대해 알아봅니다. 1) ScrollView의 최상단, 최하단으로 이동시 동작 처리 방법💡ScrollView의 최상단, 최하단으로 이동시 동작 처리 방법- Scroll로 이동을 하였을 때, 최상단일 때와 최하단일 때에 대해서 특정 이벤트를 발생시키는 동작 처리를 확인해 봅니다.  1. ScrollView💡ScrollView- React Native에서 제공하는 스크롤 가능한 컨테이너 컴포넌트입니다. 이 컴포넌트는 내부의 콘텐츠가 화면 크기를 초과할 때 유용하게 사용됩니다. 💡[참고] ScrollView 속성속성설명onScroll스크롤 이벤트가 발생할 때 호출되는 함수..

해당 글에서는 react-native 환경에서 TextInput으로 텍스트를 입력할 때 최초 키보드의 타입을 지정하는 방법에 대해 알아봅니다. 1) TextInput 입력 시 최초 키보드 타입 지정(대문자, 소문자) : autoCapitalize 💡TextInput 입력 시 최초 키보드 타입 지정(대문자, 소문자) : autoCapitalize- 사용자의 편의성을 위해서 대문자만을 입력을 받는 경우에 최초 키보드가 띄어질 때, 대문자 패드로 출력이 되면 편리하기에 이에 대한 적용을 수행합니다.- 이를 해결하기 위해 autoCapitalize 속성을 활용합니다. TextInput · React NativeA foundational component for inputting text into the app..

해당 글에서는 디바이스 별로 사용자 시스템에서 지정한 폰트 사이즈에 따라서 앱의 사이즈가 달라지기에 이에 따라서 앱 내에서 이를 고정하는 방법에 대해 알아봅니다. 1) 디바이스 별 사이즈 고정하기 : Text, TextInput💡디바이스 별 사이즈 고정하기 : Text, TextInput- 사용자 별로 디바이스에 대한 글자 크기를 지정할 수 있습니다. 그렇기에 각각 화면상에 보이는 글자 크기가 달라집니다.- 앱에서 변화된 크기에 따라 디자인이 적용되면 좋겠지만, 이에 대해 고정하여서 동일한 글자 크기에 대해서 디자인을 적용하기 위해서 ‘앱 내에서 이를 고정하는 방법’에 대해 알아봅니다.1. Android 글자 크기 확인 방법💡Android 글자 크기 확인 방법- 설정 > 디스플레이 > 글자 크기와 스..