REACT

Disney Plus 를 가볍게 클론코딩한 프로젝트로 Firebase를 통한 인증을 연습하는데 도움이 된 프로젝트였다. 사용자 인증을 통해 받아온 데이터를 로컬 스토리지에 저장하고 가져오도록 설정되어 있었는데 이번에 해당 데이터를 Redux를 이용해서 관리하도록 수정해보기로 했다. 이때 문제가 발생했다. Redux는 새로고침이 발생하면 저장된 state가 리셋되는 문제가 있었다. 로그인 정보를 관리하는 경우 state가 유지되어야할 필요성이 있었다. 이럴 때 redux-persist를 활용하면 문제를 해결할 수 있다. 사용 방법 1 )Install npm i redux-persist yarn add redux-persist TypeScript npm i redux-persist @types/redux-p..

디바운스(Debounce)와 쓰로틀링(Throttling)은 자바스크립트에서 이벤트 핸들링과 함수 실행을 제어하는 데 사용되는 두 가지 기술입니다.프론트엔드 개발자라면 다들 개념을 알고 있을 것이지만 비전공자 입장에서는 이조차 낮선 개념입니다. 오늘은 쓰로틀링과 디바운스에 대해서 알아보도록 합시다.디바운스이라는 용어는 전자 회로에서 스위치를 눌렀다 떼는 과정에서 스위치가 통통 튀며 전압이 불규칙적으로 들어가 전류의 흐름이 비정상적으로 일어나는 현상을 바운싱 현상이라하는데 이를 정상적으로 해주는 의미에서 사용되기 시작했다고합니다.쓰로틀링이라는 용어는 비행기 또는 자동차 등에서 연료량을 조절하는 레버가 있는데 이를 당기거나 밀어서 연료량을 조절하는 것입니다. 이러한 동작과 유사한 방식으로 동작시키기 때문에 ..

시작하기에 앞서 사용자의 프로필 사진 데이터를 아마존 S3에 이미지를 업로드 하여 사용하고 있었는데 이미지 업로드 시에 별도의 제한 없이 업로드할 수 있도록 생각했지만 서버에서 1MB 이상은 업로드할 수 없는 문제가 있었습니다. 업로드 가능한 용량을 프론트에서 제한하거나 서버에서 제한을 수정하는 것으로 문제를 해결할 수도 있겠지만 프로필 사진의 경우 항상 같은 크기로 사용자들에게 노출되며 그다지 큰 해상도가 필요하지 않았습니다. 따라서 큰 이미지를 굳이 서버에 저장하고 커다란 이미지를 내려 받는 것을 비효율적이라고 생각했습니다. 그러므로 이미지를 업로드하기 전 압축해서 서버에 업로드하도록 합시다! 이미지를 압축하는 방법은 여러가지 있습니다. 브라우저에서 이미지를 압축하는 방법과 서버에서 압축하는 방법에 ..

리액트에서 전역 상태 관리가 필요한 이유는 애플리케이션의 규모가 커지고 복잡해질수록 컴포넌트간의 데이터 공유와 상태 관리를 보다 효율적으로 처리하기 위해서입니다. 우리는 다양한 이유로 전역 상태 관리의 필요성을 느끼게 됩니다. 저는 주로 컴포넌트간의 데이터 공유와 복잡성 관리를 위해 사용한다고 생각했지만 조사해보니 보다 다양한 이유로 전역 상태 관리를 하고 있는 것을 알 수 있었습니다. 1. 컴포넌트간 데이터 공유 여러 컴포넌트에서 공통적으로 사용되는 상태가 있을 수 있습니다. 예를 들면 사용자 인증 정보, 로그인 상태, 언어, 테마, 설정 등 애플리케이션의 여러 곳에서 공유해야하는 데이터가 있을 때입니다. 2. 상태의 일관성 유지 리액트는 단방향 데이터 흐름을 가지고 있으며 그 방향은 하향식으로 고정되..