react native

해당 글에서는 React-native 환경에서 Text 글이 넘어감에 따라서 ... 처리를 하기 위한 방법에 대해 알아봅니다. 1) Text 태그 줄 넘김에 대해 … 처리 방법 : numberOfLines + ellipsizeMode💡Text 태그 줄 넘김에 대해 … 처리 방법 : ellipsizeMode- 텍스트의 길이가 일정 숫자를 넘어가게 되면 잘리는 현상이 발생합니다. 이에 대해서 긴 문자에 대해, ‘…’으로 잘린 부분에 대해 대체하기 위해 사용이 됩니다.- 이를 해결하기 위해 Text 속성 중 numberOfLines + ellipsizeMode 속성을 이용합니다. 1. Text 태그 속성💡Text 태그 속성- Text 태그의 속성들로 여러 가지 들이 있지만 주요한 태그들에 대해서만 알아봅니..

해당 글에서는 react-native 환경에서 Android / iOS 환경에서 가로 모드를 지원하지 않는 경우 이를 막는 설정 방법에 대해 알아봅니다. 1) 디바이스 가로모드 막는 설정 방법💡디바이스 가로모드 막는 설정 방법  💡디바이스 가로모드로 적용하였을 때 장점장점설명사용자 경험 일관성모든 화면이 일관된 방향으로 표시되어 사용자 경험이 향상됩니다.레이아웃 단순화개발자 입장에서는 가로 모드 레이아웃을 별도로 설계할 필요가 없어 개발 과정이 간소화됩니다.리소스 최적화세로 모드만 지원하므로 메모리 및 처리 리소스를 더 효율적으로 사용할 수 있습니다. 1. 안드로이드 방향 설정: android/src/main/AndroidManifest.xml💡안드로이드 : android/src/main/Andr..

해당 글에서는 React-Native 환경에서 텍스트 입력 후 ‘확인’ 버튼을 눌러서 키보드 닫는 불편함을 피하기 위해 특정 영역을 선택하였을 때, 키보드를 닫는 방법에 대해 알아봅니다. 1) 특정 영역 선택시 키보드 닫기 : TouchableWithoutFeedback + Keyboard.dismiss 활용 💡특정 영역 선택시 키보드 닫기 : TouchableWithoutFeedback + Keyboard.dismiss 활용- 사용자의 편의성을 위해 키보드로 텍스트를 입력하는 도중에 ‘확인’ 버튼을 누르는 것이 아닌 작성이 완료되면, 특정 영역을 선택하면 키보드가 닫히는 액션을 구현하기 위해서 이를 활용합니다.- 이를 위해서 TouchableWithoutFeedback 태그내에 onPress 이벤트로..

해당 글에서는 React Native 환경에서 iOS 플랫폼을 App Store에 올리는 방법 중 하나로 앱을 Archive 하고 TestFlight를 구성하는 방법에 대해 알아봅니다.  💡 [참고] Android / iOS에 각각 앱을 배포하는 과정에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.플랫폼분류링크AndroidReact Native Google Play Store 등록 방법 -1 : 초기 환경 설정https://adjh54.tistory.com/301AndroidReact Native Google Play Store 등록 방법 -2 : Google Play Console 설정https://adjh54.tistory.com/306AndroidReact Native Google Pla..

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

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

해당 글에서는 bundle을 이용하여서 apk를 생성하는 과정 중에 발생하는 오류에 대해서 해결하는 방법에 대해 알아봅니다.  1) 문제점 💡 Task : app:mergeDevDebugResource Resource and asset merger: Duplicate resources- bundle 파일을 생성하고 apk 파일을 생성하는 도중에 아래와 같은 오류가 발생하였습니다.     2) 해결방법💡/Users/lee/Desktop/workspace/tugboat/xxxx/android/app/build/generated/res/createBundleDevDebugJsAndAssets/drawable-xhdpi/node_modules_reactnavigation_elements_src_assets..

해당 글에서는 react-native 환경에서 로컬 환경에서 디바이스를 실행할때 발생하였던 오류에 대해 알아봅니다. 1) 문제점💡 Execution failed for task ':app:createBundleDevDebugJsAndAssets'. 문제가 발생하였습니다.- 해당 오류는 개발 또는 디버그 빌드 과정에서 발생합니다. 이 오류는 앱의 JavaScript와 assets 번들을 생성하는 과정에서 문제가 있다는 것을 나타냅니다FAILURE: Build failed with an exception.* What went wrong:Execution failedfor task :app: createBundleDevDebugJsAndAssets'.> Process 'command 'node'' finis..