<aside> ℹ️ 해당 글은 사내 발표를 진행하기 위한 형태의 글로 작성되었습니다.

</aside>

<aside> ℹ️ PPT: https://slides.com/wjl/deck-74a474/fullscreen

</aside>


Contents


스크린샷 2022-05-29 오후 7.49.05.png


CSS-in-JS 개발 방법론


스크린샷 2022-05-29 오후 7.50.03.png

1. 정의

CSS-in-JS란? 단어 그대로 자바스크립트 기반 CSS 개발 방법론을 말합니다. SCSS를 사용하면서 CSS 를 사용하는 것 보다 반복적인 작업을 덜해서 편했기 때문에 그것만으로도 CSS-in-CSS 방법론에 대해 처음엔 만족 했었습니다. 사실 CSS-in-JS는 방법론 중 하나이기 때문에 본인의 프로젝트에 적합하지 않고 생산적 이지 않다고 판단 된다면 해당 방법론을 고수할 필요는 없다고 생각합니다. 그래서 저 또한 예전부터 styled component를 알고 있었지만 개인적으로 js 와 css가 섞여 있으면 가독성이 떨어져 보여서 좋아하지 않았기 때문에 더더욱 사용할 필요성을 느끼지 못했었죠.

스크린샷 2022-05-29 오후 7.50.17.png

2. 문제점 공론화

우리는 CSS-in-CSS 방법론에 공통된 문제점을 겪고 있었습니다. 하지만 공론화되진 않았습니다. Facebook Front-end Engineer Vjeux는 2014년 React: CSS in JS 발표를 통해 본인이 CSS 관리를 하면서 어려웠던 점 7가지를 공론화하였습니다.

스크린샷 2022-05-29 오후 7.50.34.png

3. Inline Style ≠ CSS-in-JS

스크린샷 2022-05-29 오후 7.51.01.png