CSS in JS 라이브러리에서 Typesafe하게 Theme 관리하기

간단 소개

CSS in JS 라이브러리 emotion과 Typescript를 사용하여 Typesafe하게 Theme를 관리하고 확장하는 방법을 제시합니다.

AI Summary

CSS in JS와 Typescript를 이용한 Theme 관리
- 데브시스터즈는 React, GatsbyJS, Typescript를 사용하여 웹 사이트를 관리하며, 스타일링 방법론으로 CSS in JS를 사용합니다.
- emotion 라이브러리를 사용하여 object나 template literal로 스타일을 정의하고, React의 Context API를 기반으로 ThemeProvider를 제공합니다.
Typesafe한 Theme 확장을 위한 makeTheme 유틸리티
- Typescript 환경에서 ThemeProvider에 전달되는 theme 속성값에 대한 타입 검사를 위해 Theme 타입을 정의하고 확장합니다.
- React Context API를 사용하여 ThemeProvider를 확장하고, makeTheme 함수를 통해 부모 ThemeProvider의 테마 타입을 병합합니다.
- emotion 11버전 마이그레이션 시 변경된 타입 정의에 맞춰 CreateStyled 인터페이스와 StyledTags 타입을 확장하여 기존 코드를 유지합니다.