해당 글에서는 React에서 forwardRef, useImperativeHandle를 이해하고 활용하는 방법에 대해 알아봅니다.1) forwardRef💡forwardRef- React에서 제공하는 고차 컴포넌트(Higher-Order Component)로 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달할 수 있게 해줍니다.- 이는 주로 재사용 가능한 컴포넌트 라이브러리를 만들 때 유용하며, 특히 DOM 요소나 클래스 컴포넌트의 인스턴스에 직접 접근해야 할 때 사용됩니다. forwardRef – ReactThe library for web and native user interfacesko.react.dev [ 더 알아보기 ]💡 forwardRef 선언하는 곳은 부모 컴포넌트인가? 아니면 자식 컴포넌..

해당 글에서는 WebSocket 서버와의 연결을 통해서 STOMP Client를 이용하여 실시간 웹 소켓 통신을 구현하는 방법에 대해 알아봅니다  💡 [참고] STOMP을 이용한 웹 소켓 및 Socket.io를 이용한 소켓 연결에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.분류상세 분류주제링크STOMPServerSpring Boot WebSocket + Stomp 이해하고 구성하기 -1: 초기 구성 및 간단 소켓 연결https://adjh54.tistory.com/573STOMPServerGithub : Spring Boot WebSocket + STOMP 소스코드https://github.com/adjh54ir/blog-codes/tree/main/spring-boot-websocketST..

해당 글에서는 버튼의 중복 호출을 막기 위해 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 [RN]..

해당 글에서는 빠르게 구성할 수 있는 CRA를 이용하고 Typescript 템플릿을 이용하여 React 프로젝트를 간단하게 구현하는 방법에 대해 알아봅니다.  1) 프로젝트 환경💡 프로젝트 개발환경- 프로젝트에서 사용된 환경과 버전입니다.환경버전Node18.17.1yarn1.22.19IDEVisual Studio Codereact18.2.0typescript4.9.5react-router6.21.2react-router-dom6.21.2  2) 프로젝트 환경 구성 1. CRA + Typescript 프로젝트 구성# format$ npx create-react-app --template typescript# 프로젝트 구성 예제$ npx create-react-app multi-flex-lunch --t..

해당 글에서는 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 FAILEDFAILURE: 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 --stack..

해당 글에서는 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..

해당 글에서는 react-native 환경에서 로컬 환경에서 디바이스를 실행할때 발생하였던 오류에 대해 알아봅니다. 1) 문제점💡 Execution failed for task ':app:createBundleDevDebugJsAndAssets'. 문제가 발생하였습니다.- 해당 오류는 개발 또는 디버그 빌드 과정에서 발생합니다. 이 오류는 앱의 JavaScript와 assets 번들을 생성하는 과정에서 문제가 있다는 것을 나타냅니다FAILURE: Build failed with an exception.* What went wrong:Execution failedfor task :app: createBundleDevDebugJsAndAssets'.> Process 'command 'node'' finis..