해당 글에서는 react-native 환경에서 Modal 팝업에서 팝업 외에 화면을 반투명 처리를 하여 뒤에 화면이 보이도록 하는 방법에 대해 알아봅니다. 1) Modal 태그 뒷 배경 불투명 처리 방법💡Modal 태그 뒷 배경 투명 처리 방법- Modal 팝업이 띄어지고 화면상에 출력이 될 때, 뒤에 배경을 반투명 처리를 하여서 팝업임을 나타내기 위해서 사용이 되는 방법입니다. Modal · React NativeThe Modal component is a basic way to present content above an enclosing view.reactnative.dev 1. centeredView 스타일 적용💡centeredView 스타일 적용- Modal 컴포넌트에서 사용되는 스타일 객체..

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

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

해당 글에서는 React-native 환경에서 빌드 시 발생하는 오류에 대해 알아봅니다. 1) 문제점 💡 문제점- Cannot locate tasks that match 'app:installDebug' as task 'installDebug' is ambiguous in project ':app'. Candidates are: 'installDevDebug', 'installDevDebugAndroidTest', 'installPrdDebug', 'installPrdDebugAndroidTest'. - 이와 같은 오류가 발생하였습니다. 해당 문제는 fiebase 설정 중 google-services.json 파일을 개발 환경과 운영 환경을 각각 분리할 때에 적용하는 flavorDimensions 오류..

해당 글에서는 react-native에서 발생하는 오류에 대해 해결방법을 알아봅니다. 1) 문제점💡 문제점- Could not determine the dependencies of null. > SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.dir path in your project's local properties file at xx- 해당 문제점은 react-native 프로젝트를 구성하고 안드로이드를 빌드하는 도중에 문제가 발생하였습니다.    2) 해결방법 1. Android SDK 설치 확인💡 Android SDK 설치 확인- SD..

해당 글에서는 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 개발/운영 ..

해당 글에서는 버튼의 중복 호출을 막기 위해 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]..