Front-end/React

💡리덕스 미들웨어는 보통 모니터링, 비동기 처리 용도로 사용된다. 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..

💡 불변성이 필요한 이유는 무엇일까? 렌더링 최적화 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란?..

🚨 에러 발생 리액트에서 input type 체크박스를 사용하던 중에 아래와 같은 에러가 발생했다. Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. 해석해보면 checked 속성을 사용하여 값을 지정하지만 해당 값을 변경할 때 처리할 onChange 핸들러가 없어 오류가 난다는 것이다. 따라서 `defaultChecked`를 사용하거나 `onChange` 혹은..

# CSR (클라이언트 사이드 렌더링) 이란? ​ SPA(Single Page Application) → 사용자가 한페이지 내에서 머무르면서 필요한 데이터를 서버에서 받아 와서 부분적으로 업데이트 하는것 ​ CSR (클라이언트 사이드 렌더링) 서버에서 인덱스라는 HTML 파일을 클라이언트에 보내주면 HTML은 텅텅 비어져 있기 때문에 처음에 접속하면 빈 화면만 보인다. 다시 링크된 어플리케이션 자바스크립트를 서버로 부터 다운받는데 이 자바스크립트에는 로직, 여러가지 소스코드들이 모두 다 포함되어 있다. 그렇기 때문에 사이즈가 커서 다운받는데 시간이 소요된다. 추가로 필요한 데이터가 있다면 서버에 요청해서 데이터를 받아온 다음에 이것을 기반으로 동적으로 HTML 을 생성해서 사용자에게 최종적인 어플리케이션..