[프로젝트 돌아보기 프로젝트] 두 번째, Vanilla-extract를 사용한 이유?

 

이 프로젝트에서 Vanilla-extract를 사용한 이유?

Vanilla-extract는 CSS-in-JS 라이브러리의 대안으로, 스타일 시트를 TypeScript 또는 JavaScript에서 작성할 수 있게 해주면서도, 런타임에서 추가 작업 없이 순수 CSS 파일로 컴파일하는 방식을 제공한다. 다음과 같은 주요 이점을 지닌다.

1. 타입 안정성: TypeScript를 사용하여 스타일을 작성할 수 있으므로, 스타일과 관련된 속성들에 대한 자동 완성, 타입 검사 등의 이점을 누릴 수 있다.

2. 제로 런타임(Zero-runtime): 스타일이 빌드 타임에 CSS 파일로 컴파일되므로, 런타임 시 추가적인 JavaScript 처리가 필요 없어 앱의 성능이 개선된다.

3. 스코프 지정: 생성된 클래스 이름은 고유하게 스코핑되어, 스타일 충돌을 방지한다.

4. 코드 스플리팅: CSS 파일은 JavaScript 번들에서 분리되어 로드 시간이 단축될 수 있다.

5. 테마 지원: CSS 변수를 사용하여 테마를 쉽게 구현할 수 있다.

 

 

제로 런타임의 의미

제로 런타임은 스타일이 클라이언트 측에서 처리되는 작업 없이, 빌드 과정에서 완전히 CSS로 컴파일된다는 의미. 이는 런타임에 JavaScript로 스타일을 계산하거나 적용하는 작업이 전혀 없다는 것을 뜻하며, 이로 인해 성능 개선 및 초기 로드 시간 단축이 가능해진다.

 

CSS-in-JS의 대안 여부

Yes

대안으로 사용될 수 있다. CSS-in-JS는 일반적으로 런타임에 스타일을 적용하는데, 이는 JavaScript 오버헤드를 발생시킬 수 있다. 반면, vanilla-extract는 빌드 타임에 CSS로 컴파일되어 런타임에 추가 리소스를 요구하지 않으므로, 성능이 민감한 애플리케이션에서 유용.

이러한 접근 방식은 개발자가 JavaScript의 편리함을 유지하면서도 런타임 성능 저하 없이 CSS를 관리할 수 있게 해 줌. 따라서, vanilla-extract는 특히 성능 최적화가 중요한 대규모 프로젝트에서 CSS-in-JS의 훌륭한 대안이 될 수 있다.

 

No

충분한 대안이 되지 않는다. 런타임 스타일링의 한계가 있어 완전한 대안으로 보기 어렵다. 새로운 css 변수를 런타임에 생성하는데 제한이 있으며, CSS in JS 방식의 외부 라이브러리 사용시 바닐라 익스트랙으로 적용해둔 스타일이 라이브러리 스타일로 런타임에 덮어씌워지는 문제가 있기에 아직 완전한 대안이 되지 못한다고 생각한다.