Storybook 쓰고 싶어요!!

여러분들은 혹시 Storybook 이라는 개념에 대해서 알고 있으신가요?? 개발을 하면서 한 번은 들었을 것 같은데

저는 벌써 프로젝트를 하면서 3번 이상 사용하고 있습니다. 근데 왜 정확하게 사용을 하고 사용을 하는 이유에 대해서

아직 잘 모르고 쓰는 것 같아 왜  Storybook이 나오고 최근 트렌드에 도입을 하고 있는지 알아볼까 합니다.

 

Storybook 도대체 뭔가!!

스토리북은 UI 컴포넌트의 동작을 독립적인 환경에서 테스트를 할 수 있도록 도와주는 도구이다!

또 추가된 컴포넌트는 서비스와 독립된 환경에서 렌더링을 하기에 재사용성이 있어야 한다.

이 스토리북을 사용을 하면 개발자 컴포넌트를 관리하고 어떻게 사용되며 동작을 하는지에 있어서 파악하기에 쉽다.

 

디자이너와 소통을 하기 더 쉽다고??

➡️ Storybook이라고 하는 도구는 figma와 기본적으로 연동이 되어 있어서 디자이너와 소통하기 더욱 쉽다!

figma와 연동되는 Storybook!!

실제 프로젝트 도입

 

위와 같은 이미지는 내가 실제로 프로젝트를 하면서 만든 Storybook에서 만든 컴포넌트들이다.

 

많은 개발자들이 이런 의문을 가진다 .. ( 아니 그냥 컴포넌트만 보기 편하게 이러는 거면 그냥 서버 구동해서 하면 안 되나?.. )

➡️ 물론 그렇게 해도 된다. 하지만 이 Storybook을 쓰는 이유는 따로 있다.

 

• 컴포넌트의 커스텀 속성이나 동작에 대해서 자세히 알고 싶을 때 
• 가상의 데이터 인자로 테스트를 할 경우에

보다 더 많은 장점들이 있지만 내가 사용을 하면서 느낀 것은 이런 것이다.

예를 들면 컴포넌트 Header를 만들 때 admin 과 user의 구성이 다르게 만들고 보고 싶은데 각각 서버를 구동시켜서

매번 확인하기 정말 비효율적이라고 생각이 든다. 그러한 점에서 사용하면 정말 효율적이지 않을까요~~??

 

Storybook은 어떻게 사용을 할까?

 

스토리북은 Canvas와  Docs 구성으로 나뉘게 된다.

 

1) Canvas

Canvas

A라는 부분은 Story의 목록을 보는 것이다.

B라는 부분은 해당 Story를 볼 수 있거나, 마우스 인터렉션을 통해 이벤트를 확인한다.

마지막으로 C라는 부분은 애드온이라는 기능을 사용하여 기능을 확장하거나 props를 변경하여 스타일 변경이 가능하다.

 

2) Docs

 

다음은 Docs라는 부분인데 이러한 Docs 부분에서는 2가지의 역할을 가지고 있다.

스토리에 대한 props, 이벤트의 관한 내용을 볼 수 있고, 자동 생성하며 커스텀마이징이 가능하다.

 

Storybook 설치하기

npx -p storybook sb init //스토리북 설치
(패키지 매니저) install //node_modules와 package-lock.json 파일을 삭제 후 본인 패키지 매니저로 설치
(패키지 매니저) run storybook

 

Storybook - main

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이 뭔가요 물어본다면??

➡️ 네. Storybook은 UI 컴포넌트의 동작을 독립적인 환경에서 테스트를 할 수 있도록 도와주는 도구이며 실제 서버

구동이 아닌독립적인 환경에서 컴포넌트들을 관리하기 때문에 테스트적인 문제에 효율적이라고 생각합니다. 또 피그마와

연동이 되어  디자이너와 원활한 커뮤니케이션이 형성되며 컴포넌트의 속성이나 동작에 대해서 자세히 알 수 있다는 장점이 존재합니다.

 

 

느낀 점

 

처음에는 컴포넌트와 테스트하는 용도로만 알고 있었는데 알고 보니 다양하나 방면에서 좋은 역할을 하고 있는 도구였다 ..

앞으로 프로젝트를 할 때 팀원들과 상의하에 도입을 할 것이며 직장 회사에 들어간다면 도입해보고 싶은 도구 중 하나이다.