[React] Storybook 설치법

사용동기

React로 새로운 프로젝트를 진행하기 전 디자인 시스템과 효율적인 UI 개발이 해보고 싶어져서 컴포넌트 UI 개발이 가능한 Storybook을 프로젝트 파일에 적용 해보기로 했다.

1. 프로젝트 파일 준비 및 yarn 설치하기

나의 경우엔 CRA로 만들어진 프로젝트 파일이 아닌 기존에 만들어 사용하던 webpack을 이용한 프로젝트 파일이 있어서 기존 프로젝트 파일에 Storybook 패키지를 설치하여 이용하기로 했다.
아래는 기존에 내가 사용하던 React 프로젝트 파일이다.
https://github.com/POBSIZ/webReact.git

GitHub - POBSIZ/webReact: Webpack과 Babel, React, Typescript, Sass를 사용하는 개발환경

앞으로의 과정을 따라하며 실습을 할 경우엔 위 레포지터리를 클론 받아서 따라하는 것을 추천한다.

React와 Storybook을 동시에 설치중 babel-loader 종속성 오류가 계속하여서 터져나와 기존에 사용하던 npm으로는 오류를 해결하기 어려울 것으로 판단이 되어서 방법을 찾던 도중 yarn을 이용하면 resolutions 속성을 이용하여 패키지의 하위 패키지 버전을 지정 할 수 있는데 이를 이용하여 종속성 오류를 해결 할 수 있다는 것을 알게되어서 yarn을 사용하게 되었다.

yarn을 설치하기 위해선 기본적으로 NodeJS와 NPM이 깔려 있어야 한다.
NodeJS 와 NPM이 설치되어 있다면 아래 코드를 순서대로 터미널에 입력하면 된다.

- 설치 코드

npm i -g corepack 
corepack enable 
yarn init -2 
yarn set version stable

yarn을 설치 했다면 package.json 을 열어 아래와 같이 추가하면 된다.
나의 경우엔 babel-loader의 버전을 8.2.2로 하였다.

  ... 
  "resolutions": { 
    "babel-loader": "8.2.2" 
  } 
}

자세한 설명은 아래 블로그에 나와 있으니 꼭 한번씩 보고 넘어 가시는걸 추천드립니다.
https://velog.io/@nomorebuild/CRA-Storybook-%EC%84%A4%EC%A0%95-%EC%8B%9C-%EB%AC%B8%EC%A0%9C%EC%A0%90

React + Storybook 의 종속성 문제😵

 

2. Storybook 설치하기

Storybook 패키지를 쉽게 설치해주는 명령어가 있어서 그 명령어를 사용해서 설치를 해보겠다.
위에 있는 레포지터리를 클론하여서 진행중이라면 아래 명령어를 실행 시 자동으로 React 프로젝트 파일로 인식을 해서 설치를 진행 할 것 이다.

npx -p storybook sb init

위 명령어를 실행후 Storybook의 설치가 끝나게 되면 아래와 같은 오류가 나타날 것 인데 종속성 오류이니 일단 당장은 무시하여도 된다.

설치가 완료되었다면 파일 구조가 아래와 같을 것 이다.

이제 node_modules와 package-lock.json 파일을 삭제 후 yarn을 이용하여 모든 패키지를 한번에 다운 받으면 된다.

yarn install

설치가 끝난 후 Storybook이 잘 설치 되었는지 알아보기 위해 아래 명령어를 실행하게 되면...

yarn run storybook

갑자기 엄청난 양의 에러가 뿜어져 나오며 빌드에 실패하게 된다..

이러하게 된 이유는 Storybook의 컴파일 설정이 아직 덜 되어서 그런것이다.
위 에러를 해결하기 위해서는 .storybook 폴더안의 main.js 파일을 아래와 같이 수정 하여야 한다.

const path = require('path');
module.exports = {
    stories: ["../src/**/*.stories.(js|jsx|ts|tsx|mdx)"],
    addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
    webpackFinal: async config => {
        config.module.rules.push({
            test: /\.(js|jsx|ts|tsx|mdx)$/,
            loader: require.resolve('babel-loader'),
        }, {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../src'),
        });
        config.resolve.extensions.push('.ts', '.tsx', 'js', 'jsx', 'mdx');
        return config;
    },
}

위와 같이 수정 후 다시 Storybook을 실행하게 된다면...

yarn run storybook

짠!!! 실행에 성공하게 된다! 🎉🎉🎉

 

마무리

처음으로 yarn을 사용하여 프로젝트 파일을 구성해 보았는데 패키지들의 의존성과 종속성이 얼마나 중요한지 그리고 yarn을 이용하면 쉽게 패키지들의 버전과 종속성을 관리하기 쉬운지 알게 되었다.
앞으로는 npm이 아닌 yarn을 계속해서 사용 할 것 같다.

아래는 위의 과정들을 거치며 만들어낸 React와 Storybook이 설치되어있는 프로젝트 파일이다.
필요하신 분들은 클론 받으시면서 제 깃허브 팔로우와 레포지터리 star 한번씩 눌러주시고
이 글이 많은분들에게 도움이 되었으면 한다..

https://github.com/POBSIZ/ReactUI.git

GitHub - POBSIZ/ReactUI