스토리북
- 일단 공식 문서에서 확인해보자. (링크)
- 스토리북은 컴포넌트 기반의 뷰를 위한 독립적인 UI 개발 환경이다.
- 말이 너무 어렵다. 프론트 단에서 컴포넌트 단위를 개발, 테스트, 문서화 할 수 있는 도구라고 생각하면 된다.
- 각각의 컴포넌트를 독립된 스토리로 분리해서 개발한다.
- props를 내려줘 바로바로 디자인이 변경되는 것을 확인, 테스트, 디버깅을 할 수 있다.
- 문서화 할 수 있어서 재사용성이 높고 개발자나 디자이너 등 팀의 협업을 용이하게 한다.
- 이전에 만든 바닐라로 MBTI 테스트를 React로 만들고, TS로 마이그레이션도 해보려고 하는데 혼자 컴포넌트도 문서화 해보면 좋겠다는 생각이 들어서 스토리북을 시작해봤다.
설치
- 필자는 제목처럼 타입 스크립트가 아닌 React, yarn, vite로 스토리북을 시작했다.
- 후술할 예정이지만 yarn... 으로 했다가 버전으로 하루종일 이슈가 있어서, 나처럼 패키지 매니저나 번들러 등등 개발 지식이 많지 않은 입문자라면 그냥 편하게 npm으로 하는 게 좋지 않을까 싶다. (물론 해결함)
yarn create react-app . --template react
yarn install
npx sb init (스토리북 )
yarn dev (yarn 실행)
이후에 prettier나 CSS 라이브러리를 추가해주면 된다.
필자는 원래 CSS modules을 애용했는데 이번에는 스타일드 컴포넌트를 써보기로 했다.
스타일드 컴포넌트도 거의 기본 문법만 알고 있기 때문에 이번 기회에 더 깊게 배워 보면 좋을 것 같았다.
에러
전날 만났던 에러다.
🔴 Error: It looks like you are having a known issue with package hoisting.
Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092
const stripAnsi = require('strip-ansi');
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/summermong/anotherWorldTest/node_modules/strip-ansi/index.js from /Users/summermong/anotherWorldTest/node_modules/cli-table3/node_modules/string-width/index.js not supported.
Instead change the require of /Users/summermong/anotherWorldTest/node_modules/strip-ansi/index.js in /Users/summermong/anotherWorldTest/node_modules/cli-table3/node_modules/string-width/index.js to a dynamic import() which is available in all CommonJS modules.
잘 해결했다고 생각하고 티스토리에 글까지 올렸지만 다음날 yarn storybook을 하자마자 에러가 다시 나타났다.
패키지 의존성 문제라는 것까진 이해했고, 그렇기 때문에 단순하게 '삭제 후 다시 깔기'를 택했으나 이것은 근본적인 해결책이 아니었다.
저 solutions에 들어가 보면 작년 5월에 처음 열린 이슈가 있다.
이 오류는 패키지 매니저 yarn 을 업그레이드하면 해결되는 간단한 이슈였다.
대충 읽어보면 jackspeak@2.1.2 가 yarn 1랑 이어지지 않는 것.
그러고 보니 내 yarn의 버전이 몇이지...? 하고 yarn --version을 해보니 어김없이 1.x.x었다.
yarn 1 버전을 yarn classic, yarn 2버전 이상을 yarn berry라고 하는데 스토리북을 사용하기 위해선 yarn classic이면 안되는 거다.
해결 1
깔쌈하게 yarn 버전을 업데이트 해준다. (공식 문서)
yarn set version 2 (또는 3)
그런데 그렇게 하고 나니... 너무 다른 것이다. (yarn classic과 yarn berry의 차이점에 대해서도 공부할 필요를 느꼈다.)
이렇게 하고 나서 문제가 없는지 까진 확인하지 않았지만, 위에서 답한 대로 yarn 버전을 업그레이드 해주는 방법 하나가 있다.
필자는 잘 모르겠어서 일단 다시 yarn set version classic으로 1 버전으로 내렸다...
해결 2
//"dependencies": {
// "react": "^18.2.0",
// "react-dom": "^18.2.0",
// "react-router-dom": "^6.21.1",
// "styled-components": "^6.1.6",
// },
"resolutions": {
"jackspeak": "2.1.1"
},위에서 그럼에도 yarn 1로 할 수 있는 방법을 알려줬는데, 이 코드를 package.json에 붙이면 되는 것이다.
그 다음 yarn을 삭제하고 다시 깔아준다.
rm yarn.lock
yarn install
yarn dev
yarn storybook
이후 확인해보면 정상적으로 스토리북이 실행되는 걸 볼 수 있다!
주변에 물어봐도 yarn을 안 써서 이런 오류를 본 적이 없다 하고, 구글링 해도 잘 나오지 않아서 헤맸는데 해결해서 다행이었다.
