TypeScript

[storybook] storybook 컴포넌트 설계 및 문서화하는 법 (+ Emotion, Typescript)

Storybook 폴더 구조 스토리북을 설치하면 stories 폴더가 새로 생겨있을 것이다. 이 sotries 폴더 하위에에 문서화할 컴포넌트 명을 넣어 다음과 같이 stories 파일을 새로 생성한다. [컴포넌트명].stories.ts파일 '이미 components 폴더에 만들어놓은 컴포넌트 중 문서화를 해줄 컴포넌트를 stories 파일에서 import해온다 -> 그에 대해 서술하는 내용을 코드로 적는다'가 바로 스토리 작성이다. 컴포넌트 설계하기 Storybook을 실행하면 들어있는 예제 중 Button 컴포넌트를 뜯어보며 재사용하기 좋은 컴포넌트, 그리고 Storybook으로 문서화하기 좋은 컴포넌트는 어떻게 설계하면 되는지 알아보자. 1. 해당 컴포넌트의 특성 파악하기 이 버튼이란 녀석은 버튼 ..