![]()
이 프로젝트에서 Vanilla-extract를 사용한 이유?Vanilla-extract는 CSS-in-JS 라이브러리의 대안으로, 스타일 시트를 TypeScript 또는 JavaScript에서 작성할 수 있게 해주면서도, 런타임에서 추가 작업 없이 순수 CSS 파일로 컴파일하는 방식을 제공한다. 다음과 같은 주요 이점을 지닌다.1. 타입 안정성: TypeScript를 사용하여 스타일을 작성할 수 있으므로, 스타일과 관련된 속성들에 대한 자동 완성, 타입 검사 등의 이점을 누릴 수 있다.2. 제로 런타임(Zero-runtime): 스타일이 빌드 타임에 CSS 파일로 컴파일되므로, 런타임 시 추가적인 JavaScript 처리가 필요 없어 앱의 성능이 개선된다.3. 스코프 지정: 생성된 클래스 이름은 고유하게..
![]()
CSS-in-JS CSS-in-JS란 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 스타일링 하는 방법을 말한다. 👍 장점 지역 스코프 스타일 일반 CSS를 작성할 때는 실수로 의도한 것보다 더 광범위하게 스타일을 적용하기 쉽다. 하지만 CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하여 이 문제를 완전히 해결한다. 코로케이션 일반 CSS를 이용할 경우 모든 리액트 컴포넌트가 src/components 에 있는 동안 .css 파일을 src/styles 디렉토리에 넣을 수 있다. 이런 경우 앱이 커짐에 따라 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어려워진다. 사용되지 않는 스타일을 쉽게 구분할 수 없어서 CSS에 사용하지 않는 코드가 표시되는 경우가 많아진다. ..
