Storybook - Storybook 프로젝트 생성 (React)

 

이미 만들어진 프로젝트에 StoryBook을 추가할때

 

 

- 먼저, React cli를 통해서 프로젝트를 생성해준다.

[ 생성방법 ]

https://backback.tistory.com/291?category=801894

React - 프로젝트 생성 및 babel & webpack 설명

- 종속적으로 storybook을 추가한다.

1. npm

npm i @storybook/react --save-dev

React cli가 아니라 storybook을 통해서 설치했다면 

@storybook/preset-create-react-app

react와 reactdom을 설치하고 babel을 설치한다.

npm install react react-dom --save
npm install babel-loader @babel/core --save-dev

 

2. package.json

프로젝트가 생성 되었다면 package.json의 storybook을 실행할 script를 추가해준다.

"scripts": {
  ...
  "storybook": "start-storybook"
}

 

3. main.js 파일 생성

기본으로 스토리북을 실행 시 스토리를 찾을 위치를 알려주는 역할을 한다.

프로젝트의 root에 .storybook폴더를 생성한 뒤 main.js파일을 생성해준다.

 

main.js에 스토리들(UI컴포넌츠) 위치 경로를 설정한다.

module.exports = { 
    stories: ['../src/components/**/*.stories.js'],
};

src의 components에 있는 모든 .stories.js 를 불러오게 설정한 것인다.

 

 

4. stroy 생성

src > components 폴더를 생성한 뒤 index.stories.js 파일을 생성해준다.

import React from 'react';
import { Button } from '@storybook/react/demo';

export default { title: 'Button' };

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

▲ (위 코드는 공식문서에서 제공해주는 샘플 코드)

stroybook에서 제공해주는 react/demo UI 컴포넌트 중에

Button UI 구성요소를 추가해 주고 

title을 'Button'으로 지정해준다.

 

Button   ├── With Text   └── With Emoji

그럼 story의 구성은 이렇게 된다

 

5. 스토리북 실행

아까 package.json에 storybook을 실행할 script

npm run storybook

을 실행 하면 스토리북은 dev모드에서 랜덤으로 포트를 개방하여 시작하게된다.

webpack으로 리로딩하기 때문에 개발하면서 저장 시 Storybook은 즉시 변경되는걸 확인 할 수 있다.

 

 

 

여기까지 사용중 에러

npm run stroybook을 하거나 react를 실행 시킬때 에러가 발생했다. [에러 코드] There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. The react-scripts package provided by Create React App requires a dependency: "webpack": "4.28.3" Don't try to install it manually: your package manager does it automatically.​ 이유는 React Cli의 webpack버전과 Stroybook webpack버전이 달라 충돌이 일어나는것이다. [웹팩 버전 확인 방법] npm ls webpack​   이럴 경우  .env에 코드를 추가 하면 된다.  SKIP_PREFLIGHT_CHECK=true​   프로젝트 실행전 체크사항를 스킵한다는 설정이다. [.env를 사용방법] dotenv를 설치해준 후 npm install --save dotenv​ root에 .env파일을 생성하면된다.

 

 

 

설정 

스토리 Load

 

root에 .stroybook/preview.js파일을 생성해준다.

스토리는 아까 root에 만든 .stroybook/main.js파일이였던 

 

 

 

When adding a StoryBook to an already created project

 

https://backback.tistory.com/manage/newpost/402?type=post&returnURL=https%3A%2F%2Fbackback.tistory.com%2F402 - First, React CLI through the created the project allows.

[How to create]

https://backback.tistory.com/291?category=801894

 

-Add storybooks subordinately .

1. above sea level

npm i @storybook/react --save-dev

If you installed through storybook, not React cli 

Install react and reactdom and install babel.

If you installed through storybook, not React cli 

@storybook/preset-create-react-app

Install react and reactdom and install babel.

npm install react react-dom --save
npm install babel-loader @babel/core --save-dev

 

2. package.json

If the project is created , add a script to run the package.json storybook .

"scripts": {
  ...
  "storybook": "start-storybook"
}

 

3. Create main.js file

