Storybook 1

storybook 장점

1) 디자이너와의 커뮤니케이션
디자인이 나오면 디자이너에게 보여주면서 커뮤니케이션을 하는데 stroybook이 디자이너와의 커뮤니케이션을 더 원할하게 할수 있다고 생각한다. 디자이너도 웹색상을 직접 넣는거랑 볼때랑 다른데 웹사이트를 띄우고 함께 보면서 하면 서로에게 더 좋다고 생각을 한다.

2) 문서작성의 편리함
storybook을 짜게되면 해당 docs가 알아서 해당 컴포넌트의 API 문서를 심플하고 간편하게 만들어준다.

그 이외에도 storybook을 이용하면 story component에서 어떤 프로퍼티를 입력했는지를 볼 수 있고, onclick, onchange등 어떤식으로 넘겨주는지 알수있다.

storybook이란

스토리북(Storybook)을 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 된다. 각 Story는 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를 보여주는 하나의 예시라고 한다.

storybook 설치방법

기존 프로젝트에 추가할때

1. npx sb init --builder webpack5
2. yarn add @storbook/components --dev
3. yarn stroy
   

이렇게 뜨면 성공!!

4. 해당 localhost:6006 으로 들어가면 성공적으로 뜨는거 확인할수있다!

사용방법들은 다음 포스팅에서~!