💡리덕스 미들웨어는 보통 모니터링, 비동기 처리 용도로 사용된다. 1. Redux Middleware란? 액션이 스토어로 dispatch 된 후 리듀서에 도달하기 전과 상태변경이 완료된 후 수행할 중앙집중화된 작업을 지정할 수 있는 함수이다. 단일 스토어로 내부에 등록해서 모든 액션이 스토어를 거쳐가게 한다. 상태 또한 스토어에 저장된다. 1.1 Middleware 전달 과정 1. dispatch(action) 전달한다. 2. 첫번째 미들웨어를 거쳐 어떤 작업을 한다. 3. next(action)을 해주고 다음 미들웨어로 넘어간다. 4. 두번째 미들웨어를 거쳐 어떤 작업을 한다. 5. 이런식으로 지정한 미들웨어수를 다 거쳐 끝나면 리듀서로 넘어간다. 6. 상태가 변경되고 다시 역순으로 미들웨어를 다시 거..
📍 zustand는 이번에 과제 진행하면서 사용해본 상태관리 라이브러리이다. 요즘 많이 사용되고 인기가 많은 라이브러리 중 하나라고 하는데 확실히 써보니 쉽고 사용하기 간편했다. 간단한 프로젝트 였기때문에 살짝만 써본 상태인데 더 자세히 공부해서 확실히 활용해 보고 싶다. GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com 1. zustand란? 'Zustand'는 독일어로 'State..
📍아마 요즘 내가 가장 신경쓰고 있는 것 중 하나가 상태관리 일 것이다.리액트 프로젝트를 하다보니 상태관리의 중요성을 알게 되었고 상태관리에 대해 알아보며 상태관리 라이브러리에 대해 관심을 갖게 되었다.오늘 배운 리덕스는 사실 이제는 조금 지나간(?) 느낌의 라이브러리라는 소리만 듣고 안써야지 막연히 생각만 하고 있었는데 내가 어떤 라이브러리를 쓸 지 모르는 상황에서 해당 라이브러리의 아키텍처를 배워두는건 중요하다는 말을 들었다.리덕스를 시작으로 다양한 라이브러리에 대해 배우고 정리해보려고 한다. 시작하기: Redux를 배우고 사용하기 위한 자료" data-og-host="ko.redux.js.org" data-og-source-url="https://ko.redux.js.org/introduct..
1. JWT(JSON Web Token)란? 서명 검증을 통해 토큰의 위변조 유무를 확인할 수 있도록 사용하는 JSON 기반의 토큰 서명이 검증되어 payload가 위변조되지 않았다는 것이 확인되면 payload 정보를 신뢰하여 사용한다. 💡 토큰이 발급되면 누군가가 함부러 변경하지 못하게 서명을 사용한다. 2. JWT의 구조 JWT는 . 을 기준으로 header(헤더) / payload(내용) / signature(서명) 으로 이루어져 있다. 누군가가 payload을 변경하려고 하면 서명도 같이 변경해 줘야한다. 💡JWT 어떻게 구성되는지는 알았는데 실제 작동은 어떻게 할까? HMAC(Hash based Message Authentication Code) 송신자와 수신자는 공통 비밀키(secret ke..
💡 불변성이 필요한 이유는 무엇일까? 렌더링 최적화 React.memo() useCallback() useMemo() 상태 변경 추적 Redux(immer) Zustand(immer) Recoil(immutable) ✔️ 여기서 immer는 불변성 라이브러리 이다. 1. 렌더링 최적화에 불변성이 필요한 이유 컴포넌트 트리에서 상태, 속성이 변경된 것이 있을 때만 가상 DOM에 대한 렌더링을 해야 한다. 이전 상태 객체와 현재 상태 객체를 비교하여 렌더링 여부를 판단 Deep Compare(X) → Shallow Compare(O) 불변성을 사용하지 않았다면 Shallow Compare 는 불가능 했을 것 ✨불변성 라이브러리를 이용하면 shallow compare로 결정한다. 💡 Deep Compare란?..
💡 이번에 과제 프로젝트를 진행하고 배포는 vercel에서 진행는데요. github page, firebase으로 배포를 해봤는데 개인적으로 vercel에서 배포하는게 제일 쉽고 빨랐던거 같습니다. ✨프로젝트 배포하기 1. vercel 홈페이지 접속하기 → 로그인 Meet our Customers – Vercel Take a look at a showcase of sites our customers create and learn how they use Vercel to build a better web, scale their business, and improve performance. vercel.com 2. add new 버튼 클릭 → project 클릭 3. 내 깃허브 목록에서 내가 배포하고자 하는..