Next next-redux-wrapper를 통해 클라이언트와 서버 간의 상태 공유는 끝났다. next에서는 동적 페이지를 사용하기 때문에 페이지 전환이 빈번하게 발생한다. 페이지 전환이나 새로고침 시에는 리덕스의 상태가 초기화 되는데, 상태를 유지시켜주기 위해 redux-persist를 사용할 수 있다. localS...

React Redux-Toolkit (RTK) store - store - slice (reducer files) - ... - ... store.ts store.ts rootReducer : 생성한 여러 개의 리듀서들을 하나로 통합한다. store : 전역적으로 사용할 하나의 스토어를 만...

Next Redux를 Next에서 사용하기 전에 짚어보는 배경지식 CSR (Client Side Rendering) 구동 방식이 사용자측에서 이루어진다. React와 같은 SPA(Single Page Application)의 기본적인 구동 방식이다. 브라우저가 서버에 콘텐츠를 요청한다. 서버에 콘텐츠를 요청하게 되면 ...

React npm i redux react-redux @reduxjs/toolkit Redux-Toolkit (RTK) Next.js에서 Redux-Toolkit을 사용하기 전에 자세히 알아보자 기존의 리덕스를 사용 시, 상태 관리를 할수록 코드가 많아지고 복잡해지는 문제점을 해결한 것이다. Redux vs Redux-Toolkit...

React 무한 스크롤 구현하기 react-query에는 무한 스크롤을 구현할 수 있는 useInfiniteQuery 훅이 내장되어 있다. 파라미터 값만 변경하여 useQuery를 무한정 호출한다. useQuery가 작동하는 방식과 마찬가지로 fetch를 통해 데이터를 가져오고, 특정 조건일 때 pageParams를 통해 다음 페이지의...

Mui SSR Next.js는 서버 사이드 렌더링 방식으로 작동하기 때문에, styled-components와 마찬가지로 초기 세팅을 해주어야 한다. 최초 SSR 이후 CSR로 라우팅하게 될 때, 서버에서 생성하는 해시값과 브라우저에서 생성하는 해시값이 서로 달라 className did not match와 같은 에러가 발생하게 된다. ...

React 참고자료 Effective Component Effective Component란, 지속 성장 가능한 컴포넌트를 말한다. 쉽게 말해 변경에 용이하고 분리가 잘 되어 있는 컴포넌트로 만들어 기능을 수정하거나 추가할 때, 다른 컴포넌트에 영향을 주고 받지 않아 독립성이 유지되는 컴포넌트를 말한다. 우선 컴포넌트는 데이터를 관리...

React 참고자료 HOC, High Order Component 고차 컴포넌트라고 불리는 HOC는 컴포넌트의 재사용성을 높여 새 컴포넌트를 반환하는 함수를 말한다. props를 UI로 반환하는 것이 아닌, 새로운 컴포넌트로 변환하는 것을 말한다. 아래의 예시처럼, 하나의 컴포넌트에 label, input, error 역할을 하는 3...

AWS EC2 인스턴스 생성 후 보안 그룹을 연결해준 후 EC2를 연결한다. 아래 명령어를 차례대로 입력한다. // 업데이트 sudo apt update // npm 설치 sudo apt install npm // node js 설치 sudo apt install nodejs // git 설치 sudo apt in...

AWS S3 EC2가 Elastic Computer Cloud의 약자인 것처럼, S3는 Simple, Storage, Service의 약자이다. 파일을 저장하며 데이터를 객체 형태로 저장하는 역할을 한다. 주로 이미지나 동영상 파일을 저장하는 용도로 사용된다. 파일 저장에 최적화 되어 있어, 파일의 업로드/다운로드가...