디자인 시스템

스토리북의 공식문서가 너무 복잡해서 더 간단하게 세팅 과정을 정리했습니다. decorator와 parameter를 바탕으로 스토리를 재사용하는 방법을 자세히 알아보았습니다.

storybook을 사용하며 현실적으로 마주칠 수 있는 문제를 간단하게 직접 구현해보았습니다. storybook의 각 기능이 어떤 목적이고, 어떻게 사용할 수 있는지 practical 한 how-to를 정리하고자 했습니다.

디자인 시스템을 구축하는 데 있어서 개발자의 역할은 뭘까요? MUI의 소스 코드를 바탕으로 이들이 디자인 시스템을 구축한 방법을 정리하며 자문자답해 보았습니다.

문득 간단히 import 만으로 멋진 컴포넌트를 리턴해주는 MUI의 내부 작동 원리가 궁금해져서 소스코드를 뜯어보기 시작했습니다. theme 이라는 멋진 객체에 어떻게 접근할 수 있을까요?

MUI의 theme 과 같이, 여러 수준에서 접근 가능한 '값들의 집합'은 어떻게 만들고 적용할 수 있는지 궁금했습니다. 어떻게 prop도, styled도, 컴포넌트도 이 theme 을 사용할 수 있게 만든 걸까요?

emotion은 Context API를 기반으로 여러 컴포넌트가 theme 객체에 쉽게 접근할 수 있도록 해 줍니다. 이 theme이 적용되는 구체적인 원리를 소스코드와 함께 알아보았습니다.