분류 전체보기

📍 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. 내 깃허브 목록에서 내가 배포하고자 하는..

💡 이번에 과제를 진행하면서 API 주소, API KEY와 중요 정보들도 다뤘는데 이때 이러한 값들이 노출되지 않게 하기 위해서는 어떻게 해야 되는지 정리해 봤다. 💻 프로젝트를 진행할 때 해당 프로젝트에서 사용되는 중요한 정보, KEY등과 같이 공개적으로 노출되면 안되는 값들이 있다. 이럴 때 따로 .env 파일을 만들어 그곳에 저장해서 사용할 수 있는 환경 변수를 설정해 줄 수 있다. 1. 환경 변수란? 프로젝트가 동작하는 환경 자체에다가 어떤 변수를 만들어서 데이터를 담아놓고 그 환경에서만 데이터를 활용할 수 있는 방법. 2. 환경 변수 설정하기 1) 루트 폴더에 .env 파일을 생성한다. 2) .env 파일에 변수와 값을 입력해준다. REACT＿APP＿변수 이름 = 값 3) 중요한 정보를 담고 있..