이전에도 스토리 북을 사용해본 경험은 있지만(6버전), 버전이 올라가면서 변경 점들이 있어 이에 대해서 적어보려고 합니다.
우선 주요한 변경 사항들에는
•
webpack4 지원 종료
•
IE11 지원 종료
•
node 버전 최소 16
•
Babel v7 제외
•
Start와 build cli 바이너리들 제거
•
각종 추가 기능
이 있습니다.
MDX1에서 2로 업그레이드
1에서 2로 업그레이드가 자동으로 되지 않지만, cli 툴 등을 이용해서 손쉽게 할 수 있습니다.
기본 지원이 끝난 storiesOf
컴포넌트 스토리 형식으로 변경을 해줘야 합니다. 만약 이러한 시간이 부족하다면 주문 형 스토리 로딩을 할 수 도 있긴 합니다.
변경 사항들
•
root html ID 변경
•
strict mode 추가
•
markdown을 일반 문자열로 가져와 <Markdown>에서 사용할 수 있습니다.
•
프레임워크 독립 실행형 빌드가 이동됩니다.
•
.storybook/main.js 가 이 제 필수 사항으로 변경됩니다.
•
글로벌 타입이 기존에는 선언하지 않고 사용할 수 있었지만, 이젠 반드시 선언해줘야합니다.
•
빌드 아티팩트 배포가 ESM 을 사용합니다.
핵심 변경사항
•
여러 플래그들을 제거해줘야 정상적으로 작동합니다.
◦
emotionAlias
◦
breakingChangesV7
◦
previewCsfV3
◦
babelModeV7
•
스토리 컨텍스트가 세부 업데이트를 위해 미리 준비됩니다.
•
Preview.js와 추가 기능/프레임워크 간에 장식자 순서가 변경되었습니다.
코어 추가 기능 변경
•
@storybook/addon-actions 데코레이터 자동 주입이 제거되었습니다. 필요하다면 handlers의 매개변수나 html 렌더러에 추가해줘야합니다.
•
Addon-backgrounds: grid 파라미터가 제거되었습니다.
•
Addon-a11y: withA11y 데코레이터가 제거되었습니다.
•
Addon-interactions: interactionsDebugger가 이제 기본적으로 보여져, 플래그를 제거해줘야합니다.
Vite, webpack 프레임웜크별 수정사항들이 존재합니다.
해당 사항들이 개괄적인 변화입니다.
이제 공식 문서에서 소개하는 사용법에 대해서 정리하겠습니다
컴포넌트를 만들면서 생각보다 오류를 많이 잡게 된다.