해당 글에서는 채널톡을 연결하고 채팅 기능을 활용하는 방법에 대해서 작성한 글입니다 1) 채널톡💡 채널톡- 올인원 AI 비즈니스 메신저로, 채팅 상담과 팀 메신저, 마케팅 메시지, 인터넷 전화(미트), 시나리오형 챗봇(서포트봇), AI 에이전트(ALF) 등의 기능을 제공합니다.- 주로 고객과 채팅 상담을 이용하고 관리하기 위한 용도로 이용을 합니다. 고객상담의 미래는 AI 입니다 - 채널톡올인원 AI 메신저 채널톡과 함께 준비하세요.channel.io 2) 채널톡 연결 -1 : 키 조회1. 공식사이트에 접근 및 채널 목록으로 가기 버튼을 누릅니다 2. 아래와 같이 출력이 됩니다 3. 일반 설정 > 버튼 설치 및 설정 > 채널톡 버튼 설치를 누릅니다. 4. Plugin Key를 확인합니다..

해당 글에서는 React Native 환경에서 iOS 플랫폼에서 react-native-google-mobile-ads 라이브러리를 설치하고 빌드를 하는 중에 발생하는 오류에 대한 해결방법에 대해 알아봅니다. 1) 문제점💡 문제점- react-native-google-mobile-ads 라이브러리를 iOS 플랫폼에서 설치하고 Xcode로 빌드를 하였을 때 아래와 같은 오류가 발생하였습니다.- 안드로이드 내에서는 실행이 잘되지만 iOS내에서만 발생하는 오류로 파악이 되었습니다. ld: warning: ignoring duplicate libraries: '-lc++' ld: warning: Could not find or use auto-linked library 'swift_Builtin_f..

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