728x90
CSS
-
[React] Vanilla Extract로 개발자 경험, 사용자 경험 모두 챙기자. (서버컴포넌트와 css-in-js)카테고리 없음 2023. 12. 27. 22:46
Vanilla Extract로 개발자 경험, 사용자 경험 모두 챙기자. emotion이나 styled-components와 같은 css-in-js 라이브러리들이 많은 인기가 상승 곡선을 그리고 있다. 이렇게 많은 인기를 얻고 있는 css-in-js 라이브러리는 무엇일까? css-in-js란? css-in-js는 어플리케이션의 스타일을 js로 작성하여 적용하는 것을 의미한다. 동작 원리를 간략히 설명하면 다음과 같다. 1. 개발자가 js로 스타일을 정의한다. 2. 라이브러리가 각 스타일에 대한 고유한 class name을 생성한다. 3. 생성된 스타일과 class name을 기반으로 style sheet를 생성한다. 4. 의 형태로 DOM에 주입한다. 이러한 css-in-js는 컴포넌트 기반 스타일링이 가..