HA젠옹의 프리랜서의 일상

앱이 업데이트 될 때마다 사용자들에게 최신 버전으로 사용하게 만들기 위해 어떠한 방법이 있을까? 라는걸 찾다가 발견한 라이브러리를 소개할려고 합니다. 해당 라이브러리는 react-native-version-check 라이브러리로 현재 사용 중인 앱 버전과 스토어에 업로드 된 버전을 비교하여 다를 경우 스토어로 이동시켜 업데이트를 할 수 있게 도와주는 라이브러리입니다.이번 글에서는 해당 라이브러리가 어떠한 기능이 있으며, 해당 라이브러리를 사용하여 만들 수 있는 간단한 예제 화면을 보여드릴 겁니다.1. 라이브러리 소개react-native-version-check는 React Native 앱의 버전을 확인하고, 업데이트 여부를 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 주요 기능에 대해 다음과 같습..

react-native-multiple-image-picker를 사용하게 될 경우 해당 에러를 볼 수 있을 겁니다.많은 사람들은 0.73 version에서 본다고 하지만, 그보다 아래버전인 0.72 버전에서도 발생되었으며, 자료를 찾아 적용해보니 다행이도eact-native-multiple-image-picker를 사용하게 될 경우 해당 에러를 볼 수 있을 겁니다. 많은 사람들은 0.73 version에서 본다고 하지만, 그보다 아래버전인 0.72 버전에서도 발생되었으며, 자료를 찾아 적용해보니 다행히도 0.72에서도 문제가 해결이 되었습니다.  원인우선 해당 이슈가 발생한 원인을 알아봅시다.react-native-multiple-image-picker 라이브러리와 react-native version의..

이번에 옛버전 프로젝트를 작업 하다 처음 접해보이는 오류를 접하게 되었습니다.[!] Invalid boost.podspec file: undefined local variable or method min_supported_versions' for module Pod. 해당 이슈는 react native 0.72.6 버전으로 진행을 하게 되었으며 알아보니 version이 낮아 생긴 이슈라는 정보를 알게 되었습니다. 지금부터 해당 이슈를 해결하기 위해 시도 했던 방법들에 대해 이야기를 해볼려고 합니다. 우선, 처음에 언급한 것 처럼 버전 이슈로 발생하는 경우가 많으며, react native 버전과 CocoaPods 버전이 호환이 되지 않으면 해당 현상이 일어난다고 합니다.1. 문제 발생 원인Xcode에서 ..

서론React Native로 개발을 진행하게 되면 꼭 사용하게 되는 내용들이 존재합니다. 그 중에서도 Hook 종류들인데요.저 또한 해당 Hook을 이용하여 개발을 진행하지만 제일 많이 사용하던 Hook 3가지(useState,useEffect,useRef) 외 추가적으로 몇가지가 더 있다는걸 알게 되어 이렇게 글을 쓰게 되었습니다. 해당 내용은 간략하게 해당 Hook이 무엇이며 어떤식으로 사용가능한지 예시로 작성한 코드들이며 만약 사용을 하게 된다면 해당 내용을 참고하여 응용해서 사용해주시길 바라겠습니다.  1. useStateuseState는 함수형 컴포넌트에서 상태를 관리하는 데 사용되는 훅입니다.클래스형 컴포넌트에서의 this.state와 같은 역할을 하며, 컴포넌트 내부의 상태를 저장하고 업데이..

서론React Native에서 WebView를 사용하여 신원 인증 시스템을 모바일 앱에 통합할 때 개발자는 특히 테스트 단계에서 문제에 직면할 수 있습니다. 많은 개발자가 웹에서는 제대로 작동하지만 앱에서는 인증 화면을 올바르게 표시하는 데 문제가 발생할 수 있습니다. 혹시나 개발 중에 동일한 문제에 직면한 다른 사람들에게도 도움이 될 수 있으면 하여 해당 글을 남깁니다.상황하나의 의뢰가 들어왔습니다. 영카트 기반으로 쇼핑몰을 만들었으며 해당 사이트를 앱 패키징을 해달라는 의뢰입니다.언제나 동일하게 작업을 진행하는 과정에서 처음으로 WebView로 연동된 본인인증을 클릭하였을 때 하얀 백지 화면만 출력이 되는 현상이 발견되었습니다. 분명 웹에서는 문제 없이 작동이 되는 것을 확인이 되었지만 어째서인지 앱..

