Zustand state 사용법: 값 읽기와 변경 흐름 익히기
이 글에서 정리하는 내용 Zustand store를 만든 뒤 컴포넌트에서 state를 읽고 action으로 변경하는 흐름을 정리합니다. 단순히 값을 가져오는 문법보다, 컴포넌트가 어떤 값에 의존하는지 좁히고 변경 규칙을 store 안에 모으는 기준을 중심으로 봅니다. …
더 읽기React
컴포넌트 기반으로 UI를 구성하는 JavaScript 라이브러리 React 전반을 다룹니다.
Tailwind CSS 클래스 적용 오류 해결: 스타일이 보이지 않을 때 확인할 것
Tailwind 클래스가 안 먹을 때 먼저 확인할 순서 Tailwind CSS 클래스가 적용되지 않는 문제는 대부분 설치 연결, content 경로, 동적 클래스 작성 방식, 설정 변경 후 재시작, CSS 우선순위 중 하나에서 발생합니다. 막연히 코드를 다시 쓰기보…
더 읽기
Zustand 설치 사용법: 기본 Store 만들고 상태 연결하기
이번 단계에서 정리하는 내용 Zustand를 React 프로젝트에 설치하고, 컴포넌트 밖에 기본 Store를 만든 뒤 필요한 상태와 액션만 꺼내 쓰는 흐름을 정리합니다. 설치 명령어보다 더 오래 남겨야 할 기준은 안에서 상태와 상태 변경 함수를 어떤 책임으로 묶을지입니…
더 읽기
Zustand 사용 기준: React 상태 관리가 복잡해질 때 선택하기
이 글에서 정리하는 내용 Zustand를 사용하는 이유를 React 상태 관리 흐름 안에서 정리합니다. 단순히 “Redux보다 쉽다”는 장점 나열이 아니라, 상태가 여러 컴포넌트로 퍼질 때 props, Context, TanStack Query와 어떤 기준으로 역할을 …
더 읽기
Tailwind CSS @source 사용법: 클래스 감지 누락 해결 기준
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 클래스가 맞는데도 스타일이 적용되지 않는 상황을 자동 콘텐츠 감지와 @source 관점에서 정리합니다. 컴포넌트 위치, 모노레포 공용 UI 패키지, 외부 라이브러리, CMS나 JSON 기반 클래스처럼 Tai…
더 읽기
Zustand 개념 정리: React 상태 관리를 가볍게 나누는 기준
이 글에서 정리하는 내용 Zustand를 처음 공부할 때는 문법보다 상태를 어디에 둘지부터 잡아야 합니다. 컴포넌트 내부 state, Context API, Redux Toolkit과 비교하면서 Zustand가 어떤 문제를 줄이고, 어떤 상태를 맡기면 되는지 기준을 정…
더 읽기
Zustand 학습 순서: store, action, selector, persist까지
Zustand 글은 여러 개 있지만 각 글을 어떤 순서로 읽어야 하는지 정리되지 않으면 store와 action, selector가 따로 노는 개념처럼 보입니다. Zustand는 store 하나부터 시작하면 덜 헷갈립니다 Zustand를 처음 볼 때는 전역 상태 …
더 읽기
Tailwind CSS 클래스 감지 원리: 동적 className이 빠지는 이유
text-${color}-500처럼 문자열을 조합하면 코드상으로는 자연스러워 보여도 Tailwind가 실제 클래스를 미리 찾지 못할 수 있습니다. 동적 문제는 코드가 틀려 보이지 않아서 더 헷갈립니다 React에서 색상 값에 따라 text-red-500, text…
더 읽기
TanStack Query queryFn 사용법: 데이터 요청 로직 분리하기
주요 포인트 한눈에 보기 TanStack Query에서 queryFn은 단순히 데이터를 가져오는 함수가 아니라, 캐시 계층과 서버 요청 사이를 연결하는 유일한 계약 지점입니다. 이 글에서는…
더 읽기
Next.js 커스텀 훅 설계: 프론트엔드 상태 관리 구조 잡기
프로젝트 개요 이 프로젝트는 실제 서비스 운영을 전제로 설계된 개인 포트폴리오이며, 인증, 사용자 데이터, 장바구니, 포인트, 대시보드, 공통 유틸, 입력 처리 등 반복적으로 사용되는 로직을 모두 Custom Hook으로…
더 읽기