Tailwind CSS v4.1 유틸리티 정리: text-shadow와 mask 사용하기
이 글에서 정리하는 내용 Tailwind CSS v4.1에서 추가된 text-shadow-*와 mask-* 유틸리티를 실제 UI 작업 기준으로 정리합니다. 글자에 그림자를 넣는 방법보다 배경 위 텍스트를 읽히게 만드는 기준, 이미지를 부드럽게 사라지게 만…
더 읽기프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
Zustand 리렌더링 문제 해결: 상태 변경 후 화면이 바뀌지 않을 때
Zustand 리렌더링 문제는 변경 감지 기준부터 봐야 합니다 Zustand에서 store 값을 바꿨는데 화면이 그대로라면 먼저 “값이 바뀌었는가”와 “컴포넌트가 구독한 값이 바뀐 것으로 비교되었는가”를 나눠 봐야 합니다. 객체나 배열을 직접 수정하면 내부 값은 달라져…
더 읽기
Tailwind CSS Preflight 기준: 기본 스타일 초기화가 생기는 이유
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 Preflight가 기본 HTML 스타일을 어떻게 초기화하는지 정리합니다.처럼 화면에서 바로 티가 나는 부분을 중심으로 보고, Preflight를 꺼야 하는 상황과 유지한 채 보정해야 하는 상황을 구분합니다…
더 읽기
Tailwind CSS 임의 값 공백 처리: 대괄호 문법이 깨질 때 해결하기
이 글에서 정리하는 내용 Tailwind CSS v4 기준으로 임의 값 문법에서 공백이 들어갈 때 클래스가 깨지는 이유를 정리합니다.처럼 기존 CSS에서는 자연스럽게 쓰던 값을 Tailwind 클래스 안으로 옮길 때 어떤 방식으로 바꿔야 하는지, 그리고 가 언제 공백으…
더 읽기
Tailwind CSS 클래스 적용 오류 해결: 스타일이 보이지 않을 때 확인할 것
Tailwind 클래스가 안 먹을 때 먼저 확인할 순서 Tailwind CSS 클래스가 적용되지 않는 문제는 대부분 설치 연결, content 경로, 동적 클래스 작성 방식, 설정 변경 후 재시작, CSS 우선순위 중 하나에서 발생합니다. 막연히 코드를 다시 쓰기보…
더 읽기
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…
더 읽기
Tailwind Container Query 사용법: 부모 너비 기준 반응형 처리
Tailwind CSS Container Query를 이해하는 기준 Tailwind에서 반응형을 잡을 때 가장 먼저 익히는 방식은 보통 :, :, : 같은 breakpoint입니다. 이 방식은 페이지 전체 레이아웃을 잡을 때 여전히 필요합니다. 다만 카드, 리스트, 위…
더 읽기