typescript 2

타입스크립트를 이용해 조건부로 프롭 받기

여기 Chip라는 커스텀 컴포넌트가 있다. // 속성을 간결하게 표시할때 사용하는 Chip 컴포넌트 내용 이 Chip 컴포넌트를 구현하며 variant라는 prop을 통해 Chip의 배경색과 글자색을 지정해주는 일종의 프리셋을 구현했다. 내용 끝이 아니다. 사실 이 컴포넌트는 background-color와 text-color도 prop으로 받을 수 있다. 그러면 아래와 같이 컴포넌트를 사용할 수 있게 된다. 이 코드를 처음 보는 사람은 어떻게 생각할까. 왜 variant prop은 따로 존재하며, variant와 backgroundColor 혹은 textColor가 동시에 적용되었을때 어떤게 적용될것인가 등등... 결국 Chip 컴포넌트를 열어보는것을 참지 못하고 분석하기 시작할 것이다. 이 문제를 해..

개발/Typescript 2023.05.17

Storybook에서의 Typescript

공식문서의 일부 내용을 번역 및 재해석한 글입니다. Storybook에서 Typescript 사용하기 Storybook은 기본적으로 Typescript를 내장하고 있어, 별도의 설정 없이도 Typescript 프로젝트에 사용할 수 있다. 기본 설정 기본적으로 ts 변환을 위해 babel-loader를 사용하고, 옵션으로 타입 체킹을 위한 fork-ts-checker-webpack-plugin을 제공한다. 더보기 [fork-ts-checker-webpack-plugin?] 간단하게 말하면 기본적으로 ts-loader, babel-loader와 같은 것들을 이용해 Typescript 컴파일을 수행하게 되면, 타입 변환과 타입 검사 과정을 수행하게 된다. 이때, 이 두 과정이 순서대로 이뤄지기에 컴파일하는데 ..

개발/Storybook 2022.03.18