나만보는개발공부블로그

리액트 애플리케이션의 성능을 최적화하려면 상태 관리에 대한 깊은 이해가 필요하다. 이번 글에서 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 이용)..

환경 변수 SDK의 중요 키 값이나 API URL과 같은 변수값들을 환경변수라고 부르는지 정확히 명칭은 알지못하지만 정의된 말에 따르면 환경변수는 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임 이라고 정의 되어있다. RN개발을 진행하면서 중요한 값들을 따로 .env에 정의하고 처리할려고 하는데 리액트 네이티브 공식 문서에 따르면 완벽하게 중요한 값들을 숨길수는 없고 다른 layer를 통해서 값을 받아오는식으로 처리해야한다고 합니다. 설명예시에 따르면, 클라우드 환경에서 람다 함수를 통해서 중요 키 값들을 요청해서 받아오는 방식 현재 개발하면서 중요 키 값들을 받아오는식으로 처리하는 환경은 아니기 때문에 공식문서에서 제안해준 라이브러리를 통해 키값을 설정할려고 합니다. 1. rea..