styled-component (3) 썸네일형 리스트형 CSS #6 - CSS-in-JS (2) Styled-Component with Storybook CSS-in-JS !== Inline Styles styled-component를 작성하기 위해서 TTL로 작성하다 보면 종종 inline style로 작성하는 것처럼 느껴질 때가 있습니다. 그러나 만약 inline style과 같다면 CSS-in-JS를 대신하지 않았을까요? inline style에서 할 수 없는 부분들에 대해서 CSS-in-JS가 더 많은 기능을 제공합니다. inline-style과 styled-component는 서로 비슷해 보입니다. // styled-component export const StyledButton: React.FC = ({ content, handleClick, margin }) => { return ( handleClick()} margin={margin}> {.. CSS #5 - CSS-in-JS (1) Pros and Cons 시작하며 npm trends (https://www.npmtrends.com/emotion-vs-sass-loader-vs-styled-components)라는 사이트에서 SASS와 CSS-in-JS들의 다운로드 수를 비교해서 제공하는 곳이 있습니다. emotion, styled-components, JSS, aphrodite, radium, glamorous, styletron, ... 등 많은 선택지가 존재하는 CSS-in-JS는 다운로드 수가 계속 증가하는 추세에 있습니다. 각각의 사용 방식에 대해서 모두를 설명드릴 수는 없겠지만 공통적으로 담겨 있는 의도와 원리에 대해서 말씀드리고자 합니다. 많이 알려진 styled-components에 대해서 먼저 다뤄 보고, 차후에 Emotion을 정리해 보도.. CSS #3 - SASS (2) with CSS Module CSS potential danger 저번 시간에 SASS의 장점에 대해서 소개했습니다. SASS를 통해서 CSS를 더 쉽게, 그리고 가독성 있게 작성할 수 있습니다. 또한 번들러 / 전처리기의 결과물이 결국은 CSS파일과 같기 때문에 컴파일(build / deploy)을 하는 시간을 제외하면 같은 성능을 제공할 수 있습니다. 그러나 다음과 같은 CSS파일을 작성할 때 개발자가 신경을 써야 하는 부분은 해소되지 못했습니다. CSS override ansrlm.tistory.com/19 글의 1 - 6)을 보시면, CSS파일에서 마지막 선언이 가장 높은 우선순위를 가집니다. 자바스크립트 파일들과 CSS 파일들은 성능을 위해서 하나의 자바스크립트 파일과 하나의 CSS파일, 혹은 특정 비즈니스 요건에 따라서 .. 이전 1 다음
