HA젠옹의 프리랜서의 일상

React 19가 정식 출시되며, 개발자 경험과 성능을 대폭 향상시키는 다양한 기능이 도입되었습니다. 이번 포스트에서는 React 19의 핵심 업데이트를 정리했습니다. 새로운 주요 기능1. Actions 및 관련 훅들useActionState: 폼 제출과 같은 비동기 작업을 간편하게 처리할 수 있는 훅입니다. 상태, 액션 함수, 로딩 상태를 함께 관리할 수 있어 폼 처리 로직이 간결해집니다.useFormStatus: 폼의 제출 상태를 추적할 수 있는 훅으로, 버튼 비활성화 등 UI 상태 관리를 쉽게 할 수 있습니다.useOptimistic: 서버 응답을 기다리지 않고 UI를 즉시 업데이트하는 낙관적 UI 구현을 지원합니다. 사용자 경험을 향상시키는 데 유용합니다.2. 서버 컴포넌트와 클라이언트 컴포넌트의..

앱이 업데이트 될 때마다 사용자들에게 최신 버전으로 사용하게 만들기 위해 어떠한 방법이 있을까? 라는걸 찾다가 발견한 라이브러리를 소개할려고 합니다. 해당 라이브러리는 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로 연동된 본인인증을 클릭하였을 때 하얀 백지 화면만 출력이 되는 현상이 발견되었습니다. 분명 웹에서는 문제 없이 작동이 되는 것을 확인이 되었지만 어째서인지 앱..

서론우선 해당 내용에 대해 간략하게 Yarn이 무엇인지? 그리고 최근에 업데이트가 된 Yarn v3가 무엇이길래 차이가 있는지에 대해 알아보고 해결 방법을 찾아겠습니다.Yarn이란?Yarn은 Facebook에서 개발한 패키지 매니저로, JavaScript 및 Node.js 프로젝트에서 의존성을 효율적으로 관리하도록 설계되었습니다. 주요 특징은 다음과 같습니다.빠른 속도일관된 설치 환경네트워크 복원성병렬 설치 기능Yarn v3란?Yarn v3는 Yarn의 최신 주요 버전으로, 이전 버전과 비교하여 다양한 혁신적인 기능과 성능 개선을 포함하고 있습니다. 특히 Plug'n'Play(PnP)와 같은 새로운 종속성 관리 시스템을 도입하여 의존성 설치 및 관리 방식을 크게 변경했습니다 Yarn v1 vs Yarn ..

예전과 달라진 구글 앱 출시 관련하여 출시 방법이 변경이 되어 어떤 식으로 변경이 되었는지 가져왔습니다. 우선, 이전에는 구글과 애플 앱 등록 자체에서 애플 심사가 매우 까다롭다 보니 구글만 등록하시는 사람들이 많았습니다.당연하게도 애플과 달리 구글은 복잡한 심사도 없으며, 누구든지 자신만의 어플리케이션만 존재하였다면 쉽고 빠르게 앱을 등록할 수 있었기 때문이죠. 하지만, 구글 또한 이제 애플처럼 다양한 방법으로 앱 출시 관련하여 심사 정책들이 하나 둘씩 생기고 있습니다. 특히 작년 11월부터 새로 생긴 Play 정책으로 앱 정식 출시전 비공개 테스트 (베타 테스트) 14일을 완료해야 프로덕션 (정식 출시)이 가능해졌습니다. 이제 구글 또한 이전만큼 결코 누구나 앱을 등록할 수 있게 된 것은 아니게 되었..

이번에 지인한테 소개 받은 라이브러리 중 JWT 관련하여 유용한 패키지 라이브러리가 있다고 하여 알아보았습니다. 사용자 인증과 세션 관리를 위해 JSON Web Tokens(JWT)가 널리 사용되고 있습니다. JWT는 사용자의 인증 정보를 안전하게 전송하고 저장할 수 있는 방법을 제공합니다. 그러나 JWT는 Base64로 인코딩되어 있어, 그 내용을 이해하려면 디코딩 과정이 필요합니다. 이때 유용한 라이브러리가 바로 jwt-decode입니다. 이번 글에서는 jwt-decode 라이브러리에 대해 자세히 알아보고, 실제로 어떻게 사용하는지, 그리고 그 장단점에 대해 살펴보겠습니다.jwt-decode 라이브러리란 무엇인가?jwt-decode는 JWT를 디코딩하여 그 안에 담긴 정보를 쉽게 추출할 수 있게 해주..

최근 웹 개발에서 보안이 중요한 이슈로 대두되면서, 많은 개발자들이 JWT(Json Web Token)를 활용하여 클라이언트와 서버 간의 안전한 인증을 구현하고 있습니다. 그런데 여기서 흥미로운 점은, 개발자들이 JWT 토큰을 클라이언트에 전달할 때 responsebody가 아닌 responseheader를 통해 전달한다는 것입니다. 왜 그런 걸까요?1. 보안 향상CSRF 보호JWT를 responsebody로 전달하면, 클라이언트는 이를 로컬 스토리지나 세션 스토리지에 저장하게 됩니다. 그러나 이러한 저장 방식은 CSRF(Cross-Site Request Forgery) 공격에 취약할 수 있습니다. JWT를 responseheader로 전달하면 클라이언트는 이를 쿠키에 저장할 수 있고, 쿠키에 SameS..