서버 컴포넌트에서는 상태를 저장하거나 조회하기 어렵기 때문에 redisClient를 제공함. 1. Server Component import { restApi } from '@/lib/common/plugins/restApi'; import { getRedisValue, setRedisValue } from '@/lib/common/plugins/redisClient'; const SearchPage = async () => { const test = { test1: 'test1', test2: '999999', test3: 'weqweqweqwe', }; // 마지막 500의 경우 500초로 아무것도 안넣을 경우 무한으로 저장됨 await setRedisValue('test998877', test, 5..

1번에서 설명한 zustand사용법은 매우 간단하지만 상태를 생성할때는 반복되는 코드를 줄이기 위해서 x2beeStore를 제공하고 있습니다. x2beeStore 사용방법 1.testStore.ts 생성 가장 먼저 store를 다음과 같이 생성함. import x2beeStore from '@/lib/common/plugins/x2beeStore'; export const testState = { test1: '', test2: '', test3: '', }; const useTestStore = x2beeStore('testStore', testState); export default useTestStore; 2.testStore 상태 저장, 조회 'use client'; import useTestSt..

저희 테크팀에서는 nextjs 상태관리에 대한 많은 고민 끝에 zustand를 사용하기로 하였습니다. 아래는 zustand를 사용하는 학습과정입니다. Zustand Zustand는 간단하고 빠르며 확장성 있는 상태관리 솔루션입니다. hook를 기반으로 한 편리한 API를 가지고 있어서, 보일러플레이트 코드가 없습니다. 특히 Zustand를 사용하면 기존 React 동시성, 그리고 혼합랜더러 같은 곳에서 나타나는 컨텍스트 손실 같은 일반적인 문제들을 개선하는데 도움이 많이 됩니다. 그리 어렵지않으니, 예제 코드를 통해 사용법을 살펴보겠습니다. const useBearStore = create((set) => ({ // 초기값이 0으로 설정된 bears라는 상태 속성 bears: 0, // bears를 증가..