EMOTION
-
PandaCSS vs Tailwind CSS vs Vanilla Extract 비교 분석Tip 2025. 5. 11. 19:45
RSC(React Server Component)의 출시와 Next.js의 App Router 전환 뒤 전통적인 CSS-in-JS 방식의 한계로 더욱 각광받고 있는 Tailwind CSS, Vanilla Extract, PandaCSS를 비교해 보겠습니다.1. CSS-in-JS의 한계와 새로운 접근법의 필요성과거에는 styled-components나 Emotion과 같은 CSS-in-JS 런타임 스타일 생성 방식은 런타임에 JS로 스타일을 생성·주입하는 과정은 성능 오버헤드로 이어지고, SSR(서버사이드 렌더링) 환경에서는 추가 설정이 필요하거나 FOUC 문제가 발생하는 등의 단점이 명확했지만, 편리함이라는 장점이 너무 컸기에 폭넓게 사용되었습니다. 하지만 Next.js 13의 App Router 도입 ..
-
StyleX 소개하기(feat. Next.js)Tip 2024. 10. 4. 19:01
최근 웹 개발에서 스타일링을 위한 기술은 빠르게 발전하고 있으며, 그중에서도 Meta(Facebook)가 개발한 StyleX는 성능 최적화와 유지보수를 쉽게 하기 위한 정적 컴파일 기반 스타일링을 제공하는 흥미로운 접근 방식을 보여주고 있습니다.CSS-in-JS vs StyleX: 차이점은 무엇일까?기존 CSS-in-JS 솔루션들은 컴포넌트별 스타일을 쉽게 관리하고 동적인 스타일링을 가능하게 해주는 장점을 가지고 있습니다.대표적인 예로는 styled-components, Emotion 등이 있으며, 각기 다른 방식으로 컴포넌트의 스타일을 JavaScript 코드에 통합해 편리함을 제공해 왔습니다.그러나 CSS-in-JS는 런타임에서 스타일을 생성하고 주입하는 과정에서 성능 저하나 FOUC(Flash of..