Tailwind & shadcn/ui 실전
이 시리즈의 글 14개
Tailwind 설정, 디자인 토큰, shadcn/ui 컴포넌트, 테마, 폼과 프로젝트 구성을 다루는 UI 개발 경로.
Tailwind v4 + Vite: 5분 완성 설정 템플릿과 디렉터리 구조
Tailwind CSS v4 + Vite 프로젝트를 처음부터 설정하는 방법과 5분 완성 템플릿, 권장 디렉터리 구조를 소개합니다. v3에서 v4로 이전하는 체크리스트까지 담아 현대적인 프론트엔드 프로젝트를 빠르게 구축할 수 있습니다.
Tailwind CSS v4 새로운 기능 해설: 성능, 설정 및 마이그레이션 가이드
Tailwind CSS v4의 Oxide 엔진 성능 향상, CSS-first 설정 변화, 간소화된 설치 경험과 주요 변경 사항을 자세히 살펴보고 전체 마이그레이션 체크리스트와 절차를 제공합니다.
shadcn/ui란? MUI·Chakra 컴포넌트 라이브러리 비교 및 선택 가이드
shadcn/ui, Material-UI, Chakra UI, Ant Design을 번들 크기, 커스터마이징 유연성, 개발 경험, 접근성 등 7가지 관점에서 심층 비교해 최적의 선택을 돕습니다
shadcn/ui 설치와 CSS 변수로 테마 설정하는 방법
CLI와 수동 방식으로 shadcn/ui를 설치하고 CSS 변수와 OKLCH로 브랜드 색상을 구성하는 과정을 설명합니다. next-themes 다크 모드와 CVA 변형, 자주 발생하는 오류 해결법도 다룹니다.
shadcn/ui로 관리자 페이지 뼈대 만들기: Sidebar + Layout 모범 사례
shadcn/ui Sidebar와 Next.js Layout을 통합하는 모범 사례를 알아봅니다. 컴포넌트 아키텍처와 반응형 디자인부터 권한 제어까지, 확장 가능한 관리자 페이지 뼈대를 완전한 코드 예제와 함께 단계별로 구축합니다.
Tailwind 반응형 레이아웃 실전: 컨테이너 쿼리와 브레이크포인트 전략
Tailwind CSS 컨테이너 쿼리와 브레이크포인트 전략을 깊이 있게 살펴보고, 뷰포트 중심에서 컨테이너 중심으로 진화한 반응형 설계를 익혀 컴포넌트 단위의 반응형 레이아웃을 구현합니다.
Tailwind 다크 모드: class와 data-theme 방식 비교
Tailwind CSS 다크 모드의 class와 data-theme 방식을 구현 원리, 설정 방법, 프레임워크 통합 사례까지 체계적으로 비교해 프로젝트에 가장 적합한 선택을 돕습니다.
shadcn/ui 컴포지션 패턴: 여러 컴포넌트를 함께 사용하는 모범 사례
shadcn/ui 컴포지션 패턴의 모범 사례를 배우고 Dialog+Form, DataTable+DropdownMenu 같은 대표 조합과 Context 패턴, 상태 관리, 성능 최적화 등 고급 주제를 익혀 봅니다.
shadcn/ui와 Radix: 컴포넌트를 커스터마이징하면서 접근성 지키기
shadcn/ui의 기반인 Radix Primitives를 이해하고, asChild 사용법과 포커스 관리, ARIA 속성 상속을 점검해 커스텀 컴포넌트의 키보드 접근성을 유지하는 방법을 설명합니다.
Dialog, Sheet, Popover: 오버레이 컴포넌트의 접근성과 포커스 관리
shadcn/ui의 Dialog, Sheet, Popover 세 가지 오버레이 컴포넌트가 접근성과 포커스를 처리하는 방식을 자세히 살펴봅니다. WCAG 표준, ARIA 속성, 키보드 탐색, 포커스 트랩과 전체 코드 예제를 함께 설명합니다.
Tailwind 성능 최적화: JIT, content 설정 및 프로덕션 용량 관리
Tailwind CSS JIT 모드의 작동 원리, content 설정 모범 사례, 프로덕션 용량을 줄이는 4단계 최적화 전략과 실전 사례, Tailwind v4의 새로운 기능을 자세히 알아봅니다.
Astro + Tailwind: 아일랜드 컴포넌트와 전역 스타일 충돌을 막는 설정법
Astro 아일랜드 아키텍처에서 Tailwind CSS 스타일이 충돌할 때 해결하는 방법을 알아봅니다. astro-island/astro-slot의 동작 원리, Tailwind v4의 올바른 통합 방법, 흔히 발생하는 네 가지 스타일 충돌과 해결책을 실전 중심으로 설명합니다.
React Compiler + shadcn/ui: 자동 최적화 시대의 프론트엔드 개발
shadcn/ui 프로젝트에서 React Compiler를 적용하는 방법과 실전 경험, 마이그레이션 주의 사항, 성능 비교를 자세히 살펴보고 수동 최적화에서 자동 최적화로 전환하는 방법을 안내합니다.
shadcn/ui 오류 해결: 스타일 충돌, 렌더링 실패, 타입 오류
shadcn/ui에서 자주 발생하는 스타일 충돌, 컴포넌트 렌더링 실패, TypeScript 타입 오류의 원인을 설정 파일, 경로, 타입 정의 순서로 진단하고 해결하는 방법을 정리합니다.
