Storybook

지니씨·2023년 2월 26일

JavaScript storybook storybook web components

프론트엔드

목록 보기

58/85

Write stories

ES6 모듈 기반 표준인 CSF(Component Story Format)에 따라 스토리 정의
주요 구성 요소 : 구성 요소를 설명하는 기본 내보내기, 스토리를 설명하는 명명된 내보내기

Template.bind({})
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
함수의 복사본을 만드는 표준 JavaScript 기술
내보낸 각 스토리가 템플릿에 고유 속성을 설정할 수 있도록 템플릿 복사

Docs Pages > Inline stories vs iframe stories
https://storybook.js.org/docs/web-components/writing-docs/docs-page#inline-stories-vs-iframe-stories

iframe

컴포넌트 코드를 스토리북 UI와 분리할 수 있다.
iframe의 높이값을 정확히 지정해야한다. 그렇지 않으면 스크롤바가 노출될 수 있다.
iframe 영역이 많으면 성능상 이슈가 있을 수 있다.
특정 개발자도구가 작동하지 않을 수 있다.

inline

.storybook/preview.js 의 docs.inlineStories : true / false 설정 가능
지원하는 storybook에서는 디폴트 설정
프레임워크가 인라인 렌더링을 지원하지 않는 경우 inlineStories 매개 변수 외에 prepareForInline 함수도 제공해야 합니다.
inlineStories를 true로 설정하면 Storybook은 당신의 이야기를 iframe에 넣는 것을 멈추라고 말한다.

Addons

스토리북의 UI와 동작을 확장하는 애드온
스토리북은 기본적으로 초기 사용자 경험에 추가되는 일련의 "필수" 추가 기능
스토리북 코어 팀이 개발한 "공식" 애드온뿐만 아니라 많은 타사 애드온이 있다.

Configure

.storybook/main.js
기본 구성 파일
Storybook 서버의 동작을 제어
변경할 때 Storybook 프로세스를 다시 시작해야 함

.storybook/preview.js
스토리 렌더링 되는 방법 제어
전체 스토리에서 로드 필요한 글로벌 코드 적용
decorators - an array of global decorators
parameters - an object of global parameters
globalTypes - definition of globalTypes

.storybook/manager.js
특정 API가 없지만 UI 옵션을 설정하고 스토리북의 테마를 구성하는 곳

Story rendering
https://storybook.js.org/docs/web-components/configure/story-rendering

미리보기/관리자 템플릿(https://storybook.js.org/docs/web-components/addons/writing-presets#previewmanager-templates)으로도 적용 가능

storybook preview iframe(컴포넌트가 렌더링되는 곳) 의 <head>에 추가할 코드 작성
.storybook/preview-head.html파일에 삽입할 태그를 추가

storybook preview iframe 의 <body>에 추가할 코드 작성
.storybook/preview-body.html파일에 삽입할 태그를 추가
ex. rem 또는 em 사용 시 base font-size 스타일 적용 가능

ahttps://storybook.js.org/docs/react/writing-stories/introduction

https://www.insidenewcity.com/running-javascript-with-templates-in-storybook-for-html/

UI 개발을 위한 도구

storybook web components with lit
: https://piyushsinha.tech/introduction-to-storybook-for-web-components

https://webcomponents.dev/docs/

https://webcomponents.dev/docs/component-story-format
stories는 storybook의 스토리포맷(CSF : Component Story Format)으로 표현

참고
storybook web components with stencil
: https://paulcpederson.com/articles/stencil-storybook/