해당 글에서는 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/Andr..
해당 글에서는 React-Native 환경에서 텍스트 입력 후 ‘확인’ 버튼을 눌러서 키보드 닫는 불편함을 피하기 위해 특정 영역을 선택하였을 때, 키보드를 닫는 방법에 대해 알아봅니다. 1) 특정 영역 선택시 키보드 닫기 : TouchableWithoutFeedback + Keyboard.dismiss 활용 💡특정 영역 선택시 키보드 닫기 : TouchableWithoutFeedback + Keyboard.dismiss 활용- 사용자의 편의성을 위해 키보드로 텍스트를 입력하는 도중에 ‘확인’ 버튼을 누르는 것이 아닌 작성이 완료되면, 특정 영역을 선택하면 키보드가 닫히는 액션을 구현하기 위해서 이를 활용합니다.- 이를 위해서 TouchableWithoutFeedback 태그내에 onPress 이벤트로..
문득 드는 짧은 생각들을 정리해 봅니다 벌써 시간이 2024년 마지막 분기의 시작인 9월이 되었습니다. 2024년도가 시작한 지 어제 같은데 아침, 저녁으로 시원한 공기가 부는 9월이 왔다니 '참 시간이 빠르다'라는 생각이 듭니다. 2024년도 연초에는 작년에 부족했던 것들을 생각하며 신년 계획을 세웠었고 올해는 이것들을 모두 이루어야겠다는 마음으로 2024년을 마주했던 기억이 납니다. 9월이 된 시점에, 이전에 계획했던 것들을 다시 읽어보면서 이루어진 것도 있지만, 아직 이루지 못한 것들도 많아서 아쉬움이 남는 때인 것 같습니다. 특히, '새롭게 무언가를 한다는 것'에서는 많은 것들을 이루지 못하여서 반성을 하게 되는 것 같습니다. 이러한 반성으로 '추진력'에 대해서 생각해 보게 되었습니다. 추진력이라..
해당 글에서는 PM2를 이해하고 특징에 대해서 상세히 알아봅니다. 💡 [참고] 아래의 Socket.io와 관련된 글들을 참고하시면 도움이 됩니다분류링크Socket.io 기반 소켓 서버 구축 방법 -1 : 구성 요소 및 흐름 + React 기반 채팅 화면 구성https://adjh54.tistory.com/548Socket.io 기반 소켓 서버 구축 방법 -2 : Room, Namespace 별 소켓 통신 방법https://adjh54.tistory.com/549Socket.io 기반 소켓 서버 구축 방법 -3: PM2 클러스터링 + Redis 기반 분산 처리https://adjh54.tistory.com/567 PM2(Process Manager 2) 이해하고 주요 특징 알아보기https://ad..
해당 글에서는 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 오류..
해당 글에서는 Socket.io 기반의 Node Server 내에서 Room, Namespace 별로 분리된 공간에서 소켓 통신을 수행하는 방법에 대해 알아봅니다. 💡 [참고] 아래의 Socket.io와 관련된 글들을 참고하시면 도움이 됩니다분류링크Socket.io 기반 소켓 서버 구축 방법 -1 : 구성 요소 및 흐름 + React 기반 채팅 화면 구성https://adjh54.tistory.com/548Socket.io 기반 소켓 서버 구축 방법 -2 : Room, Namespace 별 소켓 통신 방법https://adjh54.tistory.com/549Socket.io 기반 소켓 서버 구축 방법 -3: PM2 클러스터링 + Redis 기반 분산 처리https://adjh54.tistory.com/..
