TwentyTwentyOne

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Zustand를 활용한 전역 상태 관리이번 글에서는 Next.js에서 Zustand를 사용하여 전역 상태를 관리하는 방법을 다룹니다.✅ Zustand의 기본 개념을 이해하고, Next.js 프로젝트에서 적용하는 방법을 학습합니다.✅ 서버 컴포넌트와 클라이언트 컴포넌트 간 Zustand의 사용법을 익힙니다.📌 1. Zustand란?Zustand는 가볍고 빠른 전역 상태 관리 라이브러리로, Redux보다 간편하며 성능이 뛰어납니다.📌 Zustand의 주요 특징:✅ 사용이 간편 – Redux보다 코드가 간결함✅ 불필요한 리렌더링 최소화 – 성능 최적화✅ 서버 컴포넌트(SC) & 클라이언트 컴포넌트(CC)에서 모두 사용 가능✅ TypeScript 완벽..

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – Next.js에서의 상태 관리 개요이번 글에서는 Next.js에서의 상태 관리 개념과 전역 데이터 관리 전략을 다룹니다.✅ 클라이언트 상태와 서버 상태의 차이를 이해하고, 전역 상태 관리가 필요한 이유를 살펴봅니다.📌 1. Next.js에서의 상태 관리 개요Next.js는 React 기반의 프레임워크이므로 **상태 관리(State Management)**가 필수적입니다.상태 관리는 크게 클라이언트 상태(Client State) 와 서버 상태(Server State) 로 나눌 수 있습니다.✅ 1.1 클라이언트 상태 (Client State)란?클라이언트 상태는 사용자의 인터페이스(UI)에서 즉시 반응해야 하는 상태를 의미합니다.📌 예제 – 클라이..

overview 리덕스의 action 과 reducer를 간단하게 정의해 놓았습니다. 이제 todolist 등록하고, delete하는 기능을 적용하기 위해 reducer를 수정해 줍니다. // src\Redux\TodoList\index.js const CREATE = "todolist/ADD"; const READ = "todolist/READ"; const UPDATE = "todolist/UPDATE"; const DELETE = "todolist/DELETE"; export const onCreate = (todoItem) => { return { type: CREATE, item: todoItem, }; }; export const onRead = () => { return { type: REA..

Overview Redux 는 기본적으로 액션 - 리듀서 - 스토어 - 상태 로 이루어져 있다고 이해하고 있다. 추가적으로 구독이나 디스패치, 미들웨어 등이 있다. 중요한 개념은 스토어에 등록된 리듀서에서 디스패치된 액션 타입 별로 상태를 변화 시켜 주는것으로 이해된다. 나는 Redux 디렉토리를 만들고 그 안에 Redux를 사용하는 프로젝트 별로 액션과 리듀서를 작성하고, CombineReducers를 index.js에 선언에 RootReducer를 Export하는 방식으로 사용할 계획을 가지고 시작한다. 1. 디렉토리 및 파일 만들기 src 디렉토리에 Redux 를 디렉토리를 만들고, 그안에 TodoList 디렉토리를 만들어 준다. 각각 index.js 파일을 만들어 준다. 그리고 webpack.co..

Overview 리액트 관련 프로젝트에서 많이 사용하는 상태 관리 라이브러리로서 Redux(리덕스)를 사용해 보면서 정리하는 글을 작성해 보고자한다. 간단한 Todo List의 상태를 Redux로 상태 관리하는 것을 통해 정리해보고자한다. 먼저, Dummy data를 통해 초기 페이지 UI를 간단하게 만들어 본다. Todo List UI 세팅 1. Data Structure TodoList에 필요한 데이터는 아이디 , 제목, 내용, 생성날짜,완료 체크 이다. 추후에 추가될수도있지만, 우선은 이포맷으로 더미 데이터 3개 정도를 만들어 준다. // ./data.js export const dummy = [ { id: 1, title: "블로그 작성", contents: "리액트 블로그 작성하기", done:..