해당 글에서는 버튼의 중복 호출을 막기 위해 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 ..
해당 글에서는 빠르게 구성할 수 있는 CRA를 이용하고 Typescript 템플릿을 이용하여 React 프로젝트를 간단하게 구현하는 방법에 대해 알아봅니다. 1) 프로젝트 환경 💡 프로젝트 개발환경 - 프로젝트에서 사용된 환경과 버전입니다. 환경 버전 Node 18.17.1 yarn 1.22.19 IDE Visual Studio Code react 18.2.0 typescript 4.9.5 react-router 6.21.2 react-router-dom 6.21.2 2) 프로젝트 환경 구성 1. CRA + Typescript 프로젝트 구성 # format $ npx create-react-app --template typescript # 프로젝트 구성 예제 $ npx create-react-app mu..
해당 글에서는 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() 역시 난수를 생성하는 데 있어서 보안적으로 취..
해당 글에서는 expo-sensor를 이용하여서 실제 디바이스가 움직이는 모션을 이용하는 방법에 대해 알아봅니다. 💡 [참고] 이전에 작성한 글을 기반으로 좀 더 보기 편하게 재구성하였습니다. [RN] 자이로센서를 활용한 자이로스코프, 디바이스 모션 이해하기: expo-sensors 해당 글에서는 디바이스에 탑재되어 있는 자이로 센서를 이용하는 expo-sensors 라이브러리를 활용하여 자이로스코프(Gyroscope)와 디바이스 모션(DeviceMotion)을 이해하고 값을 추출하는 방법을 이해하 adjh54.tistory.com 1) expo-sensors 💡 expo-sensors - Expo SDK에서 제공하는 센서 관련 기능을 사용하기 위한 라이브러리입니다. 이 라이브러리를 사용하면 Expo 앱..
해당 글에서는 프로젝트의 파일을 .aab로 빌드하는 도중에 발생하는 오류에 대해 해결방법에 대해 알아봅니다. 1) 문제점💡 ./gradlew bundleRelease 명령어를 통해서 .aab 확장자를 생성하는 도중에 발생하는 오류였습니다.> Task :app:createBundleDevReleaseJsAndAssets FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:createBundleDevReleaseJsAndAssets'. > Process 'command 'node'' finished with non-zero exit value 1 * Try: > Run with --s..
해당 글에서는 bundle을 이용하여서 apk를 생성하는 과정 중에 발생하는 오류에 대해서 해결하는 방법에 대해 알아봅니다. 1) 문제점 💡 Task : app:mergeDevDebugResource Resource and asset merger: Duplicate resources - bundle 파일을 생성하고 apk 파일을 생성하는 도중에 아래와 같은 오류가 발생하였습니다. 2) 해결방법 💡/Users/lee/Desktop/workspace/tugboat/xxxx/android/app/build/generated/res/createBundleDevDebugJsAndAssets/drawable-xhdpi/node_modules_reactnavigation_elements_src_assets_back..
해당 글에서는 react-native 환경에서 로컬 환경에서 디바이스를 실행할때 발생하였던 오류에 대해 알아봅니다. 1) 문제점 💡 Execution failed for task ':app:createBundleDevDebugJsAndAssets'. 문제가 발생하였습니다. - 해당 오류는 개발 또는 디버그 빌드 과정에서 발생합니다. 이 오류는 앱의 JavaScript와 assets 번들을 생성하는 과정에서 문제가 있다는 것을 나타냅니다 FAILURE: Build failed with an exception. * What went wrong: Execution failed for task :app: createBundleDevDebugJsAndAssets'. > Process 'command 'node''..
해당 글에서는 react-native에서 statusBar에 대해 이해하고 활용하는 방법에 대해 알아봅니다. 1) StatusBar 💡 StatusBar - 모바일 애플리케이션의 상태 표시줄을 제어하는 데 사용됩니다. - StatusBar 컴포넌트를 사용하여 상태 표시줄의 스타일, 배경색, 텍스트 색상 등을 설정할 수 있습니다. 1. 주요 속성 💡 StatusBar에서 사용되는 주요한 속성입니다. 속성 플랫폼 타입 설명 animated 공통 boolean - 상태 표시줄의 애니메이션 여부를 제어합니다. barStyle 공통 StatusBarStyle - 상태 표시줄의 텍스트 색상을 설정합니다. - Andriod 23이상 버전에서 이용이 가능합니다. hidden 공통 boolean - 상태 표시줄을 숨깁니..
해당 과정은 앱을 Google Play Store에 출시하기 이전에 Google Play Console에서 처리해야 하는 작업 이전사전에 준비하는 작업에 대해 알아봅니다. 1) 준비 과정 💡 해당 부분에서는 분류 중 '초기 환경설정' 부분에 대해서 구성하였습니다. 분류 과정 설명 초기 환경설정 빌드 파일 최적화 - 안드로이드 앱의 빌드 과정에서 사용되지 않는 리소스를 제거하고 앱의 크기를 줄이는 과정을 수행합니다. 초기 환경설정 빌드 버전 설정 - 빌드 버전 설정은 안드로이드 앱의 버전을 관리하는 과정입니다. 이를 통해 앱의 업데이트와 호환성을 관리할 수 있습니다. 초기 환경설정 배포용 Keystore 발급 - 암호화된 개인 키를 안전하게 저장하고 관리하기 위해 발급됩니다. 이 개인 키는 암호화된 데이터..
