Storybook 스토리북 환경 설정

Storybook은 프론트엔드 개발자가 UI 컴포넌트를 독립적으로 개발/테스트/문서화할 수 있게 하는 오픈소스 도구입니다. 

React, Vue, Angular, Svelte 등 다양한 프론트엔드 프레임워크와 호환되고, 디자인 시스템 관리와 협업 효율성을 높입니다. 

오픈소스이고 무료입니다. 

Chromatic 같은 부가 서비스를 함께 쓰면 배포 전 UI 변경 검증이 훨씬 수월해집니다. 

 

0. npm, node 버전 확인 

npm -v 

node -v 

가능하다면 두 버전 모두 최신을 유지 

node.js 버전은 최소 18 이상 권장 

 

1. 새 폴더 생성 및 이동

mkdir storybook-html && cd storybook-html 

 

2. Node.js 프로젝트 초기화

npm init -y 

 

3. Storybook 설치 

npx storybook@latest init 

 

Framework, Builder 선택 
타입 옵션을 주지 않으면 기본값은 React 

직접 지정은 

npx storybook@latest init --type (react||vue||svelte||angular 등등)

npx storybook@latest init --type 옵션 --builder vite||webpack5 등등 // 빌더 직접 지정 or 설치 과정에서 선택 가능 

 

Storybook 8.x 이후부터는 HTML전용 프리셋(renderer)이 별도 패키지로 분리됨 

npm install  --save-dev @storybook/html // HTML 렌더러 패키지 설치

npm install @storybook/builder-webapck5 --save-dev // Webpack 빌더 패키지 설치 

npm install  --save-dev @storybook/html @storybok/builder-vite

 

npx storybook@latest init --type html --builder vite 

자동 마이그레이션

npx storybook automigrate 

 

스토리북 실행 

npx storybook dev -p 6006 

 

포트 충돌시 PID 확인

netstat -ano | findstr :6006 

 

taskkill /PID <PID번호> /F 

 

@storybook/addon-docs 사용 

npm install -D @storybook/addon-docs@10.2.1 // storybook 버전과 동일한 버전 설치 

npm ls @storybook/addon-docs // 설치 확인 

 

브라우저 확인

http://localhost:6006