<a href="https://www.maeil-mail.kr/question/111" target="_blank" rel="noopener nofollow">👉🏻원문 보기</a>
<blockquote>
프론트엔드와 관련된 질문이에요.
</blockquote>
제로 런타임 CSS는 CSS-in-JS의 단점을 보완하기 위해 등장한 방식입니다. 기존에 많이 쓰이던 CSS-in-JS 방식은 스타일을 컴포넌트 안에서 작성해서 동적으로 생성합니다. 이러한 방식은 런타임에서 CSS를 만들다 보니 성능 문제가 생길 가능성이 있습니다.
예를 들어, 사용자가 페이지를 로딩할 때마다 CSS를 동적으로 계산해서 DOM에 삽입하면, 브라우저가 이를 처리하는 데 시간이 걸리게 됩니다. 특히, 앱이 커질수록 성능이 떨어질 수 있고, CSS를 캐싱하기도 어려운 문제가 존재합니다. 그래서 나온 방식이 빌드 시점에 CSS를 미리 다 만들어 놓는 제로 런타임 CSS 방식입니다.
기존 CSS-in-JS 방식은 사용자가 앱을 실행할 때 CSS를 동적으로 생성했는데, 이 과정이 성능에 부담을 주는 경우가 있었습니다. 특히 렌더링이 복잡한 페이지에서 스타일 생성이 많아질수록 느려질 가능성이 큽니다. 동적으로 생성되는 CSS는 정적인 파일처럼 브라우저가 캐싱할 수 없어서, 매번 렌더링 될때마다 새롭게 계산해야 하기도 합니다. 또한 런타임에서 필요한 모든 스타일을 생성하려다 보니, 사용되지 않는 CSS 코드까지 포함되는 경우가 발생합니다.
반면에 제로 런타임 CSS는 앱이 실행되기 전에, 빌드 시점에 모든 스타일을 정적인 CSS 파일로 변환하는 방식입니다. 이렇게 된다면 런타임에 추가로 CSS를 생성하지 않으니 로딩 속도가 더 빠르고, 사용되지 않는 CSS는 빌드 과정에서 제거되기 때문에 최종 파일 크기가 작아집니다.
<h2>제로 런타임 CSS의 단점은 무엇이 있나요? 🤔</h2>
런타임에서 동적으로 생성해야 하는 스타일을 구현하기가 까다롭습니다. 예를 들어, 사용자 입력값에 따라 스타일이 달라지는 경우엔 추가 로직을 작성해주어야 합니다. 또한 스타일을 빌드 시점에 모두 처리해야 하다 보니, 빌드 시간이 기존보다 길어질 수 있습니다.
<h2>추가 학습 자료를 공유합니다.</h2>
<a href="https://vanilla-extract.style/" target="_blank" rel="noopener nofollow">제로 런타임 css중 하나인 vanilla-extract의 공식 홈페이지</a>

이 시대를 살아가는 모든 대한민국 개발자들이 이곳에 모일때까지.

Shout out to all my Korean devs out there!
Stay wicked, guys! 

제로 런타임 css란 무엇인가요?