Coding Archive

Tailwind CSS에서 동적 크기 클래스 문제와 해결 방법 프로젝트를 진행하던 중 Tailwind CSS를 사용할 때 동적 클래스 적용이 제대로 되지 않는 문제가 발생했습니다. UserImage 컴포넌트에서 image 크기를 h-[${size}]와 같은 형태로 자바스크립트 템플릿 리터럴을 사용하여, Tailwind가 이를 인식하지 못했기 때문입니다. 이번 글에서는 이런 문제의 이유와 해결 방법을 자세히 살펴보겠습니다. 문제 상황 : UserImage 컴포넌트가 렌더링되지 않는 이유Tailwind CSS는 정적으로 컴파일된 CSS 프레임워크입니다. 즉, 빌드 과정에서 사용된 모든 CSS 클래스를 스캔하고, 최적화된 CSS 파일을 생성합니다. h-[${size}], w-[${size}]와 같이 자바스크립..

1. React Hook Form이란?react-hook-form은 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와주는 React 기반의 폼 관리 라이브러리입니다.1.1 프로젝트에서 React Hook Form을 도입한 이유react-hook-form을 프로젝트에 도입한 가장 큰 이유는 '성능'과 '코드의 간결함' 때문입니다. React에서 폼을 처리하는 방식은 대부분 useState로 각 필드의 상태를 관리하는데, 이는 복잡한 폼일수록 코드가 길어지고 상태 변화마다 리렌더링이 발생하여 성능 저하로 이어질 수 있습니다. 이전 프로젝트에서 useState 기반으로 모든 필드 값을 상태로 관리하고, 각 필드가 변경될 때마다 폼 전체가 리렌더링되는 비효율적인 구조를 가지고 있어 ..