나만보는개발공부블로그

먼저 persist에 대해서 알아보게된 이유는, Select option에 필요한 데이터들을 type에 따라서 10번 이상 동일하게 불러와야하는 상황이 있엇다.일단 useQueries를 batch 형식으로 10번의 통신을 진행하는데 어떤 페이지에 진입할때마다 10번의 통신을 불러오는 방식은 불필요하다 생각되어 브라우저의 저장소에 저장하려고 한다.먼저 zustand의 persist를 통해서 저장하려하였는데 zustand의 store 데이터를 통해서 query fetch를 진행할까에 대한 enable 옵션에서 데이터 확인을 통해서 결정하도록 로직을 구현하였는데, nextjs에서 store에 저장되기전보다 query가 실행되어서 빈값으로 항상 보여져서 생각대로 구현할수가없었다.그래서 새롭게 알아본게 tanst..

리액트 애플리케이션의 성능을 최적화하려면 상태 관리에 대한 깊은 이해가 필요하다. 이번 글에서 useState를 효과적으로 사용하기 위한 다양한 방법과 정리한 내용들을 기록해볼려한다.1. useState와 객체 식별성: Set() 객체 다루기React의 useState는 객체의 내용이 아닌 객체 식별성(reference identity)을 기반으로 리렌더링을 트리거합니다. 이로 인해 Set, Map과 같은 컬렉션 객체를 사용할 때 문제가 발생할 수 있다.const [set, setSet] = useState(new Set());return ( setSet(set.add('set'))}> 아이템 추가 (작동 안 함) )위 코드에서 set.add('set')은 동일한 Set 객체를 반환하기 때문에..

문제설명 선물을 직접 전하기 힘들 때 카카오톡 선물하기 기능을 이용해 축하 선물을 보낼 수 있습니다. 당신의 친구들이 이번 달까지 선물을 주고받은 기록을 바탕으로 다음 달에 누가 선물을 많이 받을지 예측하려고 합니다. 두 사람이 선물을 주고받은 기록이 있다면, 이번 달까지 두 사람 사이에 더 많은 선물을 준 사람이 다음 달에 선물을 하나 받습니다. 예를 들어 A가 B에게 선물을 5번 줬고, B가 A에게 선물을 3번 줬다면 다음 달엔 A가 B에게 선물을 하나 받습니다. 두 사람이 선물을 주고받은 기록이 하나도 없거나 주고받은 수가 같다면, 선물 지수가 더 큰 사람이 선물 지수가 더 작은 사람에게 선물을 하나 받습니다. 선물 지수는 이번 달까지 자신이 친구들에게 준 선물의 수에서 받은 선물의 수를 뺀 값입니..

RN개발을 진행하면서 실제적으로 적용되는 헤르메스 엔진에 대해서 모르고 있다가 이번에 내용을 정리하려고 합니다. 헤르메스 엔진이란? 리액트 네이티브 공식 문서에 헤르메시를 사용한다고 명시되어있는데, 여기서도 헤르메스에 대해서 설명하고있습니다. 한마디로 리액트 네이티브를 위한 최적화된 오픈소스 자바스크립트 엔진이라고 합니다. 주요 기능으로는, 1. 시작시간 향상 2. 메모리 사용량 감소 3. JavaScriptCore와 비교해서 앱 사이즈가 더 작음 * JavaScriptCore는 RN 0.70 이전에 사용됬던 방식 번들버전의 헤르메스를 리액트 네이티브에서 사용하게 되는데 리액트 네이티브 버전에 따라서 헤르메스 버전과 완벽 호환되기 때문에 이전에 문제가 발생했던 부분은 해결되었다고 하네요. 문제가 발생하면..

Serverless-image-handler 에 대해서 먼저 현재 진행하고있는 사이드 프로젝트에서 이미지 업로드에 대해서 생각하게 되었는데, 이전 회사에서 사용하던 서비스에서 서버리스 이미지 핸들러를 사용한적 있어서, 이 AWS에서 제공하는 서비스에 대해서 알아보고자 합니다. 서버리스 이미지 핸들러는 AWS 클라우드 서비스로, 오픈 소스 이미지 라이브러리인 Sharp 를 사용하여서 동적 이미지로 변환해서 url을 통해서 보여주어서 cloudfront를 통해서 캐싱 처리도 진행해 비용 효율적인 서비스로 알고 있습니다. 실제적인 서비스의 구조는 아래 그림과 같습니다. 먼저 위의 방식을 설명하자면 CloudFormation의 스택을 통해서 구현되어진 CloudFront, API Gateway, Lambda,..

react-native 0.73.2와 기존 리액트네이티브 네이버지도맵 관리가 잘 안되는것같아, 제로초님의 https://github.com/ZeroCho/react-native-naver-map 을 사용해서 ios 빌드시에 제목과 같은 re-registered direct event 'topClick' as a bubbling event 에러가 발생했습니다. 찾아보니 RCT_EXPORT_VIEW_PROPERTY(onClick, XXXXX) 에서 최신 리액트네이티브 버전에서 에러를 발생시키는것같았습니다. 위의 코드들을 라이브러리 모듈내에서 제거해주니 빌드 해결이 되고 정상적으로 실행됬습니다. 네이버지도맵은 따로 관리해야 할것같습니다. https://github.com/pet-walk/react-native..