[Korean FE Article] 우리가 CSS-in-JS와 헤어지는 이유
글 링크: https://bit.ly/3TfDAcS
소개
Emotion, styled-components 같은 자바스크립트 코드 내에 스타일을 작성하는 CSS-in-JS 방식은 과거보다 훨씬 많이 채택되고 사용되고 있는데요. 이 글은 Emotion 라이브러리의 두 번째 활발한 기여자인 Sam Magura가 자신이 현재 일하고 있는 Spot에서 왜 Emotion을 걷어냈는지에 대한 경험을 이야기하고 있습니다. 제목만 봐서는 기술 자체에 대한 부정으로 보일 수 있지만, 런타임 CSS-in-JS의 단점과 그에 대한 수치화된 근거를 제시하며 합리적인 방향으로 나아가는 필자의 경험을 볼 수 있는 좋은 글이라 생각합니다. CSS-in-JS 관련 기술을 도입할 생각이시라면 이 글에 장, 단점과 고려해야 할 점 모두가 담겨있으니 한 번 읽어보고 검토해보시는 건 어떤가요?
목차
CSS-in-JS가 뭔가요?
CSS-in-JS의 좋은 점, 나쁜 점, 못난 점
좋은 점
중립
나쁜 점
못난 점
성능 심층 분석
렌더링 내부와 외부의 직렬화
멤버 브라우저 화면 벤치마킹
프레임 그래프(Flamegraph) 분석하기
Emotion 없이 작성된 멤버 브라우저 벤치마킹
우리의 새로운 스타일링 시스템
유틸리티 클래스
컴파일 타임 CSS-in-JS에 대한 참고 사항
결론