TwentyTwentyOne

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 7편: 일정 데이터 영구 저장 – LocalStorage 연동으로 새로고침에도 유지하기지난 편에서는 사용자가 일정을 추가하고, 선택한 날짜에 맞춰 렌더링하는 기능을 구현했습니다.하지만 새로고침하면 데이터가 모두 날아가는 불편한 현실이 있었죠.이번 글에서는 브라우저에서 데이터를 지속적으로 유지할 수 있도록LocalStorage와 연동하여 일정 데이터를 저장하고 복원하는 기능을 구현합니다.🎯 목표LocalStorage에 일정 데이터를 저장앱 시작 시 LocalStorage로부터 데이터를 불러오기저장/불러오기 로직을 TypeScript로 구조화📦 1. LocalStorage 유틸리티 함수 만들기✅ EventStorage...

🚀 FastAPI 기반 로컬 LLM + RAG 챗봇 – React Query와 Zustand의 차이점 및 활용법이번 글에서는 Next.js에서 Zustand와 React Query를 비교하고, 각 라이브러리를 어떻게 활용하면 좋은지를 다룹니다.✅ Zustand와 React Query의 차이점을 이해하고, 함께 사용하는 방법을 학습합니다.✅ Next.js의 서버 상태와 클라이언트 상태를 효율적으로 관리하는 전략을 정리합니다.📌 1. Zustand vs React Query 비교Zustand와 React Query는 Next.js에서 상태를 관리하는 방식이 다릅니다.각각의 용도를 정확히 이해하면, 최적의 상태 관리 전략을 수립할 수 있습니다.✅ 1.1 주요 차이점 비교기능 Zustand React Que..

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