글 작성 시 사용한 Storybook 버전 → 6.4.20
글 작성 시 사용한 Nextjs 버전 → 12.1.4
TL;DR
TypeScript 기반의 Nextjs 프로젝트에 Storybook을 설치하는 법입니다. → 그렇게 안어려워요
목표
Nextjs 기반의 프로젝트에 Storybook을 적용하자!
1. Storybook cli 설치
•
추가로 진행히기 전에 .eslintrc.json을 .eslintrc.js로 변경해주세요! → 변경하지 않을 경우 storybook 관련 eslint 설정이 자동으로 수행되지 않습니다.
•
Storybook을 적용하고자 하는 프로젝트 디렉터리에 아래 명령어를 입력합니다.
•
Storybook cli가 존재하지 않는다면 추가적으로 설치합니다. → yes를 입력해주세요!
npx -p @storybook/cli sb init
Bash
복사
•
추가로 babel-plugin-react-require도 설치 및 적용 → 스토리로 작성하고자 하는 컴포넌트의 최상위 루트 태그가 빈 JSX Fragment일 때 React undefined 에러가 출력됩니다.
npm install -D babel-plugin-react-require
Bash
복사
// .babelrc에 코드 추가
"plugins": [
["react-require"],
// ...생략
JSON
복사
2.eslint-plugin-storybook 자동설치 안됐을 경우
•
.eslintrc.json을 깜빡하고 변경안하셨을 경우 설치는 되나 자동으로 설정되지 않습니다.
•
.eslintrc.js로 이름 변경후 extends에 해당 코드를 추가해줍니다.
extends: [
//생략
"plugin:storybook/recommended",
//생략
]
JavaScript
복사
3. 확인하기
•
프로젝트 디렉터리에서 아래 명령어를 실행합니다.
npm run storybook
Bash
복사
storybook 실행
•
Storybook이 알아서 TS의 interface를 추적해서 prop 데이터들을 파싱 해주므로 추가적인 설정이 필요할 때(파라미터를 설명하거나 컨트롤 지정 시) 를 제외하곤 손댈일 이 없습니다.