CSS Academy · 강의

Vanilla Extract: 런타임 없는 CSS-in-JS

빌드 시 정적 CSS 파일을 생성하는 Vanilla Extract로 타입 안전 CSS를 작성합니다.

Vanilla Extract: 런타임 없는 CSS-in-JS은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Vanilla Extract란 무엇인가요?

Vanilla Extract는 실행 시간 추가 비용이 전혀 없는 CSS와 JS 결합 라이브러리입니다. CSS를 TypeScript로 정의하고 빌드 시점에 정적 CSS 파일로 컴파일하므로, 실행 중 스타일을 주입하지 않고도 타입 안전성을 얻을 수 있습니다.

핵심 원칙

styled-components나 Emotion과 달리 Vanilla Extract는 전적으로 빌드 시점에 실행됩니다. JavaScript 가져오기는 스타일을 작성하기 위한 API이며, 출력 결과는 일반 CSS 파일입니다. 클라이언트에서는 스타일을 적용하기 위해 JavaScript가 실행되지 않습니다.

파일 규칙

Vanilla Extract 파일은 .css.ts 확장자를 사용합니다:

// button.css.ts
import { style } from '@vanilla-extract/css';

export const button = style({
  background: 'royalblue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '4px',
  cursor: 'pointer',
  ':hover': {
    background: '#2563eb'
  }
});

컴포넌트에서 사용하기

내보낸 클래스 이름을 가져와 적용합니다:

import { button } from './button.css.ts';

function Button({ children }) {
  return <button className={button}>{children}</button>;
}

테마 contract

Vanilla Extract의 가장 강력한 기능은 테마 contract(토큰 구조)를 정의하고 이를 구현하는 여러 테마를 만드는 것입니다:

import { createTheme, createThemeContract } from '@vanilla-extract/css';

const contract = createThemeContract({
  color: { primary: null, bg: null }
});

export const lightTheme = createTheme(contract, {
  color: { primary: '#3b82f6', bg: '#ffffff' }
});

export const darkTheme = createTheme(contract, {
  color: { primary: '#60a5fa', bg: '#111827' }
});

styleVariants

중복 없이 하나의 스타일에 대한 여러 변형을 만듭니다:

import { styleVariants } from '@vanilla-extract/css';

export const variants = styleVariants({
  primary: { background: 'royalblue' },
  danger:  { background: 'crimson' },
  ghost:   { background: 'transparent', border: '1px solid royalblue' }
});

// <Button className={variants[variant]}>

@vanilla-extract/recipes를 사용한 recipe

recipes 패키지의 recipe 함수는 기본 스타일과 변형을 깔끔하게 결합합니다:

import { recipe } from '@vanilla-extract/recipes';

export const button = recipe({
  base: { padding: '10px 20px', borderRadius: '4px' },
  variants: {
    color: {
      primary: { background: 'royalblue', color: 'white' },
      danger:  { background: 'crimson', color: 'white' }
    },
    size: {
      sm: { fontSize: '0.875rem' },
      lg: { fontSize: '1.25rem' }
    }
  }
});

유틸리티 클래스를 위한 Sprinkles

@vanilla-extract/sprinkles는 토큰 집합에서 유틸리티 클래스를 생성합니다. 타입이 안전하고 실행 시간이 필요 없는 Tailwind와 같은 방식입니다:

타입 안전성

스타일이 TypeScript 객체이므로 CSS 속성 이름과 값에 대해 IDE 자동 완성 및 타입 검사를 모두 사용할 수 있습니다. 속성 이름의 오타는 실행 시간이 아니라 빌드 시점에 발견됩니다.

빌드 도구 통합

Vanilla Extract는 전용 어댑터를 통해 Vite, webpack, esbuild 및 Next.js와 통합됩니다. 추출된 CSS는 정적 파일로 제공됩니다.

Vanilla Extract를 선택할 시점

다음과 같은 경우 Vanilla Extract를 선택하십시오:

스타일에 완전한 TypeScript 타입 안전성이 필요한 경우
실행 시간 CSS 생성에 따른 추가 비용이 전혀 없어야 하는 경우
최대 성능을 위한 정적 CSS 출력이 필요한 경우
타입 검사를 거치는 토큰 contract를 갖춘 견고한 테마 시스템이 필요한 경우

빠른 확인

styled-components 같은 실행 시간 스타일 생성 방식에 비해 Vanilla Extract가 제공하는 핵심 성능상의 이점은 무엇인가요?

복습

Vanilla Extract는 TypeScript를 우선하며 실행 시간 추가 비용이 없는 CSS와 JS 결합 라이브러리입니다. 타입이 안전한 JavaScript 객체를 사용하여 .css.ts 파일에서 스타일을 정의합니다. 빌드 시점에 정적 CSS 파일이 생성됩니다. 테마 contract를 사용하면 타입 검사를 거치는 여러 테마를 지원할 수 있습니다. styleVariants와 recipe는 컴포넌트 변형을 깔끔하게 처리합니다. 실행 시간 비용이 없으므로 성능이 중요한 애플리케이션에 적합합니다.

자주 묻는 질문

“Vanilla Extract: 런타임 없는 CSS-in-JS” 강의는 무료인가요?

네 — “Vanilla Extract: 런타임 없는 CSS-in-JS” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Vanilla Extract: 런타임 없는 CSS-in-JS”에서 뭘 배우나요?

빌드 시 정적 CSS 파일을 생성하는 Vanilla Extract로 타입 안전 CSS를 작성합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Vanilla Extract: 런타임 없는 CSS-in-JS” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기