개탕 IT FACTORY

서론 사실 나는 CSS-in-JS 라이브러리를 굉장히 좋아한다. (Emotion, styled-componets) 이유중 하나라면 다들 스파게티 코드라고 불리우는 JS 파일내에서 CSS를 처리할수 있으며 (colocation), 동적으로 CSS 처리도쉽기 때문에 좋아하였다. 그런데 최근 React 18에서 Server-component를 지원하기 시작하였고, 기존 CSR → SSR로 판도가 변하면서 많이 달라졌는데 그러면서 기존에 run-time 중에 생성한 CSS-in-JS는 자연스럽게 사용이 어려워졌다. (사실 태생부터 run-time과 함께 만들어지게 되었는데 SSR 지원은 굉장히 어려운 일이 였을 것이다.) 그러다가 대체제로 다양한 선택지가 있었는데 Tailwind는 굉장히 인기가 좋았지만 개인적..

개요 기존에 Polymorphic 컴포넌트와 Compound 컴포넌트에 대해서 정리해보았다. 디자인 시스템 구축에 꼭 필요한 과정은 아니나 위의 컴포넌트 제작과정을 알게 된다면 더쉽고 빠르게 디자인 시스템을 구축할수있다. 이번엔 디자인시스템의 핵심이라고 할 수 있는 디자인 토큰에 대해서 알아 볼까 한다 . 💡 이 글은 디자이너나 피그마 관련된 설명이 아닌 단순한 디자인 시스템 구축을 위한 개발자를 위한 글임을 참고 바랍니다. 디자인 토큰이란? 디자인 토큰 개념을 대중화 시킨 ‘세일즈포스(Salesforce)’의 Lightning Design System에서 디자인 토큰 개념을 설명하고있다. Design tokens are the visual design atoms of the design system —..