Basically, when you run the storybook, it serves to tell you where to find the story.

Create a .storybook folder at the root of the project and then create a main.js file.

 

Set the path to the stories (UI components) in main.js.

module.exports = { 
    stories: ['../src/components/**/*.stories.js'],
};

It is set to load all .stories.js in the components of src .

 

 

4. Create stroy

After creating src> components folder, create index.stories.js file.

import React from 'react';
import { Button } from '@storybook/react/demo';

export default { title: 'Button' };

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

▲ (The above code is a sample code provided in the official document)

Among react/demo UI components provided by stroybook

Add a Button UI component 

Assign title as'Button'.

 

Button    ├── With Text    └── With Emoji

Then the composition of the story becomes like this

 

5. Run the storybook

The script  to run the storybook in package.json 

above sea level run storybook

When you run, the storybook starts by opening the port randomly in dev mode.

Since it is reloaded with webpack, it can be confirmed that the storybook is immediately changed when saving during development.

 

 

 

Error in use so far

An error occurred when running npm run stroybook or react.  [Error code] The reason is that the webpack version of React Cli and the Stroybook webpack version are different and a conflict occurs.  [How to check the webpack version]   In this case   ,  you can add code to .env .    It is a setting to skip checks before executing the project.  [How to use .env]  After installing dotenv Just create an .env file in root .

 

 

 

Settings 

Story Load

 

Create .stroybook/preview.js file in root .

The story was the .stroybook/main.js file created in the root 

 

 

 

 

既に作成され、プロジェクトにStoryBookを追加するとき

 

 

-まず、React cliを介してプロジェクトを作成してくれる。

[作成方法]

https://backback.tistory.com/291?category=801894

 

-依存的にstorybookを追加する。

1.海抜

npm i @storybook/react --save-dev

React cliではなく、storybookを通ってインストールした場合< - [さらに表示]

 

2. package.json

プロジェクトが作成されている場合package.jsonのstorybookを実行するscriptを追加してくれる。

"scripts": {
  ...
  "storybook": "start-storybook"
}

 

3. main.jsファイルの作成

基本的にストーリーブックを実行時にストーリーを検索する場所を知らせる役割をする。

プロジェクトのrootに.storybookフォルダを作成した後、main.jsファイルを生成してくれる。

 

main.jsにストーリーに（UIコンポーツ）の位置のパスを設定する。

module.exports = { 
    stories: ['../src/components/**/*.stories.js'],
};

srcのcomponentsのすべての.stories.jsを呼んで来るように設定したのである。

 

 

4. stroy生成

src> componentsフォルダを作成した後、index.stories.jsファイルを生成してくれる。

import React from 'react';
import { Button } from '@storybook/react/demo';

export default { title: 'Button' };

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

▲（上のコードは、公式文書で提供してくれるサンプルコード）

stroybookで提供してくれるreact / demo UIコンポーネントの中

Button UIコンポーネントを追加してくれ 

titleを「Button」に指定してくれる。

 

ボタン   ├──テキストあり   └──絵文字あり

その後、storyの構成は次のようになる

 

5.ストーリーブックを実行

さっき package.jsonにstorybookを実行 script

npm run storybook

を実行すると、ストーリーブックはdevモードでランダムにポートを開放して開始することになる。

webpackにリロードするために開発し保存時Storybookはすぐに変更されることを確認することができる。

 

 

 

ここまで使用中のエラー

npm run stroybookをしたり、reactを実行するときにエラーが発生した。 [エラーコード] 理由は、React CliのwebpackバージョンとStroybook webpackバージョンが異なり、競合が起こるだろう。 【ウェプペクバージョンの確認方法]   この場合、  .envにコードを 追加すればよい。    プロジェクトの実行前のチェック注意点スキップする設定である。 [.envを使用する] dotenvをインストールしてくれた後、 rootに.envファイルを作成すればよい。

 

 

 

設定 

ストーリーLoad

 

rootに.stroybook / preview.jsファイルを生成してくれる。

ストーリーは、さっきrootに作成された.stroybook / main.jsファイルがあった