CSS

[React] emotion.js 소개 및 사용법 (feat. CSS-in-JS)

2025.01.07

CSS-in-JS 라이브러리 중 하나인 Emotion은 빠르고 유연하며 강력한 스타일링 솔루션을 제공합니다. React와 같은 JavaScript 기반 프레임워크에서 CSS를 더욱 효율적으로 관리할 수 있도록 설계되었으며, 개발자 경험을 극대화하는 도구로 널리 사랑받고 있습니다. Emotion CSS란?Emotion은 JavaScript를 사용하여 CSS를 작성할 수 있게 해주는 CSS-in-JS 라이브러리입니다. 기존의 CSS 파일 관리의 복잡함을 줄이고, 컴포넌트 기반 스타일링을 통해 코드 재사용성과 유지보수성을 높이는 데 초점이 맞춰져 있습니다.주요 특징 1. CSS-in-JS: JavaScript 파일 내에서 CSS를 작성할 수 있습니다. 2. 스타일 컴포넌트 생성: CSS 클래스 이름 충돌을 ..

🎒내가방/📒React

[React] 바닐라 익스트랙트와 CSS

2025.01.04

바닐라 익스트렉트(Vanilla Extract) 소개바닐라 익스트렉트(Vanilla Extract)는 CSS를 JavaScript처럼 사용할 수 있는 CSS-in-JS 라이브러리입니다. 기존 CSS 작성 방식의 단점을 보완하고 JavaScript의 장점을 활용해 스타일링을 더욱 체계적이고 효율적으로 관리할 수 있도록 돕습니다. 이 라이브러리는 스프링클(Sprinkles), 디파인드 프러퍼티(DefineProperties) 등의 함수를 통해 스타일 속성을 선언하고 재사용할 수 있는 기능을 제공합니다. 이를 통해 CSS 클래스 이름 충돌, 코드 중복, 관리 어려움 같은 문제를 해결하며, 더 나아가 타입 안정성과 제로 런타임(zero runtime)이라는 강력한 특징을 제공합니다. 바닐라 익스트렉트의 장점 1..

[React] emotion.js 소개 및 사용법 (feat. CSS-in-JS)

[React] 바닐라 익스트랙트와 CSS

티스토리툴바