TIL 2022-01-13 CSS in JS, ParserOptions.project error

CSS in JS

https://speakerdeck.com/vjeux/react-css-in-js

React: CSS in JS

2014년의 발표라 예전 내용이 있지만 단순 CSS가 가지고 있었던 문제점과 CSS-in-JS가 도입되게 된 배경에 대해서 알려고 읽어봤다.

 

Whyt CSS in JS

기존의 CSS에서는 총 7가지 문제가 있었다.

 

1. Global Namespace

 

css들은 모두 전역 Namespace를 가진다. 자주 쓰는 UI 라이브러리인 Bootstrap 같은 경우는 이미 600개의 Global을 가지게 된다.

 

.button/container  <- 이런 식으로 /을 붙여서 local variable을 만들수 있음

 

 

2. Dependency

 

모든 CSS를 합쳐 하나의 파일로 bundle하고 여러 파일로 나누어주어야해서 Dependency를 다뤄야했다.

 

이전까지는 requireCSS을 통해서 필요한 파일을 넣어줘야했다.

 

그러나 이제 React는 cx을 통해 requireCSS call을 자동으로 주입해줄수 있음. -> 해결 가능

 

3. Dead Code Ellimination

 

만약 .button.container 라는 dead code를 지우는 상황이라고 하면, 모든 코드의 .button.container 호출을 찾아 지운 후에 지울 수 있다.

 

4. Minification

클래스 이름의 최소화 문제

 

5. Sharing Contstant

CSS와 js 상에 동일한 상수값을 둬야하는 경우가 있다. 이런 경우 css variable의 값을 설정하고 각각 css, js 상에서 불러오는 것으로 해결할 수 있다.

 

여기까지의 문제들은 해결할수 있으나, 해결할 방법을 못찾은 문제들이 남아있음

 

위와 같은 경우 동일한 명칭이 두 파일에 들어가있는데, 보통은 후자가 이기는 것으로 처리됨.

 

그러나 비동기적으로 두 파일을 로딩하는 경우 로딩 순서에 따라서 property가 변할수 있음

 

7. Isolation

이렇게 하위 태그의 CSS를 설정하는 경우 Isolation이 꺠지고, 코드 리뷰할때 잡기 어려운 버그가 발생함.

 

 

CSS IN CSS와 CSS IN JS는?

 

CSS in Css

 

CSS Module은 CSS 클래스를 만들면 고유한 스코프를 가져 소스 안에서 클래스 이름이 중복되어도 문제가 생기지 않음.

CSS 전처리기는 CSS에 프로그래밍 개념을 적용할 수 있는 방법이다.

 

CSS in JS

 

말 그대로 자바스크립트에서 템플릿 리터럴과 CSS 기능을 적용할 수 있게 도와줌

CSS와 자바스크립트가 동일한 변수를 쉽게 사용할 수 있음

현재 사용중인 스타일만 적용됨

Isolation과 짧은 유니크 클래스 생성으로 인한 코드 경량화

단점으로는 자바스크립트를 CSS로 변환하는데에 따른 속도 저하, 번들 크기 증가, 추가 라이브러리 설치

 

 

CSS in JS 끼리의 비교

 

https://so-so.dev/web/css-in-js-whats-the-defference/

CSS-in-JS, 무엇이 다른가요?

 

ParserOptions.project error

Typescript 프로젝트에 있는 파일이 아닌 것을 lint하려고 할때

"Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser."

오류가 나타났다.

 

예전에는 eslint측에서 허용했지만 성능상의 이유로 오류가 나게 바꾸었는데, 해결하는 방법은 실제 tsconfig을 extend하면서 lint하려는 파일이 모두 들어간 별도의 tsconfig을 생성하는 것이다.

 

{
	"extends": "./tsconfig.json",
	"exclude": ["node_modules", "test", "public"],
	"include": ["src/**/*", ".eslintrc.js"]
}

이런 식으로 별도의 파일을 추가하여 수정 가능했다.