React & React Native

해당 글에서는 react-native 환경에서 APK 파일을 구성하는 방법에 대해 공유합니다.1) APK, Keystore💡 APK- 안드로이드 운영 체제에서 사용되는 앱 패키지 파일을 의미합니다. 이 파일은 모바일 앱을 설치하는 데 사용되며 앱이 실행되는 데 필요한 모든 파일과 리소스를 포함합니다.💡 Keystore- Android 앱을 배포하기 위한 서명 파일을 의미합니다. Key Store를 사용하면 앱을 서명하여 앱이 정당한 출처임을 증명할 수 있습니다.- 앱을 업데이트하거나 새로운 앱을 배포할 때마다 같은 Key Store를 사용해야 합니다. 따라서 Key Store는 안전한 장소에 보관하고 관리해야 합니다.   2) 구성 과정1. keystore 생성합니다.💡 keytool은 Java D..

해당 글에서는 react-native에서 빌드 중 충돌이 발생한 경우 캐시를 초기화하거나 최신버전으로 설치하는 방법에 대해 공유합니다.  1) react-native-cli 💡 react-native-cli- React Native 애플리케이션을 더 쉽게 개발할 수 있도록 도와주는 명령 줄 인터페이스(CLI)입니다.  1. react-native-cli 최신버전 설치  @react-native-community/cliReact Native CLI. Latest version: 11.3.7, last published: a month ago. Start using @react-native-community/cli in your project by running `npm i @react-native-com..

해당 글에서는 React-native에서 라이브러리를 사용하지 않고 Toast Message를 구성하는 방법에 대해 공유합니다.1) Toast Message💡 Toast Message- React Native에서 Toast message는 사용자에게 간단한 정보를 제공하거나 경고를 줄 때 사용하는 간단한 팝업 메시지를 의미합니다.  1. ToastAndroid 모듈을 사용하는 방법 💡 React-native 내에 ‘ToastAndroid’를 이용하여 ToastMessage를 구현하는 방법이 있습니다. 모듈 이름과 같이 Andriod 플랫폼 내에서만 동작을 합니다. ToastAndroid · React NativeReact Native's ToastAndroid API exposes the Androi..

해당 글에서는 Tensorflow에서 TesorCamera로 출력된 값을 이미지로 출력하는 방법에 대해서 공유합니다. 1) 모델 불러오기 💡 React-native에서 Tensorflow의 backend를 지정하고 모델을 불러옵니다.1. useEffect 후 initStudyReady 함수를 호출합니다.2. initStudyReady() 함수에서는 Tensorflow.js를 로드합니다.import * as tf from "@tensorflow/tfjs";/** * 최초 Tensor를 사용하기 위한 모델을 불러옵니다. */useEffect(() => { initStudyReady()}, []);/*** 모델 로드** @return {Promise}*/const initStudyReady = asyn..

해당 글에서는 React-native에서 디자인을 적용하는 다양한 방법에 대해서 확인해 봅니다. 1) 디자인 적용 비교💡 React Native에서 스타일링을 위해 두 가지 방법을 제공합니다.💡 내부 스타일링(Inline Styling)- 컴포넌트에서 스타일을 지정하는 방법으로, 컴포넌트와 관련된 스타일을 정의하고 사용할 수 있습니다. 이 방법은 간단하고 직관적이지만, 반복적으로 사용되는 스타일을 관리하기 어려운 단점이 있습니다.💡 외부 스타일링(External Styling)- 스타일시트를 사용하여 스타일을 관리하는 방법으로, 스타일시트에서 스타일을 정의하고 컴포넌트에서 이를 참조하여 사용합니다. 이 방법은 스타일을 중앙 집중적으로 관리할 수 있어 유지보수성이 높으며, 재사용성이 높은 스타일을 만..

해당 글에서는 React-Native에서 .env를 이해하고 적용하는 방법에 대해서 공유합니다.1) react-native-dotenv💡 react-native-dotenv- React Native 애플리케이션에서 .env 파일을 활용할 수 있도록 도와주는 라이브러리입니다. 이를 통해, 애플리케이션에서 사용되는 환경 변수들을 관리할 수 있습니다. react-native-dotenvLoad environment variables using import statements.. Latest version: 3.4.11, last published: 5 months ago. Start using react-native-dotenv in your project by running `npm i react-nati..

