프로젝트에 타입스크립트와 스토리북 적용하기

타입스크립트

 

기존의 CRA 프로젝트에 타입스크립트를 적용해보자.

yarn add --dev typescript @types/react @types/react-dom

tsc --init

 

1. yarn 패키지 매니저를 사용해서 타입스크립트 의존성을 추가하고 패키지를 설치한다.

2. 프로젝트에 대한 초기 TypeScript 설정 파일(tsconfig.json)을 생성한다.

3. tsconfig.json 파일이 추가되었다면  기존의 jsconfig.json 파일은 삭제한다.

 

 

스토리북

https://storybook.js.org/docs/get-started/install

Install Storybook • Storybook docs

yarn add styled-components@5.3.6

yarn add @types/styled-components

npx storybook@latest init

npm run storybook

 

1. styled-components 사용하여 css 적용하려고 한다. yarn add 명령으로 패키지를 설치한다.

2. styled-components에 대한 TypeScript 타입 정의를 제공하는 패키지를 설치한다.

3. storybook 최신 버전을 프로젝트에 추가하고 설정 파일을 생성한다.

4. package.json script에 storybook 실행이 추가되어 있다. npm run 명령어로 스토리북을 실행한다.

 

StyledButton 예제를 한 번 따라 만들어봤다. 아래와 같이 실행되면 완료 !