
Zustand 사용 기준: React 상태 관리가 복잡해질 때 선택하기
이 글에서 정리하는 내용 Zustand를 사용하는 이유를 React 상태 관리 흐름 안에서 정리합니다. 단순히 “Redux보다 쉽다”는 장점 나열이 아니라, 상태가 여러 컴포넌트로 퍼질 때 props, Context, TanStack Query와 어떤 기준으로 역할을 …
더 읽기프로그래밍 카테고리에서는 HTML, CSS, JavaScript, React, Next.js를 비롯한 다양한 개발 지식과 실무 구현 방법을 정리합니다. 기초 문법부터 UI 구현, API 연동, 상태 관리, 성능 최적화, 트러블슈팅까지 실제 작업에 바로 적용할 수 있는 내용을 쉽고 체계적으로 다룹니다.

이 글에서 정리하는 내용 Zustand를 사용하는 이유를 React 상태 관리 흐름 안에서 정리합니다. 단순히 “Redux보다 쉽다”는 장점 나열이 아니라, 상태가 여러 컴포넌트로 퍼질 때 props, Context, TanStack Query와 어떤 기준으로 역할을 …
더 읽기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 동적 클래스가 적용되지 않는 이유를 클래스 감지 방식에서부터 정리합니다. 처럼 런타임에 조합되는 문자열이 왜 실패하는지, 먼저 어떤 방식으로 고쳐야 하는지, 그리고 와 을 어떤 상황에서 써야 하는지까지 나눠…
더 읽기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 클래스가 맞는데도 스타일이 적용되지 않는 상황을 자동 콘텐츠 감지와 @source 관점에서 정리합니다. 컴포넌트 위치, 모노레포 공용 UI 패키지, 외부 라이브러리, CMS나 JSON 기반 클래스처럼 Tai…
더 읽기
이 글에서 정리하는 내용 Zustand를 처음 공부할 때는 문법보다 상태를 어디에 둘지부터 잡아야 합니다. 컴포넌트 내부 state, Context API, Redux Toolkit과 비교하면서 Zustand가 어떤 문제를 줄이고, 어떤 상태를 맡기면 되는지 기준을 정…
더 읽기
Tailwind CSS Container Query를 이해하는 기준 Tailwind에서 반응형을 잡을 때 가장 먼저 익히는 방식은 보통 :, :, : 같은 breakpoint입니다. 이 방식은 페이지 전체 레이아웃을 잡을 때 여전히 필요합니다. 다만 카드, 리스트, 위…
더 읽기
text-${color}-500처럼 문자열을 조합하면 코드상으로는 자연스러워 보여도 Tailwind가 실제 클래스를 미리 찾지 못할 수 있습니다. 동적 문제는 코드가 틀려 보이지 않아서 더 헷갈립니다 React에서 색상 값에 따라 text-red-500, text…
더 읽기
Zustand 글은 여러 개 있지만 각 글을 어떤 순서로 읽어야 하는지 정리되지 않으면 store와 action, selector가 따로 노는 개념처럼 보입니다. Zustand는 store 하나부터 시작하면 덜 헷갈립니다 Zustand를 처음 볼 때는 전역 상태 …
더 읽기
이 글에서 정리하는 내용 Git Alias는 자주 입력하는 Git 명령어를 짧게 줄여 쓰는 설정입니다. 이 글에서는 PowerShell 기준 설정 명령어와 함께, 실제 작업 흐름에서 자주 쓰이는 alias를 상태 확인, 스테이징, 커밋, 브랜치, 로그, …
더 읽기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 Arbitrary Value와 Arbitrary Variant를 구분합니다. 둘 다 대괄호 문법을 쓰지만 해결하는 문제는 다릅니다. Arbitrary Value는 기본 scale 밖의 값을 직접 넣는 방식이…
더 읽기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 를 어디에 쓰고 어디에서 멈춰야 하는지 정리합니다. 반복 버튼을 줄이는 문제, third-party 라이브러리 스타일 덮어쓰기, @utility로 프로젝트 전용 유틸리티를 만드는 기준, @custom-var…
더 읽기