CRA storybook
-
Storybook 컴포넌트 만들기 1프론트엔드 2023. 4. 17. 18:59
이전 포스트에서 Storybook 설정 및 배포 방법에 대해 알아보았습니다. 이번 포스트에서는 컴포넌트의 상태를 설정하여 스토리를 구성하고 테스트하는 과정을 살펴보도록 하겠습니다. 이번 포스트는 React + Storybook를 레퍼런스로 하고 있습니다. 1. Task 컴포넌트 만들기 Task는 체크박스, 정보, 위아래로 움직일 수 있도록 해주는 pinned이 있습니다. Task의 상태는 TASK_INBOX, TASK_PINNED, TASK_ARCHIVED가 있습니다. 이를 위해 정의된 props는 아래와 같습니다. title - task를 설명해주는 문자열 state - 현재 어떤 task가 목록에 있으며, 선택되어 있는지의 여부 Task 컴포넌트는 아래와 같이 정의해줍니다. import { TaskT..
-
Storybook CRA에 적용하기프론트엔드 2023. 4. 17. 00:04
이번 글은 Storybook의 튜토리얼을 따라해보면서 얻은 지식을 정리하는 글입니다. Storybook 스토리북은 Component Driven Development를 가능하게 해주는 개발 도구입니다. 스토리북의 기본 단위는 Story로 각 컴포넌트가 렌더링된 상태(버튼이 클릭되었을 경우, 로그인이 되었을 경우)를 캡처한 것입니다. 스토리북은 UI 컴포넌트들이 실제 렌더링되는 Story를 각각 정의하여 스냅샷을 통해 테스트를 진행하면서 개발을 할 수 있습니다. 또한, 사용자와의 상호작용하는 과정을 시뮬레이션하여 UI에 대한 테스트를 진행하거나 배포된 스토리북 사이트에서 인수를 바꿔보면서 실제 렌더링된 컴포넌트에 테스트해볼 수 있습니다. 이외에 Storybook의 장점은 Storybook Docs에서 확인..