Storybook web components

지니씨·2023년 2월 21일

프론트엔드

목록 보기

54/85

Storybook

https://velog.io/@juno7803/Storybook-Storybook-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0
https://github.com/storybookjs/storybook/issues/13400

설치

// node15 npm7
// node 저버전에서 input.flat is not a function 에러
npx storybook init --type web_components

https://www.daleseo.com/storybook/

Write Stories

애드온은 Storybook의 핵심 기능을 확장하는 플러그인입니다. 캔버스 아래 Storybook UI의 예약된 장소인 애드온 패널에서 찾을 수 있습니다. 각 탭에는 애드온에서 선택한 스토리에 대해 생성된 메타데이터, 로그 또는 정적 분석이 표시됩니다.

스토리 파일은 개발 전용이며 프로덕션 번들에 포함되지 않습니다.

*.stories.js : Component Story Format (CSF)
https://storybook.js.org/docs/web-components/api/csf

*.stories.js 파일은 default export + 1개 또는 그 이상 name exports 로 구성

default export
: 자체를 포함하여 구성 요소에 대한 메타데이터를 정의
: 스토리를 나열하고 애드온에서 사용하는 정보를 제공하는 방법을 제어
1개 또는 그 이상 name exports (UpperCamelCase)
: 스토리 개체
: 내보내기 이름은 대문자로 시작하는 것이 좋습니다.

Args
https://storybook.js.org/docs/web-components/writing-stories/args
Args는 Storybook 및 해당 애드온에서 제공되는(및 업데이트될 수 있는) 동적 데이터

Play function
스토리가 렌더링되면 실행되는 작은 코드 스니펫 (like 스토리북 상에서의 예시 동작)

Parameters
https://storybook.js.org/docs/web-components/writing-stories/parameters
스토리에 대한 정적 메타데이터를 정의 (like 스토리북 설정)

Decorators
https://storybook.js.org/docs/web-components/writing-stories/decorators
스토리북에 컴포넌트 노출할때 상위 영억 추가

둘 이상의 스토리
List + ListItem

Write Docs

https://storybook.js.org/addons/@storybook/addon-docs

MDX 자유 페이지
구성 요소 그룹에 대해 문서를 다르게 구성하려면 MDX를 사용하는 것이 좋습니다. 표시 방법을 완벽하게 제어하고 모든 구성을 지원합니다.

각 컴포넌트는 docs, stories 세트를 가지는게 모범 사례

// docs만 빌드
"storybook-docs": "start-storybook --docs --no-manager-cache"

튜토리얼 - 디자인 시스템

https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/introduction/
디자인 시스템은 순수해야 하고 프레젠테이션 컴포넌트만을 포함해야 합니다. 이러한 컴포넌트는 UI가 표시되는 방식을 처리합니다. 이들은 props에만 반응하고, 특정 비즈니스 로직을 포함하지 않으며, 데이터 로드 방식에 구애받지 않습니다. 컴포넌트 재사용이 가능하려면 이런 속성은 필수적으로 지켜져야 합니다.

디자인 시스템은 조직에서 사용하는 모든 컴포넌트 라이브러리의 상위 집합이 아닙니다. 만약 그렇다면 빈틈없이 추적해야 하기 때문에 골칫거리가 될 것입니다.

비즈니스 로직을 포함하는 특정 앱을 위한 컴포넌트는 포함되어서는 안됩니다. 고객 프로젝트가 재사용을 시도할 때 동일한 비즈니스 조건을 설정하는 것을 방해하기 때문입니다.

현재 재사용 중이 아닌 일회성 컴포넌트들은 생략합니다. 혹여 나중에 디자인 시스템에 포함되기를 바라는 요소이더라도, 총명한 팀은 잉여 코드를 최대한 삭제해서 코드가 지저분해지지 않도록 합니다.

storybook web components

https://www.newline.co/@kchan/creating-autonomous-web-components-in-storybook--1aa86872

import / export

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-import-export-%EC%A0%95%EB%A6%AC

모듈
클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성
모듈은 단지 파일 하나에 불과함. 스크립트 하나는 모듈 하나

export 종류
1. Named exports
여러값을 export 하는데 유용
export 된 이름을 사용하여 import 로 사용
2. Default exports
모듈 당 한 개의 default export(객체, 함수 클래스 등)만 존재
'메인'이라고 할 수 있는 것을 default export

템플릿 엔진

https://npmtrends.com/ejs-vs-handlebars-vs-hbs-vs-lit-html-vs-mustache-vs-nunjucks-vs-pug

lit-html

Lit-html은 자바스크립트를 위한 간단하고,현대적인고, 안전하고 가볍고 빠른 HTML 템플릿 라이브러리
(프레임워크가 아니라 어디서든 사용 가능)
기본 제공되는 제어 흐름 구문 없이 일반적인 JavaScript 표현식과 명령문 사용

render 함수 : DOM 컨테이너에 템플릿 렌더링하는데 사용

// Import lit-html
import {html, render} from 'lit-html';

// Define a template
const myTemplate = (name) => html`<p>Hello ${name}</p>`;

// Render the template to the document
render(myTemplate('World'), document.body);