해당 글에서는 react-native 기반의 스탑워치 기능으로 시간-분-초(HH:mm:ss), 분-초-밀리세컨드(mm:ss:SSS) 형태의 기능 구성에 대해서 공유합니다.  1) 스탑워치 기능 : 시간-분-초(HH:mm:ss)💡 해당 화면에서는 스탑워치 기능으로 시간-분-초(HH:mm:ss) 형태로 출력을 합니다- handleStartStop()는 스탑워치의 시작/종료의 기능을 수행하는 함수입니다.- handleReset()는 스탑워치 시간을 리셋하는 기능을 수행하는 함수입니다.- formatTime()는 state에 갱신된 시간에 따라 데이터를 시간-분-초(HH:mm:ss) 형태로 변환해 주는 함수입니다.  1. 구성 코드 💡 ‘Start’ 버튼 : handleStartStop()- isActive..

해당 글에서는 Stack Navigator와 Bottom Tab Navigator를 함께 사용하는 Nesting Navigators를 구성하는 방법에 대해서 공유합니다. 1) Stack Navigator💡 Stack Navigator- ‘스택 형태’로 화면 위에 새로운 화면을 쌓아서 탐색을 하는 내비게이션 컴포넌트를 의미합니다.- 스택 형태로 쌓아두기에 이전 화면으로 되돌아갈 수 있으며 탐색 히스토리를 유지하는 특징을 가지고 있습니다. 그렇기에 주로 탐색이 많은 애플리케이션에 적합합니다. - 예를 들어, A 화면에서 버튼을 누르면 B 화면으로 이동하고, B 화면에서 다시 버튼을 누르면 A 화면으로 돌아오는 경우에 사용할 수 있습니다. 기본적으로 스택 내비게이터는 iOS에서는 새 화면으로 이동 시 오른쪽..

해당 글에서는 React-native에서 Andriod 디바이스로 테스트를 하는 경우 빌드 속도를 올리는 방법에 대해서 공유합니다. 1) gradle.properties 파일 설정 1. Gradle 캐시 속성 설정하기💡 Gradle에서는 빌드 과정에서 많은 파일들을 생성하고 관리를 합니다.💡 '캐시'를 통하여 이전에 빌드된 캐시를 사용하여 빌드시간을 단축시켜 빌드를 빠르게 수행할 수 있습니다.org.gradle.caching=true   2. Daemon 모드 사용하기💡 Daemon 모드란?- 빌드에 사용되는 JVM을 한번 시작하고 빌드가 완료될 때까지 계속해서 사용합니다.- 이전 빌드에서 생성된 캐시를 사용하여 최대한 많은 작업을 건너뛰고 빌드를 빠르게 수행할 수 있습니다.- 캐시가 없는 경우 데..

해당 글에서는 React-native에서 Logbox 경고창이 발생하는 경우 상태에 따라서 발생하지 않도록 하는 방법에 대해서 공유합니다.1) Logbox💡 Logbox란?- React Native 애플리케이션에서 생성된 '로그 메시지(경고, 에러)를 보고 관리'할 수 있는 사용자 정의 가능한 인터페이스를 제공하는 컴포넌트입니다- LogBox는 앱의 디버깅 및 문제 식별에 유용합니다.React Native 0.62 이후 버전에서 기본적으로 활성화되어 있습니다. 이전 버전을 사용하는 경우 LogBox를 수동으로 활성화해야 합니다.  Announcing React Native 0.63 with LogBox · React NativeToday we’re releasing React Native 0.63 th..