완전한 ZERO COST CSS-IN-JS, Devup-UI

1. 런타임 vs Zero Runtime CSS-in-JS

런타임 CSS-in-JS(styled-components, Emotion): 컴포넌트 렌더 시 JS가 스타일 문자열을 파싱해 `<style>` 태그에 동적 삽입. JS 번들에 스타일 엔진이 포함되고 렌더마다 계산 비용 발생. Zero Runtime(Vanilla Extract, Linaria): 빌드 타임에 CSS 파일로 추출, 런타임에 CSS 파일만 로드. JS 번들에 스타일 코드 없음.

핵심 용어

2. Atomic CSS 방식의 이점

Tailwind처럼 각 CSS 속성마다 단일 클래스를 생성(예: `m-4`, `flex`)하면 CSS 파일이 커지지 않습니다. 어떤 컴포넌트를 추가해도 이미 있는 유틸리티 클래스를 재사용하기 때문입니다. Devup-UI는 CSS-in-JS 문법으로 작성하면 빌드 타임에 Atomic CSS로 변환해 최적의 CSS 파일 크기를 보장합니다.

핵심 용어

3. Babel 플러그인으로 스타일 추출

Babel 플러그인은 AST를 순회하며 CSS-in-JS 함수 호출을 정적 분석합니다. 정적으로 분석 가능한 값(리터럴 문자열, 숫자)은 빌드 타임에 CSS로 추출하고 클래스명으로 대체합니다. 동적 값(변수, 조건식)은 CSS 변수(Custom Properties)로 위임하거나 런타임 처리로 폴백합니다.

핵심 용어

Q1. CSS-in-JS의 장단점과 Zero Runtime CSS-in-JS가 등장한 이유를 설명해주세요.

힌트

[감점 답변] 정의만 반복하거나 "CSS-in-JS의 장단점과 Zero Runtime CSS-in-JS가 등장한 이유를 설명해주세요."에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] CSS-in-JS 장점: JS 변수/로직을 스타일에 직접 사용, 컴포넌트 범위 스타일, 동적 스타일 적용이 쉬움. 단점: 런타임 비용, 서버 컴포넌트 미지원(Next.js App Router에서 Emotion 제한). Zero Runtime 등장 이유: SSR 성능 문제와 React Server Components 호환성.

Q2. Vanilla Extract와 Tailwind CSS의 차이는 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "Vanilla Extract와 Tailwind CSS의 차이는 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] Vanilla Extract: TypeScript로 스타일을 작성하고 빌드 타임에 CSS 파일로 추출. 타입 안전성이 있고 동적 스타일을 CSS 변수로 처리. Tailwind: 미리 정의된 유틸리티 클래스를 HTML에서 직접 사용, 커스텀 스타일은 클래스를 조합. 공통점: 둘 다 런타임 비용이 없고 CSS 파일로 최종 출력됨.

Q3. Next.js App Router(서버 컴포넌트)에서 CSS-in-JS를 사용할 수 없는 이유는 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "Next.js App Router(서버 컴포넌트)에서 CSS-in-JS를 사용할 수 없는 이유는 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 서버 컴포넌트는 서버에서 HTML로 렌더되며 클라이언트 JS(React context 포함)를 사용할 수 없습니다. 런타임 CSS-in-JS는 React context에서 스타일 시트를 수집하는데, 서버 컴포넌트에서는 이 컨텍스트가 없어 스타일이 누락됩니다. Zero Runtime(Vanilla Extract 등)은 빌드 타임에 CSS 파일로 추출되어 서버 컴포넌트에서도 정상 동작합니다.