핵심 요약
데브시스터즈가 CSS in JS(Emotion) 테마를 타입 안전하게 확장하는 makeTheme를 공개했습니다.
구현 방법
- BaseTheme과 추가 Theme의 타입을 교차 병합(NewTheme)으로 확장
- NewTheme으로 _styled와 StyledTags를 타입으로 확장
- 중첩된 ThemeProvider로 하위 테마를 유연하게 확장
- Theme 확장을 위한 재사용 가능한 패턴을 프로젝트 구조에 맞춰 재사용 가능하도록 구성
- TS가 theme 속성 타입을 엄격히 검사하도록 설정
주요 결과
- 타입 안전성과 중첩 확장을 통해 Fractal 패턴 구조에서도 일관된 스타일링 가능
- emotion 11 마이그레이션에서도 makeTheme으로 호환성 유지
- 재사용성·유지보수성이 향상되어 팀 협업에 유리
