1. UUID란?UUID란 “Universally Unique Identifier”의 약자로,전 세계 어디에서 생성해 중복될 가능성이 거의 없는 고유한 식별자를 의미한다.UUID는 충돌 가능성이 0에 수렴하기 때문에 안전하게 ID를 자동 생성할 수 있다.예를 들어 `f3a9c2d0-d7a3-4a62-8ee5-4c39f3a143af`와 같은 형태로 생성된다.사용 사례:Todo 리스트에서 새 항목 추가로컬 상태에서 임시 데이터 생성클라이언트에서 DB ID가 아직 없을 때2. uuid 생성 방법2.1 crypto.randomUUID()`crypto.randomUUID()`는 Node.js 16.17 이상과 최신 브라우저에서 지원되며, 랜덤 기반의 UUID v4를 생성할 수 있다.별도의 외부 라이브러리를 설치하..

1. 들어가며Tailwind CSS를 사용하면 빠르게 스타일링이 가능하지만,동일 패턴의 클래스를 반복해 쓰면서 코드 중복이 쉽게 발생한다.cva와 cn을 활용하면 재사용 가능한 UI 컴포넌트를 효율적으로 만들 수 있다.이를 활용하여 재사용 가능한 컴포넌트를 만들어 보자.cn을 모른다면 여기를 참고하자.2. CVA로 재사용 가능한 Button 컴포넌트 만들기2.1 기존 방식의 문제점 (classNames 활용 시)디자인 요구사항이 늘어날수록 className 내부의 조건문이 복잡해지고,TypeScript 타입 정의와 로직을 이중으로 관리해야 하는 번거로움이 있다. 특히 컴파일 시점에 스타일 누락을 잡아내기 어렵다.2.2 CVA를 활용하여 해결CVA(Class Variance Authority)를 사용하면 ..

1. Tailwind 유틸리티 클래스의 우선순위Tailwind의 유틸리티 클래스는 동일한 성격의 스타일이 중복될 경우, 뒤에 작성된 클래스가 우선 적용된다.버튼이 경우 `bg-pink-500`이 뒤에 위치하므로 최종적으로 배경색은 `pink`로 적용된다.하지만 개발자 도구에서 확인하면 사용되지 않은 클래스(`bg-blue-500`)도 그대로 남아 있음을 확인할 수 있다.Tailwind는 이러한 중복을 자동으로 제거하지 않기 때문에, JSX가 복잡해지고 유지보수가 어려워질 수 있다.twmerge-merge라이브러리 사용하면 이러한 문제를 해결할 수 있다.2. tailwind-merge(twMerge)2.1 twMerge란?`twMerge`는 Tailwind 클래스 충돌을 자동으로 정리해주는 라이브러리다.충..