해당 글에서는 Math.random() 함수를 사용하였을 때 Weak Cryptography 보안 취약점 문제가 발생함에 따라 이를 해결하는 방법에 대해 확인해 봅니다. 1) 문제점 💡 문제점 - SonarQube로 React-native를 수행하였을 때 Security Hotspots로 Math.random() 함수에서 아래와 같은 문제점이 발생하였습니다. - 여기에서 이 의사 난수 생성기를 사용하는 것이 안전한지 확인하세요.(Make sure that using this pseudorandom number generator is safe here.) - 해당 문제는 ‘난수 생성‘에 대해 보안에 민감하다는 문제점이 발생합니다. 이는 Math.random() 역시 난수를 생성하는 데 있어서 보안적으로 취..
해당 글에서는 react-native에서 statusBar에 대해 이해하고 활용하는 방법에 대해 알아봅니다. 1) StatusBar 💡 StatusBar - 모바일 애플리케이션의 상태 표시줄을 제어하는 데 사용됩니다. - StatusBar 컴포넌트를 사용하여 상태 표시줄의 스타일, 배경색, 텍스트 색상 등을 설정할 수 있습니다. 1. 주요 속성 💡 StatusBar에서 사용되는 주요한 속성입니다. 속성 플랫폼 타입 설명 animated 공통 boolean - 상태 표시줄의 애니메이션 여부를 제어합니다. barStyle 공통 StatusBarStyle - 상태 표시줄의 텍스트 색상을 설정합니다. - Andriod 23이상 버전에서 이용이 가능합니다. hidden 공통 boolean - 상태 표시줄을 숨깁니..
해당 글에서는 React-native에서 디자인을 적용하는 다양한 방법에 대해서 확인해 봅니다. 1) 디자인 적용 비교💡 React Native에서 스타일링을 위해 두 가지 방법을 제공합니다. 💡 내부 스타일링(Inline Styling) - 컴포넌트에서 스타일을 지정하는 방법으로, 컴포넌트와 관련된 스타일을 정의하고 사용할 수 있습니다. 이 방법은 간단하고 직관적이지만, 반복적으로 사용되는 스타일을 관리하기 어려운 단점이 있습니다. 💡 외부 스타일링(External Styling) - 스타일시트를 사용하여 스타일을 관리하는 방법으로, 스타일시트에서 스타일을 정의하고 컴포넌트에서 이를 참조하여 사용합니다. 이 방법은 스타일을 중앙 집중적으로 관리할 수 있어 유지보수성이 높으며, 재사용성이 높은 스타일을 ..
해당 글에서는 React-Native에서 .env를 이해하고 적용하는 방법에 대해서 공유합니다. 1) react-native-dotenv 💡 react-native-dotenv - React Native 애플리케이션에서 .env 파일을 활용할 수 있도록 도와주는 라이브러리입니다. 이를 통해, 애플리케이션에서 사용되는 환경 변수들을 관리할 수 있습니다. 2) 설정하기 1. 라이브러리 설치합니다. 💡 react-native-dotenv을 기본적으로 설정하며 TypeScript를 함께 사용하는 경우 @types/react-native-dotenv를 함께 설치합니다. # npm $ npm i react-native-dotenv # yarn $ yarn add react-native-dotenv # typescr..
해당 글에서는 Stack Navigator와 Bottom Tab Navigator를 함께 사용하는 Nesting Navigators를 구성하는 방법에 대해서 공유합니다. 1) Stack Navigator 💡 Stack Navigator 란? - ‘스택 형태’로 화면 위에 새로운 화면을 쌓아서 탐색을 하는 내비게이션 컴포넌트를 의미합니다. - 스택 형태로 쌓아두기에 이전 화면으로 되돌아갈 수 있으며 탐색 히스토리를 유지하는 특징을 가지고 있습니다. 그렇기에 주로 탐색이 많은 애플리케이션에 적합합니다. - 예를 들어, A 화면에서 버튼을 누르면 B 화면으로 이동하고, B 화면에서 다시 버튼을 누르면 A 화면으로 돌아오는 경우에 사용할 수 있습니다. 기본적으로 스택 내비게이터는 iOS에서는 새 화면으로 이동 ..
해당 글에서는 React-native에서 Logbox 경고창이 발생하는 경우 상태에 따라서 발생하지 않도록 하는 방법에 대해서 공유합니다. 1) Logbox 💡 Logbox란? - React Native 애플리케이션에서 생성된 '로그 메시지(경고, 에러)를 보고 관리'할 수 있는 사용자 정의 가능한 인터페이스를 제공하는 컴포넌트입니다 - LogBox는 앱의 디버깅 및 문제 식별에 유용합니다.React Native 0.62 이후 버전에서 기본적으로 활성화되어 있습니다. 이전 버전을 사용하는 경우 LogBox를 수동으로 활성화해야 합니다. Announcing React Native 0.63 with LogBox · React Native Today we’re releasing React Native 0.63..
해당 글에서는 디바이스의 네트워크 상태가 연결/미연결 인지 확인을 하기 위한 목적으로 @react-native-community/netinfo 라이브러리를 설정하고 사용하는 방법에 대해서 확인합니다. 1) @react-native-community/netinfo 💡 @react-native-community/netinfo 란? - React Native 앱에서 '현재 네트워크 연결 상태'를 '모니터링하고 관리'하기 위한 라이브러리입니다. - 해당 라이브러리는 Android, IOS 플랫폼에서 모두 사용이 가능합니다. GitHub - react-native-netinfo/react-native-netinfo: React Native Network Info API for Android & iOS React ..
해당 글에서는 React-native 개발 환경에서 상태관리를 위해 RTK(Redux ToolKit)에 대해 이해하고 환경설정 하는 방법에 대해서 공유합니다. 1) Redux ToolKit(RTK) 💡 Redux ToolKit 이란? - 리덕스(Redux) 상태관리 라이브러리를 사용하는 개발자들이 사용하기 쉽고 효율적으로 코드를 작성할 수 있도록 돕는 패키지를 의미합니다 [ 더 알아보기 ] 💡Redux 란? - React.js 애플리케이션에서 사용되는 상태 관리 라이브러리입니다. Redux는 애플리케이션에서 발생하는 모든 데이터를 중앙에 저장하고 관리합니다. 이를 통해 애플리케이션의 상태를 예측 가능하고 디버깅이 용이하게 만들어줍니다. 1. Redux와 Redux Toolkit의 차이 💡 공식 사이트 내..
해당 글에서는 앱의 접근 권한을 관리하는 라이브러리인 react-native-permissions에 대해 이해를 돕기 위해 작성한 글입니다. 1) react-native-permissions 💡 react-native-permissions 란? - React Native 앱에서 권한을 요청하고 처리하는 라이브러리입니다. - 사용자가 앱에서 필요로 하는 권한을 요청하면 이 라이브러리는 사용자에게 해당 권한을 요청하는 대화상자를 보여줍니다. 사용자가 권한을 허용하면 라이브러리는 이를 처리하고, 거부하면 사용자에게 알림을 표시합니다. - 이 라이브러리는 iOS와 Android 플랫폼 모두에서 작동합니다. iOS에서는 사용자가 권한을 승인할 때마다 대화 상자가 표시됩니다. Android에서는 일부 권한은 앱 설..
해당 글에서는 React Native 기반의 ONNX에 대해서 이해하고 사용 방법에 대해서 확인합니다. 1) ONNX(Open Neural Network Exchange) 💡 ONNX(Open Neural Network Exchange) 란? - 딥러닝 모델을 서로 다른 프레임워크 간에 서로 옮길 수 있도록 하는 오픈 소스 프로젝트입니다. ONNX는 모델을 중간 계층 형식으로 변환하고 모델을 실행하는 데 필요한 라이브러리를 제공합니다. - 간략히 말해, 다양한 플랫폼 환경(Java, JS, C, C#, C++)에서 환경에 제약 없이 구현된 ‘ML 모델’을 호출하고 수행하여 수행 결과값을 반환받는 것을 의미합니다. 💡 ONNX Runtime 이란? - ONNX 모델을 실행하기 위한 엔진입니다. ONNX 모..
