스토리북을 이용하면 리액트로 생성한 컴포넌트의 테스트 및 문서화를 간소화 시켜주는 효과를 얻는다.
정해진 스타일 가이드가 있다면, 디자인팀과의 협업에서 스토리북을 이용해 소통하고 수정사항등을 빠르게 체크하고, Mock 데이터를 이용해 실제 보여질 디자인을 빠르게 확인할 수 있다.
개발 환경 기술스택 TypeScript(4.9.3) + Vite(4.1.0) + React(18.2.0) + Styled-components(5.3.8) + Storybook(7.0.5)
아래 명령어를 이용해 setup을 해주면 사진과 같이 여러 devDependencies가 추가되고, 스토리북 실행 및 빌드를 위한 스크립트 storybook과 build-storybook이 추가된다.
npx sb init --builder @storybook/builder-vite
또한, 다음과 같이 .storybook 폴더와 src/stories 폴더가 생성되는데, src/stories는 샘플을 보여주는 것으로 현 프로젝트에서는 컴포넌트 각각에 stories.tsx를 정의할 것이기 때문에 삭제시켰다.
추가로, main.cjs 파일을 통해 스토리북 실행 시, 스토리 파일을 찾을 수 있도록 해야한다. 그래서 .storybook/main.cjs 에서 stories의 경로를 아래와 같이 수정했다. (src/components 경로의 모든 *.stories.@(ts|tsx|js|jsx))
module.exports = {
stories: ['../src/components/**/*.stories.@(js|jsx|ts|tsx)'],
...
};
이제 이를 실행시키기 위해 yarn storybook을 이용했으나 다음과 같은 에러를 바로 마주했다.
start-storybook: command not found
해결을 위해 https://github.com/storybookjs/storybook/issues/311를 참고해서 node_modules, yarn.lock 파일을 지우고 설치하고를 반복했으나 .. 해결이 되지 않았다. 여기서 좀 애를 먹었는데 stackoverflow에서 storybook을 automigrate 하는 코드를 찾아 이를 이용해 해결할 수 있었다.
해당 설명에 따르면 npx sb init 이후에는 반드시 sb를 새 버전으로 automigrate 시켜주어야 한다. migration 여부를 묻는 항목들은 전부 Y로 응답했고, 해결할 수 있었다.
npx sb@next automigrate
yarn storybook # 실행