# npm
$ npm run storybook
# yarn
$ yarn storybook
package-lock.json, yarn.lock, node_modules 삭제
npm cache clean --force
npm install
- 스토리북은 UI 컴포넌트를 독립적인 환경에서 그려볼 수 있는 툴 중 하나이다.
- 최초 개발자뿐만 아니라 코드리뷰나 수정을 하는 다른 개발자나 디자이너도 쉽게 확인할 수 있는 장점이 있다.
- 컴포넌트 구현과 스토리 작성을 병행하면 스토리로 옮기는 게 예상대로 되지 않을 때 저절로 설계의 결함을 발견하게 될 수 있다.
- 다른 컴포넌트와 의존성이 낮아야 독립적인 환경에서 그리는 것이 가능하고, 재사용이 쉬워야 다른 곳에서도 그릴 수 있기 때문에 스토리 작성은 리팩토링 효과를 부수적으로 얻을 수 있다.
- 하나의 컴포넌트가 많은 일을 할 떄
앱에서는 잘 작동되던 컴포넌트를 스토리북으로 옮겼을 때 에러 메세지를 만났다. 스토리북은 앱과는 다른 독립적인 환경이기 때문에 앰에서 사용한 기능을 스토리북에서도 이해하고 처리하기 위한 작업이 필요하다.
데이터가 필요하다던지 상위 컴포넌트와 연관 되어 독립된 컴포넌트로 스토리로 옮기기가 어려웠다.
- 컴포넌트가 다른 컴포넌트와 의존성을 가질 때
컴포넌트 아래에 있을 때 문제가 없었지만 독립시켜 스토리에 넣었더니 다르게 그려지는 경우가 있었다 부모의 스타일에 의존 하거나 스토리와 앱에서의 여백이 달라 예상치 못한 결과들이 나왔다.
이런한 것들을 주의해서 설계가 필요하다.
(에러 만날 때마다 리드미 추가 예정)