🔥 Trouble Shooting - 포트폴리오를 만들다 만난 JIT

🚨 문제 상황

포트폴리오를 만들며, 컴포넌트 분리를 하려다 props로 받은 색상을 동적으로 tailwind 클래스에 적용하려 했는데.. 스타일이 적용되지 않는 문제가 발생했다.

💻 문제 발생 코드

// ❌ 작동하지 않는 코드
const SkillTechBlock = ({ color, text }: Props) => {
  return (
    <h3 className={`text-${color}-400`}>  // 스타일 적용 안됨
      {text}
    </h3>
  );
};

// 사용: <SkillTechBlock color="blue" text="Frontend" />

🤔 원인 분석

Tailwind JIT(Just-in-time)의 컴파일 방식 때문이였다...
일반적으로 Tailwind는 빌드 시점에 코드를 스캔해서 사용된 클래스만 CSS에 포함시키는 방법이다. 즉 text-${color}-400같은 템플릿 리터럴은 런타임에 생성되므로 빌드 시점에 인식이 불가능 했다. 관련하여 공식문서를 살펴보니 역시 친절하게 기제되어 있었다.

사실 빌드 시점과 런타임, 의미적으로는 알지만.. 한번 더 집고 가보려 한다..

1. 컴파일

내가 쓴 코드를 컴퓨터가 이해할 수 있게 바꿔주는 과정이라고 보면 된다.
즉, 사람이 쓰는 언어 → 기계어로 변환하는 것!
자바스크립트에서 많이 쓰는 컴파일러로는 Babel, Webpack, Vite 같은 게 있는데..
예를 들어 Babel은 최신 JS 문법을 구형 브라우저에서도 쓸 수 있게 바꿔줘서, 브라우저 호환성 문제를 해결해주는 역할을 할 수 있다.

2. 빌드

컴파일된 코드에다가 이미지, 폰트, 설정 파일 같은 리소스까지 싹 다 묶어서 하나로 패키징하는 과정을 빌드라고 한다.
쉽게 말해서 실행 가능한 완성본을 만드는 것을 뜻하고
Java에서는 .jar, .war 같은 파일, 윈도우에서는 .exe 같은 걸로 나오기도 하고,
프론트에서는 최적화된 HTML/CSS/JS 파일을 만들어서 배포할 준비를 끝내는 거라고 보면 될 것 같다.

3. 런타임

프로그램이 실제로 실행되는 순간!
예를 들어 웹사이트를 브라우저에서 열었을 때, 그 시점부터가 런타임이라고 볼 수 있는 것이다.
이때 문제가 생기면 ‘런타임 에러’라고 부르는 것이 그 이유이다.

정리하자면..!!
Tailwind: 정적 분석 → "빌드 시점"에 클래스명 필요
템플릿 리터럴: 동적으로 → "런타임 시점"에 문자열 결정됨

Tailwind Css 공식문서

동적 클래스 이름

Tailwind는 소스 파일을 일반 텍스트로 스캔하므로 사용하는 프로그래밍 언어에서 문자열 연결이나 보간을 이해할 수 없습니다.

❌ 클래스 이름을 동적으로 구성하지 마십시오

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

⭕️ 항상 완전한 클래스 이름을 사용하세요

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

부끄럽게도 내가 사용하려 했던 방법이 사용하지 말라고 공식문서에 기제되어 있었었다..;;

❌ 동적으로 클래스 이름을 작성하기 위해 props를 사용하지 마세요

function Button({ color, children }) {
  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}

---

✅ 해결 방법

공식문서에서 권장하는 방법인 props를 정적 클래스 이름에 매핑하도록 하여 해결하였다.

const colorTextVariants = {
    cyan: 'text-cyan-400',
    green: 'text-green-400',
    purple: 'text-purple-400',
  };
...
<h3 className={`text-base font-semibold ${colorTextVariants[color]} md:text-lg`}>
	{text}
</h3>

🎯 해결 포인트

빌드 시점 vs 런타임의 차이를 이해해야 해당 문제를 인식할 수 있었다.(핵심)
TailWind는 텍스트 기반으로 스캔하기 때문에 완전한 클래스명이 코드에 존재해야 했다.
동적 생성보다는 미리 정의된 매핑 방식이 TailWind 공식문서에서 권장하는 방식이다.

📝 배운 점

공식문서를 잘 확인하자!
컴포넌트를 설계할 때, props 타입을 미리 제한하고 정의하는것이 좋을듯 하다.
개발과정에서 아 그냥 이렇구나가 아니라.. 공식문서를 찾고 그 과정을 이해하는 것이 내가 앞으로 가져야할 마인드

🔄 개선된 점

Before: 무작정 문자열 템플릿으로 동적 클래스 생성 시도

className={`text-${color}-400`}

After: 타입 안전성까지 고려한 컴포넌트 설계

type ColorType = 'cyan' | 'green' | 'purple';
const colorTextVariants: Record<ColorType, string> = {
  cyan: 'text-cyan-400',
  green: 'text-green-400', 
  purple: 'text-purple-400',
};

이제 잘못된 color prop을 넘기면 타입스크립트에서 미리 잡아준다!

💡 추가 TIP

https://tailwindcss.com/docs/detecting-classes-in-source-files
https://v2.tailwindcss.com/docs/just-in-time-mode