해당 글에서는 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 환경에서 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 글자 크기 확인 방법- 설정 > 디스플레이 > 글자 크기와 스..

해당 글에서는 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 이벤트로..