나만보는개발공부블로그

먼저 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 객체를 반환하기 때문에..

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..

최근 codepush 라이브러리를 적용하는데 있어서 안드로이드에서 예전 레퍼런스라서 최근 react-native kotlin으로 만들어진 파일내에서 처리하는 방법은 어떻게 하는지 알아봤습니다. 문서에는 아래와 같이 java파일을 수정하라고 설명되어있는데 // 1. Import the plugin class. import com.microsoft.codepush.react.CodePush; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { ... // 2. Override the ..

OAuth 로그인 처리 소셜로그인을 통해서 로그인 기능을 구현할려고 하는데 어떤식으로 구현해야할지 고민이였습니다. 첫번째로 생각했던 방식은 앱에서 카카오 로그인 버튼 클릭 앱에서 kakao REST API문서에 있는 로그인 인가정보를 가져오는 https://kauth.kakao.com/oauth/authorize 를 사용해서 백엔드로 리다이렉트 uri를 설정해주고 백엔드에서 토큰 인증 처리를 진행한다. 백엔드에서 인증정보를 가지고 앱으로 리다이렉트해준다. 위의 방식대로 진행하면 보안적으로 쿼리스트링으로 값이 유출되거나 프론트와 백엔드간의 역할 구분이 모호해진다고 느껴졋습니다. 그래서 인터넷들을 참조해가며 살펴본 결과, 앱에서 카카오 로그인 버튼 클릭 카카오로부터 앱으로 인증 정보를 받기. (SDK 이용)..