Storybook?
Storybook은 컴포넌트 기반의 뷰를 위한 독립적인 UI 개발 환경이다.
스토리북은 컴포넌트를 목록화하여 보고 싶은 컴포넌트를 언제든 확인 가능하도록 만들어준다.
하나의 디자인 시스템이라고 생각하시면 편할 것 같다.
스토리북 슬로건
간단히 설명하자면 버튼이나 아바타 툴팁 같은 매우 작은 컴포넌트를 독립적으로 만들고 그 조합으로 form, header, list, table 같은 조금 더 복잡한 컴포넌트를 만드는 것. 그리고 그 컴포넌트들로 페이지를 구성하고 로직 붙여서 프로젝트를 완성하는 방식을 말하는 말하는 거야.
스토리북을 왜 사용해야 하는데?
스토리북은 두 가지 특징 이 있다.
- 독립적인 환경에서 그립니다.
- 컴포넌트를 재사용하여 다시 그립니다.
결과물을 쉽고 빠르게 확인할 수 있고, 협업에 유리하다.
컴포넌트를 스토리로 옮길때 설계의 결함을 발견해 더 나은 컴포넌트 설계를 고민할 수 있다.
→ 자연스럽게 리팩토링을 할 수 있다.
Storybook & Next.js
현재 개발하고 있는 프로젝트는 Next.js를 기반으로 진행되고 있어 Next.js에서 storybook을 사용해보고, 프로젝트에 적용할 수 있는지 확인해보자 스토리북 공식 블로그를 따라서 작성되었습니다.
Next.js 프로젝트 생성
npx create-next-app@latest --typescript
Webpack5로 새 스토리북 초기화
- 스토리북의 Webpack5 빌더의 이점
npx sb init --builder webpack5
Next.js 페이지에 대한 스토리 만들기
index페이지에 대한 스토리 만들기
- 새로운 파일 생성 (/stories/pages/home.stories.jsx)
- Import /pages/index.js
- title,component 속성을 사용해 기본 스토리 객체 export
- Home 스토리 export
// /stories/pages/home.stories.jsx
import Home from "../../pages/index";
export default {
title: "Pages/Home",
component: Home,
};
export const HomePage = () => <Home />
Storybook 실행
스토리북을 실행시키면 localhost:6006 으로 실행
npm run storybook
preview.js에서 공유된 전역 스타일시트 가져오기
대부분은 전역 재설정을 위한 스타일시트 or 공유되는 글꼴 스타일이 있다.
Next.js 튜토리얼의 경우 “/styles/globals.css”
개별로 글로벌 스타일을 가져올 수도 있지만, 중복이 많아 비효율적이고 오류가 발생하기 쉽다.
.storybook/preview.js 파일은 모든 스토리가 렌더링되는 방식을 제어해 하나의 글로벌 시트를 가져올 수 있다.
// .storybook/preview.js
import "../styles/globals.css";
globals.css를 추가한 후 story로 css가 적용되었다.
하지만, 아직 이미지는 깨진 이미지로 렌더링되고 있다!
스토리의 Next.js 이미지 최적화 해제
Next.js와 Storybook 통합에서 가장 어려운 부분은 이미지 처리이다.
Next.js v10 이상에서는 next/images를 통해 파일크기,시각적 안정성 및 로드시간 등 이미지 최적화가 자동으로 이뤄진다.
Storybook은 Next.js와 별도의 환경에서 실행되기 때문에 하기 두가지 방법으로 구성해야 한다.
1. Storybook의 public 디렉토리 제공
// package.json
"scripts": {
- "storybook": "start-storybook -p 6006",
- "build-storybook": "build-storybook"
+ "storybook": "start-storybook -p 6006 -s ./public",
+ "build-storybook": "build-storybook -s public"
}2. Storybook의 스토리에서만 Next.js 이미지 최적화 해제
// .storybook/preview.js
import * as NextImage from "next/image";
const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, "default", {
configurable: true,
value: (props) => <OriginalNextImage {...props} unoptimized />,
});서버를 재시작 후 이미지 확인
프로젝트 진행시 트러블슈팅
초기 실행 후 다시 실행할때 webpack 의존성 문제 발생
https://github.com/storybookjs/storybook/issues/15336
공식 스토리북 issue로 확인 및 해결 완료
styled-component 적용 (진행중)
https://watermelonlike.tistory.com/entry/Storybook-styled-component
기본 적용 방법은 완료했으나, theme props을 사용하는 설정은 진행 중!
간단하게 사용해보고 난 후 느낀점
장점
- 컴포넌트 개발시에 코드만보고 잘 이해되지 않을 때 직관적으로 확인하면서 이해도를 높일 수 있다.
- 공용 컴포넌트가 아니면 컴포넌트 단위로 잘 신경쓰지 못하고, 재사용성을 놓치기 쉬우나 스토리로 옮기는 과정을 통해 독립적이고 재사용성이 높은 설계를 생각하게 된다.
단점
- 컴포넌트 단위로 생각하면서 개발하고 설계하려면 개발의 속도는 느려지고, 스토리북에서 발생하는 이슈들로 시간이 많이 소모된다.
- 규모가 큰 프로젝트에서는 서로의 코드를 이해하고, 컴포넌트가 독립적이고 재사용성이 높아져 효율적이나, 작은 프로젝트에서는 오히려 비효율적일 수 있다.
레퍼런스
'Front-End' 카테고리의 다른 글
| [학습정리] Webpack,Babel (0) | 2023.02.17 |
|---|---|
| [학습정리] Next.js를 프로젝트에서 사용한 이유 (0) | 2022.12.03 |
