Next.js의 서버 사이드 렌더링(SSR) 환경으로 넘어오면 한 가지 고민이 생깁니다."서버에서 받아온 데이터를 어떻게 클라이언트의 Zustand 스토어에 안전하게 전달할 것인가?"useEffect로 넣기엔 깜빡임(Layout Shift)이 발생하고, 전역 변수로 관리하기엔 서버에서 여러 사용자의 상태가 뒤섞일 위험이 있습니다. 오늘은 이 문제를 해결하는 Hydration 전략을 알아봅니다. ✓ 하이드레이션(Hydration)서버가 보낸 정적인 HTML 위에 자바스크립트가 실행되면서 동적인 기능(이벤트 리스너, 상태 관리 등)이 결합되는 과정- CSR (React) 처음에 빈 화면()만 받음 → 자바스크립트가 다 로드되어야 화면이 그려진다.- SSR (Next.js) 서버가 미리 HTML을 다 그려서 ..

Zustand란 무엇인가?Zustand는 발행/구독(Pub/Sub) 모델을 기반으로 하는 작고 빠르며 확장 가능한 상태 관리 라이브러리입니다.Flux 패턴을 따르되, 보일러플레이트(반복되는 코드)를 최소화하여 개발자 경험을 극대화 - 간결함: Redux처럼 복잡한 설정이나 Provider로 감싸는 과정이 필요 없습니다. - 성능: 상태가 변경될 때 리렌더링을 최적화하는 기능이 내장되어 있습니다. - 유연성: 특정 라이브러리에 종속되지 않아 React 없이도 사용할 수 있습니다. ✓ 상태 관리 라이브러리란?프론트엔드 개발에서 상태(State)는 관리해야하는 모든 동적 데이터를 의미한다. (로그인여부, 입력창의 텍스트 등등)상태관리라이브러리는 이런 데이터들을 컴포넌트 사이에 효율적으로 전달하..