Storybook

 

Storybook 패키지에 대해 알아봅니다.

 

 

 

1. Storybook이란?

 

최근 프론트엔드 개발은 페이지 단위가 아닌 컴포넌트 단위로 개발된 다는 것을 들어본 적이 있을 겁니다. 프로젝트 내에서 컴포넌트를 개발하다 보면 초기에는 별 문제가 없지만 프로젝트의 규모가 커질수록 컴포넌트 개발에 독립성을 유지하기 힘들어집니다. 이런 경우 스토리북을 이용하면 보다 편하게 컴포넌트를 개발할 수 있습니다.

 

Build bulletproof UI components faster
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

 

스토리북의 공식 홈페이지를 방문하면 가장 먼저 우리를 반겨주는 문구입니다. 위의 설명대로 스토리북은 독립된 환경에서 컴포넌트를 개발하고 이를 확인해 볼 수 있는 오픈소스 라이브러리 입니다. 이러한 환경에서 개발된 컴포넌트는 독립성이 유지되기 때문에 자연히 재사용성이 좋아집니다. 또한 스토리북은 개발뿐 아니라 문서화, 테스팅에 대해서도 좋은 기능을 제공해 줍니다.

 

 

 

2. Storybook 사용해보기.

 

먼저 스토리북을 사용하기 위해 예시 프로젝트를 생성합니다. 이 글에서는 create-react-app을 통해 예시 프로젝트를 생성하겠습니다.

 

> create-react-app storybook-ex

> cd storybook-ex 

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

 

여기까지 진행한 뒤 package.json파일을 확인합니다. script항목에 보면 전에 없던 스토리북에 관련된 스크립트를 확인할 수 있습니다. 

 

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },

 

이제 스토리북을 실행시켜 9009번 포트로 접속해 봅시다.

 

> npm run strorybook

> http://localhost:9009/로 이동.

 

 

정상적으로 스토리북이 실행된 것을 확인할 수 있습니다. 좌측에 "Welcom"과 "Button"이 보이시나요? 이것들을 스토리북에선 스토리라고 부릅니다. 스토리란 결국 우리가 컴포넌트를 구현하게 될 독립적 공간이 되는것 입니다. 

 

이제 다시 프로젝트로 돌아가서 위의 스토리들이 어디에 위치하는지 확인해 봅시다. ../.storybook 폴더 내의 main.js 파일을 열어보세요.

 

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
};

 

스토리북에서 사용하는 애드온들과 스토리에 대한 설정이 정의되어 있습니다. stories에 설정된 값을 확인해보면 src 폴더 내에 있는 .stories.js로 끝나는 모든 파일을 스토리 파일로 인식하도록 설정되어 있습니다. 실제로 위의 "Welcom"과 "Button" 스토리들은 src폴더 내의 stories폴더에 존재하고 있습니다.

 

새로운 스토리를 생성하기 위해서는 src폴더 내 임의 폴더에 파일이름.stories.js로 파일을 생성 한 뒤 컴포넌트를 작성하면 됩니다.