[React] Storybook 설치하기

Storybook이란?

Storybook은 UI 개발을 위한 유저 인터페이스 개발 환경 및 컴포넌트를 자유롭게 테스트할 수 있는 도구입니다.

자세한 내용은 공식문서에서 볼 수 있습니다 ~!

create-react-app + typescript + storybook 설치하기

npx create-react-app 프로젝트명 --typescript

npx -p @storybook/cli sb init --type react_scripts

npm install --save-dev @types/storybook__react

기존 프로젝트에 storybook 추가 설치하기

# Add Storybook:
npx -p @storybook/cli sb init

# react 감지 못할 경우 --type 옵션으로 react를 사용하도록 할 수 있다.
npx -p @storybook/cli sb init --type react

# typescript를 사용하기에 storybook에 대한 types를 같이 설치
npm install --save-dev @types/storybook__react

npm start 에러시 해결방법

1. 로그 해결 방안

1. npm start에러 발생 시, package-lock.json, node_modules를 제거.

2. npm cache clean --force 캐시 제거 

3. "babel-loader" 제거 

4. npm install 

	1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

React + Storybook의 babel-loader 종속성 문제

react-scripts와 Storybook의 하위 패키지인 babel-loader는 버전 충돌로 인한 에러이다.

env에 코드를 추가 하면 해결된다.

SKIP_PREFLIGHT_CHECK=truet

yarn에 경우에는 package.json에 아래 코드를 추가하여 yarn이 "babel-loader" 8.1.0 버전을 사용하도록 설정하여 해결한다.

...

"resolutions": { "babel-loader": "8.1.0" }// react-scripts에서 요구하는 버전

 ...

CRA v4에서는 이러한 에러가 발생하였지만 CRA V5가 나와서 V5적용을 해보아서 테스트 해보았다 V5에서는 위와 같은 에러 없이 잘된다.

StoryBook 구동

$ npm run storybook