9월 17일

오늘 배운 것 (TIL)

Vanilla Extract with Next.js 14+ 완벽 가이드

vanilla-extract의 Next.js 14+ 환경에서의 사용법을 정리했다.

주요 학습 내용

1. 기본 설정

• Next.js 플러그인 설치 및 설정 방법
• 외부 라이브러리 사용 시 transpilePackages 설정
• 다른 플러그인과의 조합 방법 (MDX 등)

2. 기본 사용법

• 스타일 정의와 컴포넌트 적용
• 테마 시스템 구축 (createTheme, createThemeContract)
• Sprinkles 유틸리티 시스템 활용

3. 고급 사용법

• 레시피 시스템을 통한 복합 스타일 관리
• 동적 스타일링 (assignInlineVars, setElementVars)
• CSS 변수와 복잡한 스타일 객체 조합
• 전역 테마 계약 활용

4. 문제 해결

• 외부 라이브러리 스타일 미적용 문제 해결
• Jest 테스트 환경에서의 .css.ts 파일 처리
• SSR 환경에서의 CSS 누락 문제 해결
• 테스트 환경 최적화 방법

5. 성능 최적화

• 식별자 설정을 통한 번들 크기 최적화
• CSS 번들 최적화 및 반응형 배열 표기법
• 타입 안전성 확보 (RequiredConditionalValue)
• 글로벌 스타일과 Sprinkles 결합

6. 실무 활용 팁

• calc 연산 중첩 개선
• 키프레임에서 변수 사용
• 컴포넌트 속성 필터링 패턴

특히 인상 깊었던 점

1. 테마 계약 시스템: createThemeContract를 사용하면 CSS 없이 테마 구조만 정의하고, 이를 바탕으로 여러 테마를 구현할 수 있어 코드 분할에 유리하다.

2. Sprinkles 시스템: Tailwind CSS와 유사하지만 타입 안전성과 빌드 타임 최적화가 보장되는 유틸리티 퍼스트 접근법이 매우 인상적이었다.

3. 동적 스타일링: assignInlineVars를 통해 런타임에 CSS 변수를 안전하게 조작할 수 있어, 테마 변경이나 동적 브랜딩에 활용 가능하다.

4. 레시피와 Sprinkles 결합: 컴포넌트 변형(variant)을 체계적으로 관리하면서도 유틸리티의 장점을 함께 활용할 수 있는 패턴이 매우 실용적이다.