Storybook이란?
Storybook이란 UI 컴포넌트 개발 도구이다.
즉, 데이터와는 상관없이 순수하게 UI 컴포넌트 디자인을 쉽게 확인, 수정, 테스트를 할 수 있는 프로그램이다.
Storybook을 사용하는 이유
작업 효율 증가
개발자들 간에 컴포넌트 디자인을 쉽게 확인할 수 있다.
또, 이미 있는 컴포넌트를 다시 개발할 위험성도 크게 줄어든다.
Storybook으로 바로 확인이 가능하기 때문
원활한 소통
개발 전체를 하지 않아도, 일부 컴포넌트 디자인 개발 후 바로 디자이너, 기획자에게 전달하면 된다.
UI 컴포넌트만 바로 보여줄 수 있기 때문에 소통이 빨라진다.
의도치 않은 UI 변경 확인
Chromatic에 있는 '시각적 회귀 테스트'를 활용하면 실제 코드를 배포하기 전 의도치 않은 UI 변경은 없는지 정확히 판단이 가능하다.
Chromatic은 Storybook으로 개발한 컴포넌트의 변경점을 쉽게 확인할 수 있도록 해주는 프로그램)
디자인 시스템으로 활용 가능
디자인 시스템이란 한 서비스의 목적 및 일관된 이미지를 위해 회사에서 정립한 일관된 디자인 체계이다. 디자인 시스템이 없는 회사라면 디자이너가 바뀔 때마다 조금씩 디자인이 바뀔 수 있는 것인데, Storybook은 디자인을 바로 확인할 수 있기 때문에 일관된 디자인으로 개발할 수 있도록 도와준다.
Storybook 설치하기
기존에 리액트 어플리케이션이 존재하면 터미널을 열어
npx storybook@latest init하고 y,y를 눌러준다.
설치가 완료되면
npm run storybook를 입력한다. 그러면 웹사이트가 열린다.
localhost:6006으로 접속하면 스토리북 웹사이트에 접속할 수 있다.
storybook을 설치하면 루트 위치에 .storybook 디렉토리가 생기고, src 폴더 내에 stories 디렉토리가 생긴다.
.storybook 디렉토리의 파일들은 스토리북의 전체적인 설정과 관련된 파일들이고, stories 디렉토리에 있는 파일들은 실제 스토리 파일을 작성하는 곳이다.
다음으로, <컴포넌트명>.stories.js 라는 파일 중 Button.stories.js 파일에 작성한 것들이 스토리북 웹사이트에 반영된다.
CustomButton.jsx
import "./customButton.css";
import PropTypes from "prop-types";
export const CustomButton = ({
size,
label,
variant,
backgroundColor,
color,
}) => {
const style = {
backgroundColor,
color,
};
return (
<button
className={[
"custom-button",
`custom-button--${size}`,
`custom-button--${variant}`,
].join(" ")}
style={style}
>
{label}
</button>
);
};
CustomButton.propTypes = {
size: PropTypes.oneOf(["sm", "md", "lg"]),
backgroundColor: PropTypes.string,
color: PropTypes.string,
label: PropTypes.string.isRequired,
};
CustomButton.defaultProps = {
backgroundColor: null,
color: null,
size: "md",
variant: "outline",
};customButton.css
.custom-button {
font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
border-radius: 3em;
cursor: pointer;
display: inline-block;
line-height: 1;
}
.custom-button--outline {
background-color: white;
border: 1px solid black;
}
.custom-button--solid {
background-color: black;
border: none;
color: white;
}
.custom-button--sm {
font-size: 12px;
padding: 10px 16px;
}
.custom-button--md {
font-size: 14px;
padding: 11px 20px;
}
.custom-button--lg {
font-size: 16px;
padding: 12px 24px;
}CustomButton.stories.js
import { CustomButton } from "../components/CustomButton";
export default {
title: "Test/CustomButton",
component: CustomButton,
// 여기에 args 및 label 추가
args: {
label: "Button",
},
};
// 스토리에 있는 label 속성 모두 제거
export const Solid = {
args: {
variant: "solid",
},
};
export const Outline = {
args: {
variant: "outline",
},
};
export const Small = {
args: {
size: "sm",
},
};
export const Medium = {
args: {
size: "md",
},
};
export const Large = {
args: {
size: "lg",
},
};
이렇게 하면 스토리북 웹사이트에 스토리가 생성된다.
label을 각각 지정해줘도 되지만 같은 label을 쓸거면 default 부분에 한 번만 작성해도 된다.
툴바 조정하기
스토리북의 모양을 조절할 땐 args 속성을 활용하였다. 하지만 주변 배경 및 환경을 제어하기 위해선 parameters 속성을 활용해야 한다.
export default {
title: "Test/CustomButton",
component: CustomButton,
args: {
label: "Button",
},
parameters: {
backgrounds: {
values: [
{
name: "blue",
value: "blue",
},
{
name: "red",
value: "red",
},
],
},
},
};이렇게 parameters를 추가해서 backgrounds 속성을 추가할 수 있다.
컴포넌트 동작 테스트하기
컴포넌트가 렌더링 된 이후에 실제로 사용자가 동작하는 것을 테스트하는 방법
먼저 다음과 같은 패키지를 설치해야 한다.
npm install @storybook/testing-library @storybook/jest @storybook/addon-interactions --save-dev.storybook 디렉토리의 main.js 파일에서 addons 속성에 @storybook/addon-interactions를 추가해야 한다. (기본으로 설정되어 있다면 굳이 추가 안해도 됨)
CustomButton.stories.js 파일에 다음과 같은 코드 추가
(생략)
import { within, userEvent } from "@storybook/testing-library";
(생략)
export const ClickTestButton = {
args: {
variant: "outline",
label: "Click!",
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const primaryButton = await canvas.getByRole("button", {
name: /Click/i,
});
await userEvent.click(primaryButton);
},
};canvasElement를 루트 요소로 할당하고 getByRole 부분은 canvas로부터 button을 가져오며, 버튼의 이름이 Click 이라는 문자열을 포함하는 버튼을 가져온다는 뜻이다. 이때 /Click/i 는 정규식이며 대소문자 상관없이 click이라는 문자열이 있으면 된다는 의미이다.
공식문서
Chromatic을 활용한 시각적 회귀 테스트
시각적 회귀테스트란?
이전 버전의 UI와 배포될 버전의 UI의 차이를 시각적으로 확인하고 분석할 수 있는 테스트
- 먼저 Chromatic을 설치해준다.
npm install --save-dev chromatic- 그리고 Chromatic 웹사이트에 회원가입을 한다.
- 회원 가입 완료 후 Add Project -> Create a project
- 프로젝트 생성 후 두 개의 명령어가 나오는데 첫번째 명령어 (chromatic 설치)는 이미 실행했기 때문에 두 번째 명령어만 실행한다
npx chromatic --project-token=chpt_521d15c23d13c0e—-project-token=<token>의<token>부분은 외부 유출 방지를 위해 추후에 환경 변수 혹은 Github secret_key로 담아준다.- 설치 완료 후 브라우저로 이동 시 배포가 완료된 것을 확인할 수 있다.
npm run chromatic위 명령어를 입력해서 재배포를 시도하고 Catch a UI change를 클릭해서 변경사항을 확인할 수 있다.
