Tailwind CSS 입문 가이드: 유틸리티 클래스와 적용 원리 정리
Tailwind 클래스가 안 먹을 때 먼저 확인할 순서 Tailwind CSS 클래스가 적용되지 않는 문제는 대부분 설치 연결, content 경로, 동적 클래스 작성 방식, 설정 변경 후 재시작, CSS 우선순위 중 하나에서 발생합니다. 막연히 코드를 다시 쓰기보…
더 읽기
hebi_admin
Zustand 설치 사용법: 기본 Store 만들고 상태 연결하기
이번 단계에서 정리하는 내용 Zustand를 React 프로젝트에 설치하고, 컴포넌트 밖에 기본 Store를 만든 뒤 필요한 상태와 액션만 꺼내 쓰는 흐름을 정리합니다. 설치 명령어보다 더 오래 남겨야 할 기준은 안에서 상태와 상태 변경 함수를 어떤 책임으로 묶을지입니…
더 읽기
Zustand 사용 기준: React 상태 관리가 복잡해질 때 선택하기
이 글에서 정리하는 내용 Zustand를 사용하는 이유를 React 상태 관리 흐름 안에서 정리합니다. 단순히 “Redux보다 쉽다”는 장점 나열이 아니라, 상태가 여러 컴포넌트로 퍼질 때 props, Context, TanStack Query와 어떤 기준으로 역할을 …
더 읽기
Tailwind CSS 동적 클래스가 적용되지 않는 이유와 @source 사용 기준
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 동적 클래스가 적용되지 않는 이유를 클래스 감지 방식에서부터 정리합니다. 처럼 런타임에 조합되는 문자열이 왜 실패하는지, 먼저 어떤 방식으로 고쳐야 하는지, 그리고 와 을 어떤 상황에서 써야 하는지까지 나눠…
더 읽기
Zustand 개념 정리: React 상태 관리를 가볍게 나누는 기준
이 글에서 정리하는 내용 Zustand를 처음 공부할 때는 문법보다 상태를 어디에 둘지부터 잡아야 합니다. 컴포넌트 내부 state, Context API, Redux Toolkit과 비교하면서 Zustand가 어떤 문제를 줄이고, 어떤 상태를 맡기면 되는지 기준을 정…
더 읽기
Tailwind CSS @source 사용법: 클래스 감지 누락 해결 기준
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 클래스가 맞는데도 스타일이 적용되지 않는 상황을 자동 콘텐츠 감지와 @source 관점에서 정리합니다. 컴포넌트 위치, 모노레포 공용 UI 패키지, 외부 라이브러리, CMS나 JSON 기반 클래스처럼 Tai…
더 읽기
Zustand 학습 순서: store, action, selector, persist까지
Zustand 글은 여러 개 있지만 각 글을 어떤 순서로 읽어야 하는지 정리되지 않으면 store와 action, selector가 따로 노는 개념처럼 보입니다. Zustand는 store 하나부터 시작하면 덜 헷갈립니다 Zustand를 처음 볼 때는 전역 상태 …
더 읽기
Tailwind CSS 클래스 감지 원리: 동적 className이 빠지는 이유
text-${color}-500처럼 문자열을 조합하면 코드상으로는 자연스러워 보여도 Tailwind가 실제 클래스를 미리 찾지 못할 수 있습니다. 동적 문제는 코드가 틀려 보이지 않아서 더 헷갈립니다 React에서 색상 값에 따라 text-red-500, text…
더 읽기
Tailwind Container Query 사용법: 부모 너비 기준 반응형 처리
Tailwind CSS Container Query를 이해하는 기준 Tailwind에서 반응형을 잡을 때 가장 먼저 익히는 방식은 보통 :, :, : 같은 breakpoint입니다. 이 방식은 페이지 전체 레이아웃을 잡을 때 여전히 필요합니다. 다만 카드, 리스트, 위…
더 읽기
Git Alias 설정 정리: 현업에서 자주 쓰는 단축 명령어 모음
이 글에서 정리하는 내용 Git Alias는 자주 입력하는 Git 명령어를 짧게 줄여 쓰는 설정입니다. 이 글에서는 PowerShell 기준 설정 명령어와 함께, 실제 작업 흐름에서 자주 쓰이는 alias를 상태 확인, 스테이징, 커밋, 브랜치, 로그, …
더 읽기