노트

Storybook

Storybook

프런트엔드#tooling#testing · 연결된 개념 4개

쉽게 말하면

Storybook은 버튼이나 카드 같은 컴포넌트를 앱에서 떼어 쇼룸에 진열해 두고, 기본·비활성·로딩 상태를 하나씩 꺼내 보는 도구예요. 앱 전체를 띄우지 않고도 부품을 확인하고 문서로 남길 수 있죠.

비유가 깨지는 곳 쇼룸은 구경만 하는 곳이지만 스토리는 play 함수로 클릭 같은 사용자 동작을 실행하는 테스트도 돼요. props만으로 그려지는 presentational 컴포넌트가 가장 진열하기 쉬워요.

Storybook은 UI 컴포넌트를 앱과 떨어진 작업장에서 상태별로 렌더해 보고, 문서화하고, 상호작용을 테스트하는 도구다. 공용 컴포넌트를 모아 디자인 시스템을 만들 때 많이 쓴다.

  • 화면: 왼쪽 사이드바(카테고리 → 컴포넌트 → 스토리), 위쪽 툴바(줌, 배경, 뷰포트, 간격 측정), 아래쪽 애드온 패널(Controls, Actions, Interactions)
  • 스토리: 컴포넌트의 상태 하나를 보여 주는 예시. 버튼의 기본·비활성·로딩이 각각 스토리다

CSF (Component Story Format)

const meta = { component: Button, tags: ['autodocs'],
  argTypes: { onClick: { action: 'clicked' } } } satisfies Meta<typeof Button>
export default meta                                   // 메타데이터 하나
 
export const Primary: StoryObj<typeof meta> = {      // named export 하나 = 스토리 하나
  args: { label: '저장', variant: 'primary' },
  play: async ({ canvas, userEvent }) => {           // 상호작용 시나리오
    await userEvent.click(canvas.getByRole('button'))
  },
}
  • 메타에 title을 주지 않으면 스토리 파일의 경로로 사이드바 위치가 정해진다
  • args: 스토리에 넘길 props. Controls 패널에서 바꿔 볼 수 있다. argTypes로 위젯 종류를 정한다
  • Actions: 이벤트 핸들러 호출을 패널에 기록한다
  • play: 렌더 뒤 사용자 동작을 실행하는 테스트. 문법이 React Testing Library와 같다
  • tags: ['autodocs']로 문서 페이지를 자동 생성하고, parameters.layout으로 배치를 정한다
  • 확장: 접근성 검사(Accessibility, a11y), 시각 회귀(Visual Regression, Chromatic), MSW로 API 모킹 연동

props만으로 그려지는 presentational 컴포넌트가 스토리로 만들기 가장 쉽다.

출처: Storybook - Component Story Format (CSF)

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • 컴파운드 컴포넌트 패턴

    컴파운드 컴포넌트(Compound Components)는 여러 컴포넌트가 상태를 공유하며 협력해 하나의 기능을 이루는 패턴이다. HTML(HyperText Markup Language)의 select와 option처럼, 부모가 상태를 들고 자식들은 각자 한 역할만 맡는다.

  • React로 보는 SOLID

    SOLID는 원래 객체 지향 설계 원칙이지만 React 컴포넌트·props·훅에도 그대로 옮겨 볼 수 있다. 원칙 자체보다 "어떤 코드 모양이 되는가"를 짧게 정리한다.

  • DRF 파서·렌더러와 콘텐츠 협상

    DRF에서 파서(Parser)는 요청 본문을 파이썬 자료형으로 바꾸고, 렌더러(Renderer)는 응답 데이터를 클라이언트가 받을 형식으로 바꾼다. 어떤 렌더러를 쓸지는 요청의 Accept 헤더를 보고 고르는데, 이를 콘텐츠 협상(content negotiation)이라 한다.

  • CSRF

    CSRF(Cross-Site Request Forgery, 사이트 간 요청 위조)는 로그인한 사용자가 악성 사이트를 방문했을 때, 그 사이트가 사용자의 브라우저를 시켜 사용자 모르게 원래 사이트에 요청을 보내게 하는 공격이다. 공격자는 토큰을 훔치지 않는다. 브라우저가 쿠키를 알아서 붙여 준다는 점을 이용한다.

  • Render Props 패턴

    Render Props는 무엇을 그릴지를 컴포넌트가 정하지 않고, prop으로 받은 함수가 정하게 하는 로직 재사용 패턴이다. 컴포넌트는 상태와 동작만 맡고 그 데이터를 함수에 넘긴다.

보기 옵션