전체 글

문제는 그 다음이었다 😶combine까지 정리하고 나서다음으로 자연스럽게 이어진 게 아래의 미들웨어였다.immersubscribeWithSelectorpersistdevtools한두 개도 아니고, 여러 개가 한 번에 등장했다.각각에 대한 설명은 있었지만, 처음엔 이런 느낌에 더 가까웠다.“개념 설명은 듣긴 했는데, 크게 와닿지는 않는다.” Zustand를 처음 접한 상태에서미들웨어까지 한 번에 이해하기엔정보량이 생각보다 많았다.불변성을 관리해준다는데, 지금 당장 체감은 잘 안 됐고 🤷‍♀️특정 값을 구독한다고 하는데, 언제 써야 할지 감이 안 왔고상태를 저장한다는 것도 그냥 옵션처럼 느껴졌고devtools는 있으면 좋겠지만 필수처럼 보이진 않았다 🧩정리하면 첫인상은 이랬다.👉 “없어도 동작은 할 ..

왜 굳이 combine을 쓰는 걸까?Zustand를 쓰다 보면state랑 action을 한 객체 안에 다 때려 넣는 방식이 가장 먼저 떠오른다.export const useStore = create((set) => ({ count: 0, increase: () => set(...)}));​ 처음엔 이게 제일 직관적이고 문제도 없어 보인다.근데 상태가 조금만 늘어나고, 타입스크립트를 같이 쓰기 시작하면 store 타입 정의가 점점 귀찮아지기 시작했다.😑그래서 Zustand에서 제공하는 미들웨어 중 하나인 combine을 공부해보기로 했다. combine은 뭘 해주는 미들웨어일까?combine은 한 줄로 요약하면 이거다.타입 추론 + 역할 분리를 동시에 도와주는 미들웨어combine을 사용하면state..

리액트를 쓰다 보면 언젠가는 꼭 전역 상태 관리라는 벽을 마주치게 된다.컴포넌트 트리가 조금만 깊어져도 props drilling이 거슬리기 시작하고,“이거 전역으로 빼야 하나?”라는 생각을 하게 된다. Zustand는 요즘 프론트엔드 생태계에서 가볍고 단순한 전역 상태 관리 라이브러리로 많이 언급되지만,정작 나는 이름만 들어봤지 실제로 써본 적은 없었다. 👉 편하다는데 뭐가 편한 거지?👉 Redux랑 뭐가 다르고, 진짜 실무에서 쓸 만한가? 이런 궁금증만 쌓인 채로 미뤄두고 있다가,이번에 “어차피 언젠간 써야 할 거면 제대로 한번 파보자”는 생각으로Zustand의 동작 방식과 리렌더링 구조를 중심으로 정리해보기로 했다. 📦 Zustand에서 불필요한 리렌더링 줄이기Zustand를 사용하면 컴포넌트..

프로젝트 초반에는 Tailwind CSS 사용에 익숙하지 않아 클래스가 과도하게 길어지고, 팀원마다 spacing 단위가 제각각이어서 UI의 일관성이 흔들리는 문제가 있었다. 특히 mt-[10px]처럼 임의의 px 단위가 섞이기 시작하며 가독성이 떨어지고 유지보수도 어려워지는 상황이 발생했었다. 이러한 문제를 해결하기 위해 팀에서 Tailwind CSS의 기본 원칙을 다시 정리하고 공통 규칙을 도입했으며, 아래는 Tailwind의 핵심 정리와 함께, 실제 프로젝트에서 팀이 합의한 spacing 규칙을 기록한 내용이다. ✍️🌿 🌟 Tailwind CSS 주요 개념 정리🔤 1) 타이포그래피(Typography)Tailwind는 rem 기반 스케일을 제공하여 일관된 텍스트 표현이 가능하다.test-xs..

📚 [서평] 한입 크기로 잘라먹는 Next.js – 입문자에게 최적화된 A to Z 안내서👋 프롤로그 나는 이미 정환 님의 「한입 크기로 잘라먹는 리액트」 강의를 전부 수료한 경험이 있다.깔끔하고 이해가 잘 가는 구성 덕분에 실습을 끝까지 따라 하고,실제 배포까지 경험할 수 있었던 강의라 지금도 강하게 기억에 남는다. 그래서 이번에 나온 「한입 크기로 잘라먹는 Next.js」 책 집필 소식을 듣자마자 눈이 갔다.Next.js는 빠르게 변하는 생태계라 학습 자료도 시시각각 달라지는데 강의는 이미 인프런에 올라와 있고,거기에 더해 책으로 따끈따끈하게 집필된 최신 버전이란 점이 특히 매력적이었다.“강의 + 책 조합으로 더 깊이 배울 수 있겠구나” 싶었다. ✨ 책 소개정환 님이 집필한 「한입 크기로 잘..

🔍 SSR(Server Side Rendering)란?SSR은 사용자가 페이지를 요청할 때마다 서버에서 HTML을 완성해 보내주는 렌더링 방식이다.클라이언트가 받는 시점에는 이미 콘텐츠가 포함된 HTML이기 때문에 SEO 친화적이고 초기 로딩 속도가 빠르다.⚙ SSR 동작 과정🌐 사용자 요청 → 브라우저가 특정 URL로 요청을 보낸다.🖥 서버 렌더링 → Next.js 서버가 해당 URL에 맞는 React 컴포넌트를 실행해 HTML 생성.📦 HTML 전송 → 서버에서 완성된 HTML을 브라우저로 전달.💧 Hydration → 브라우저가 HTML을 React 앱으로 재활성화, 이벤트와 상태를 연결.💧 Hydration이란?Hydration은 서버에서 렌더링된 정적 HTML을 React 앱으로 재활..

✍️ 본문React는 UI 라이브러리로서 강력한 기능을 제공하지만,실제 프로젝트를 진행하면서 몇 가지 아쉬운 점들이 분명히 있었다.라우팅을 직접 설정해야 하고, SEO를 고려한 서버사이드 렌더링도 직접 구성해야 하며,초기 셋업도 자유로운 대신 번거로웠다. Next.js를 학습하면서 가장 먼저 느낀 건 이거였다."React에서 귀찮았던 것들이, Next.js에선 그냥 기본으로 들어가 있네?"✅ React만 쓸 때와 Next.js를 쓰는 이유💡 1. React는 라이브러리, Next.js는 프레임워크 React Next.js개념UI 구성만 담당전체 앱 구조까지 아우름구조개발자 구성 주도프레임워크가 구조 주도주도권개발자Next.js Next.js는 단순히 기능이 많은 게 아니라,프로젝트 구조와 흐름 자..

🐼 눈 아이콘 클릭 시 비밀번호 보기 및 숨기 기능 구현 삽질기그리고 공통 유틸로 추출하면서 얻은 깨달음 비밀번호 보기 토글 기능은 누구나 한 번쯤 만들어보는 단순한 UI 요소라고 생각했었다.하지만 실제로 구현하면서 사소하다고 생각했던 부분에서 얼마나 많은 실수와 누락이 발생할 수 있는지를 경험했고,그 과정을 통해 DOM 조작, 유틸 함수 추출, HTML 구조 설계, 디버깅 감각 등여러 기본 요소들을 되돌아보게 되었다. 이번 작업은 기능적으로는 짧은 구현이었지만, 그 안에서 확인하지 않고 넘어갔던 것들(예: import 누락, 잘못된 셀렉터 사용, UI 상태 연동 누락 등)이 실제 사용자 경험에 어떤 영향을 줄 수 있는지 체감할 수 있었다.또한, 단순한 토글 로직 하나도 공통 유틸로 분리하면서 재사용..