서론 이미 해당 관련 내용에 대해 React 에서 다뤄보았지만, React와 ReactNative는 같은 Node 기반으로 서버에 HTTP를 요청하는 방식 또한 크게 다른 부분이 없습니다. 다만, 사용 방법에 대해 조금 차이가 존재하여 다시 한번 다뤄보게 되었기에 간단하게 사용 예시 관련하여 보여줄 것이며, 해당 내용에 대해서는 이전에 작성하였던 글을 참고해주시면 감사하겠습니다. React Native에서 Axios를 사용하는 것은 Axios가 의존하는 XMLHttpRequest API를 포함하여 많은 브라우저 API를 폴리필하는 React Native의 기능 덕분에 브라우저 환경이나 Node.js에서 사용하는 것과 대체로 유사합니다. 구문 및 API 메서드(예: get, post, put, delete..

ReactNative에 대한 캘린더 관련 라이브러리들은 다양하게 존재합니다. 하지만 일반적인 캘린더 형식으로 버튼 클릭시 이전달과 다음달을 표기 되는 캘린더들이 아닌 이번에는 가져온 라이브러리는 슬라이드 형식으로 구성된 라이브러리를 가져왔습니다. 그렇다면?? 해당 캘린더를 이용하여 무엇을 할 수 있으며, 기존 캘린더들과 다른 점과 좋은점에 대해 이야기를 해보겠습니다. 주요 특징들 날짜 선택: 단일, 다중 및 범위 날짜 선택을 지원합니다. 사용자 지정: 앱 디자인에 맞게 색상, 텍스트, 스타일에 대한 광범위한 사용자 지정 옵션을 제공합니다. locale 지원: 로케일 지원이 내장되어 있어 다양한 언어와 지역에 쉽게 적응할 수 있습니다. 경량: 가볍고 효율적으로 설계되어 여러 장치에서 원활한 성능을 보장합니..

IOS Xcode 15.3 버전 현재 해당 문제로 인하여 IOS 실행이 안되시는 분들을 위해 해결방안에 관련하여 전달해보고자 합니다. 갑자기 해당 이슈로 앱이 실행이 되지 않아 무엇이 문제일까? 알아보니 Xcode 15.3 버전으로 업데이트가 되며 실행 문제가 발생하였습니다. 허나 수많은 작업자들로 인하여 해당 이슈 관련하여 1시간전에 올라온 해결방안을 알리고자 작성합니다. 해결 방식은 Xcode로 해당 프로젝트를 실행 후 Pods 파일을 여신 뒤 Pods/FlipperTransportTypes.h에 9번째줄 #include 를 추가 시키면 됩니다. 자세한 내용은 해당 링크를 참고해주세요. upgrade xcode 15.3 run error · Issue #43335 · facebook/react-nat..

이전 글에서 React Native Calendars 라이브러리를 활용한 캘린더를 구현하는 글을 작성하였습니다. 이번에는 제가 직접 순수 React Native 코드로 활용하여 캘린더 구현 방법에 대해 작성할려고 합니다. 이렇게 한번 작성하는 이유는 이전글을 보고 오신 분들을 아시겠지만, 우선적으로 커스텀에 대한 불편함과 공휴일을 표기하기 위해 결국 해당 라이브러리 또한 직접 코드를 작성해야한다는 점 때문에 문득 생각이 들었습니다. 그렇다면? 결국 해당 라이브러리 분석할 시간에 차라리 직접 만들어서 사용하는게 더 효율이 있지 않을까? 그래서 이번 글에서는 React Native를 사용하여 캘린더를 직접 구현하는 방법에 대해 설명해볼려고 합니다. 초기 상태 설정 우선 초기 상태를 위해 useState와 u..

React Native Calendars란? React Native Calendars는 React Native 애플리케이션을 위한 다양한 캘린더 컴포넌트를 제공하는 오픈 소스 라이브러리입니다. 월간 뷰, 주간 뷰, 날짜 마킹, 사용자 정의 일 컴포넌트와 같은 다양한 캘린더 레이아웃과 기능을 제공하여 쉽게 React Native Calendars라이브러리를 활용하여 캘린더를 만들어줍니다. React Native Calendars 사용 방법 설치 프로젝트에 React Native Calendars를 사용하기 시작하려면, 먼저 라이브러리를 설치해야 합니다. $ npm install react-native-calendars #or $ yarn add react-native-calendars Calendar 속성..