104%

스토리북은 스토리의 집합이다. 각각의 스토리는 컴포넌트의 하나의 시각적 상태를 나타낸다. 기술적으로 얘기하면 스토리는 스크린에 렌더링될 수 있는 어떤것을 리턴하는 함수이다. 기본 스토리 버튼 컴포넌트의 스토리에 대한 기본 예제이다. import React from 'react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; export default { component: Button, title: 'Button', }; export const text = () => Hello Button; export const emoji = () => ( 😀 😎 👍 💯 ); named export(text, emoj..

CSF란 스토리북에서 사용하는 포맷이라고 생각하면 된다. 스토리북 5.2버전 이후로 추천하는 스토리 작성 포맷이다. 스토리들은 ES6 모듈 형태로 정의된다. 모든 스토리북 파일(보통 .stories.js) default export와 named export를 섞어서 사용한다. 리액트 네이티브 제외한 모든 프레임워크에서 CSF를 지원하며 리액트 네이티브에서는 기존 버전의 storiesOf API를 사용해야 한다. Default export *.stories.js에서 default export로 메타데이터가 담긴 객체를 내보내면 그 정보를 활용해서 스토리북을 구성한다. 이렇게 생겼다. import MyComponent from './MyComponent'; export default { title: 'Pat..

아토믹 디자인은 컴포넌트를 5개의 단계로 나눈다. Atoms(원자) button, icon, input등과 같이 컴포넌트의 최소단위를 의미한다. (보통 HTML 태그가 원자의 단위가 된다.) 원자는 컬러, 폰트, 애니메이션등을 포함한다. MoleCules(분자) 원자를 결합하여 분자를 만든다. INPUT 원자와 BUTTON 원자를 합쳐 검색창 분자를 만들수있다. Organisms(유기체) 분자들을 결합하면 유기체가 된다. 검색창 분자와 메뉴 분자 두개가 합쳐서 헤더라는 유기체를 만들었다. 유저는 유기체 단위로 사이트를 인식하기 시작한다. 유기체는 독립적이어야 하며(standalone), 쉽게 여기저기 옮길수 있어야하고(portable), 재사용(reusable)이 가능해야한다. Template(템플릿) ..

스토리북으로 UI 컴포넌트들을 정리하려고 하는데 어떤식으로 컴포넌트들을 분리해야하고 관리해야하는지에 궁금해서 정리하게 되었습니다. 본인이 알고 있는 좋은 구조가 있다면 댓글로 알려주시면 감사하겠습니다. 서론 나는 스토리북을 3년간 사용해왔다. 잘 구조화 하지 않으면 스토리북이 별로 유용하지 않다고 느껴 효율적인 구조를 찾아왔다. 내가 생각하는 스토리북의 best practice를 공유하겠다. 이 스토리북을 누가 쓸건가? 스토리북을 팀내에서만 쓸건지, 디자인 시스템 구축용으로 사용하여 외부에서도 같이 사용할건지에 따라서 프로젝트 구성이 달라진다. 외부에서도 사용해야 하는 경우 컴포넌트의 API를 상세히 작성해야 한다. https://github.com/intuit/storybook-addon-sketch ..