React & React Native/라이브러리 활용

해당 글에서는 React Native 환경에서 Drawer Navigation 이해하고 활용하는 방법에 대해 알아봅니다 1) Drawer Navigation 💡Drawer Navigation- React Native 앱에서 슬라이드 메뉴(사이드바)를 구현하기 위한 내비게이션 컴포넌트입니다. - 주로 앱의 메인 메뉴나 섹션 간 이동을 위해 사용됩니다.기능설명슬라이드 메뉴화면 왼쪽 또는 오른쪽에서 스와이프하여 메뉴를 열 수 있습니다.커스터마이징메뉴의 스타일, 애니메이션, 동작 등을 사용자 정의할 수 있습니다.제스처 지원스와이프 제스처를 통한 자연스러운 상호작용이 가능합니다.중첩 네비게이션Stack, Tab 등 다른 네비게이션 타입과 함께 사용할 수 있습니다. Drawer Navigator | Re..

해당 글에서는 reactotron-react-native 라이브러리를 활용하여 모니터링을 하는 방법에 대해 알아봅니다.1) reactotron-react-native💡 reactotron-react-native- React Native 애플리케이션을 디버깅하고 모니터링하기 위한 강력한 개발 도구입니다. - 이 도구는 애플리케이션의 상태, API 요청, Redux 액션, 콘솔 로그 등을 실시간으로 추적하고 분석할 수 있게 해 줍니다. 1. 주요 기능주요 기능설명API 모니터링네트워크 요청과 응답을 실시간으로 추적하고 검사할 수 있습니다.Redux 통합Redux 스토어의 상태 변화와 디스패치된 액션을 모니터링할 수 있습니다.AsyncStorage 검사AsyncStorage의 데이터를 실시간으로 확인하고 수..

해당 글에서는 디바이스 네트워크 연결 상태 관리를 위해 @react-native-community/netinfo 라이브러리를 활용하여, 특정 페이지에서만 제외하는 방법에 대해 알아봅니다. 💡 [참고] 해당 글을 읽어보기 전에 이전에 작성한 글을 읽어보시면 도움이 됩니다. [RN] React Native 디바이스 네트워크 연결 상태 관리 이해하고 설정하기 : @react-native-community/netinfo해당 글에서는 디바이스의 네트워크 상태가 연결/미연결 인지 확인을 하기 위한 목적으로 @react-native-community/netinfo 라이브러리를 설정하고 사용하는 방법에 대해서 확인합니다.    1) @react-nativadjh54.tistory.com 1) 모든 페이지에서 네트워크..

해당 글에서는 React Native에서 expo-sqlite를 이용하는 활용 방법 및 데이터베이스 데이터를 GUI 툴을 이용하여 확인하는 방법에 대해 알아봅니다 💡 [참고] 이전에 작성한 글을 참고하시면 도움이 됩니다. [RN] React Native expo-sqlite 이해 및 설정 방법 -1 : 환경 설정 및 DB, 테이블 생성, 기본 트랜잭션해당 글은 Expo-cli 프로젝트(React-native) 내에 데이터베이스로 사용되는 Sqlite에 대한 이해를 하고 환경설정을 위한 연결하기 위한 expo-sqlite 라이브러리를 적용하는 가이드입니다. 💡 필자는 해당adjh54.tistory.com  1) expo-sqlite💡 expo-sqlite- 설치나 설정이 필요하지 않은 내장형 파일 기..

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

해당 글에서는 react-native 내에 활용하였던 라이브러리, 환경설정, 앱 배포와 관련하여서 중간정리를 하기 위한 목적으로 작성한 글입니다. 1) 라이브러리 총 정리💡 라이브러리 총 정리 - 지금까지 react-native 프로젝트를 수행하면서 사용하였던 라이브러리와 이와 관련되어 링크를 포함하여 정리하였습니다. - 라이브러리는 react-native 내부에서 제공해 주는 라이브러리, 써드파티 라이브러리를 이용한 외부 라이브러리, Expo Modules에서 사용하는 라이브러리들로 구성되어 있습니다.라이브러리 명사용처라이브러리 활용처링크AppState사용자의 앱 상태 확인에 사용- 사용자가 앱을 사용하고 있는 상태(active)이거나 앱을 벗어난 상태(background) 상태일때의 관리를 하여 각각..

해당 글에서는 버튼의 중복 호출을 막기 위해 lodash 라이브러리의 Debounce 모듈을 활용하는 방법에 대해 알아봅니다.1) 문제점 파악💡 문제점 파악- SetState()로 버튼을 누르면 즉각적으로 버튼에 대해 disabled = true 처리를 하면 해결이 되지만, 부모와 자식 구조간에 관계에서 빠르게 처리가 되지 않아서 중복으로 함수 처리가 되는 문제가 발생하였습니다.- 이에 따라서 버튼을 여러 번 빠르게 눌러도 한 번의 처리인 것과 같은 기능을 구현하고 싶어서 찾아보는 중 lodash 라이브러리의 Debounce 모듈을 알게 되어 이를 적용하였습니다.  2) lodash💡 lodash- JavaScript에서 사용할 수 있는 유틸리티 라이브러리입니다.- 배열, 객체, 함수, 언어 유틸, ..

해당 글에서는 react-native-version-check 라이브러리를 활용하여 App 버전과 Google PlayStore 내에 등록된 버전을 비교하여 앱 업데이트를 하는 방법에 대해 알아봅니다. 1) react-native-version-check 💡 react-native-version-check - React Native 앱의 버전을 확인하고 업데이트를 관리하는 데 도움이 되는 라이브러리입니다. - 이를 사용하면 현재 앱의 버전 정보를 불러오거나, 앱 스토어에 새로운 버전이 출시되었는지 확인하는 등의 기능을 사용할 수 있습니다. - 또한 사용자가 앱을 최신 상태로 유지하도록 권장하는 메시지를 보여주는 기능도 제공합니다. 이 라이브러리는 Android와 iOS 모두에서 사용할 수 있습니다. 1...

해당 글에서는 Notifee 라이브러리를 이용하여 예약 발송 방법에 대해 이를 활용하는 방법에 대해 알아봅니다. 💡 [참고] FCM 관련해서 구성 내용에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다. 분류 링크 FCM Spirng Boot API 구성 : 단순 전송 기능 https://adjh54.tistory.com/432 FCM React Native 초기 환경 설정 https://adjh54.tistory.com/431 FCM React Native Notifee 메시지 수신 구성 https://adjh54.tistory.com/4333 FCM React Natiive Notifee 메시지 전송 및 예약 발송 구성 https://adjh54.tistory.com/434 1) Notifee ..

해당 글에서는 실제 FCM을 이용하여 메시지를 전송하고 수신하는 방법에 대한 활용방법에 대해 알아봅니다.   💡 [참고] FCM 관련해서 구성 내용에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.분류링크FCM Spirng Boot API 구성 : 단순 전송 기능https://adjh54.tistory.com/432FCM React Native 초기 환경 설정https://adjh54.tistory.com/431FCM React Native Notifee 메시지 수신 구성https://adjh54.tistory.com/4333FCM React Natiive Notifee 메시지 전송 및 예약 발송 구성https://adjh54.tistory.com/434     1) 전체 환경 구성1. 공통 환..