React(Vite)에서 Next.js로 마이그레이션하며 env 관리와 런타임 모드가 헷갈렸던 경험이 있어서 정리하고자 글을 작성하게 되었습니다. 1. Vite의 핵심 개념: modeVite는 mode라는 별도의 개념이 있습니다.mode는 어떤 .env 파일을 로드할지를 결정하는 환경 프로파일 이름입니다. ✔️ 기본 동작명령어기본 mode 값로드되는 파일vite devdevelopment.env.developmentvite buildproduction.env.production ✔️ mode는 자유롭게 지정 가능vite build --mode staging // -> .env.staging 로드vite dev --mode abc // -> .env.abc 로드즉 mode는 개발자가 원하는 이름으로 무한하..

지금까지 useEffect와 useState를 이용해 데이터를 가져오고, 그에 따라 로딩/에러 상태를 직접 관리하는 방식을 써왔습니다.하지만 이 방식은 앱 규모가 커지고 UI 로직이 복잡해질수록 비효율적이고 중복이 많아지는 문제를 드러냈습니다. 또 하나의 근본적인 한계는,서버에서 이미 관리되고 있는 데이터를 클라이언트에서 다시 들고 있어야 한다는 점입니다.즉, 서버 상태(Server State)를 로컬 상태처럼 관리하다 보니서버와 UI 간의 데이터 불일치중복된 상태 저장불필요한 재렌더링과 같은 문제들이 자주 발생하게 됩니다. 이 글에서는 as is → to be 의 전환 과정을 살펴보며, 이 조합이 어떻게 이러한 구조적 문제를 해결하는지를 이야기합니다.As-Is: 기존의 데이터 패칭 패턴 import {..

React 애플리케이션에서 상태 관리는 언제나 고민거리입니다. Redux는 너무 무겁고 설정이 복잡하고, Context API는 전역 상태가 많아질수록 성능 이슈가 생기기 쉽습니다.이럴 때 Zustand는 마치 "딱 그만큼만 필요한" 상태 관리 솔루션이라고 느껴집니다.제가 Zustand를 좋아하는 이유는 다음과 같습니다.Context 없이도 전역 상태 가능설정이 거의 없고 코드가 매우 직관적필요한 미들웨어만 골라 쓰는 유연함TypeScript와 궁합이 잘 맞음 persist, devtools, immer 등의 미들웨어를 활용하면 실무에서 바로 적용 가능한 수준의 확장성을 가질 수 있습니다. 이 글에서는 각각의 유용한 미들웨어들을 "언제, 왜, 어떻게 쓰는지" 실전 관점에서 소개해드리려 합니다. 1. pe..