TwentyTwentyOne

✅ React의 상태 관리 방식 비교: useState, Redux, Zustand, Recoil프론트엔드 실무와 면접에서 빠지지 않는 질문 중 하나는 바로 **“React에서 상태 관리를 어떻게 하시나요?”**입니다.React는 다양한 방식의 상태 관리 도구를 제공하며, 각각의 방식은 사용 목적, 규모, 복잡도에 따라 적절하게 선택해야 합니다.이번 글에서는 가장 많이 사용되는 4가지 상태 관리 방법을 비교하고, 실무에서 언제 어떤 도구를 선택해야 하는지를 중심으로 설명합니다.📌 1. 상태의 종류를 먼저 이해하자상태 구분 설명 예시로컬 상태컴포넌트 내부에서만 사용하는 상태모달 open 여부, 입력 필드전역 상태여러 컴포넌트에서 공유해야 하는 상태로그인 정보, 장바구니, 테마서버 상태외부 API 요청 결..

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js에서 전역 상태 관리 적용하기1. 전역 상태 관리란?전역 상태 관리(Global State Management)는 애플리케이션의 여러 컴포넌트에서 공유하는 데이터(예: 사용자 정보, 장바구니, 테마 설정 등)를 효율적으로 관리하는 방법입니다.쇼핑몰 애플리케이션에서는 사용자의 로그인 상태, 장바구니 데이터, 결제 정보 등을 전역으로 관리해야 합니다.✅ 전역 상태 관리가 필요한 이유여러 페이지에서 동일한 데이터를 사용 가능 (예: 로그인 정보)props-drilling(부모 → 자식 컴포넌트로 데이터 전달) 문제 해결상태가 일관성 있게 유지되며, 변경이 즉시 반영됨💡 이 챕터에서는..

📌 NestJS + Prisma + Next.js로 만드는 웹 애플리케이션 첫걸음 - 애자일 쇼핑몰 프로젝트 - Next.js 프로젝트 기본 구조 및 핵심 개념1. Next.js란?Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 강력한 도구입니다.쇼핑몰 애플리케이션에서는 상품 목록 페이지, 장바구니, 결제 페이지 등에서 SEO 최적화와 빠른 로딩 속도가 필수적이므로, Next.js가 적합한 선택입니다.✅ Next.js의 주요 특징서버 사이드 렌더링(SSR) → 검색 엔진 최적화(SEO)정적 사이트 생성(SSG) → 빠른 페이지 로딩 속도API Routes 지원 → 간단한 백엔드 기능 구현 가능이..

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:..