Storybook사용

1. Storybook 도입

Storybook은 UI 컴포넌트를 격리된 환경에서 독립적으로 개발, 테스트, 문서화하는 데 사용된다.

우리 프로젝트같이 복잡한 모노레포와 React 환경에서 Storybook을 도입하면 얻는 이점들은 다음과 같다.

1. 프론트 집중 가능
   1. 비즈니스 로직에서 벗어나 컴포넌트 자체 UI와 기능 구현에 집중가능
   2. 데이터 목업 만으로 컴포넌트 개발 가능
2. 디자인 시스템 구축 및 일관성 유지
   1. 디자인 시스템을 쉽게 확인 가능
3. 자동 문서화
   1. 자동으로 docs를 제공해주어 해당 컴포넌트에 대한 정보를 확인 할 수있다.
   2. Props, 사용법, 코드 예시 등등
   3. 문서를 보고 빠르게 파악 가능

---

2. 컴포넌트 테스트 및 검증 방법

테스트를 해보기 위해 Emotion CSS로 스타일링된 Button 컴포넌트를 예시로 사용하여 Storybook 테스트의 세 가지 주요 방법을 학습하였다.

2.1 시각적 상호 작용 테스트

각적 상호 작용 테스트가 Storybook의 가장 기본적이고 주요 기능이라고 생각이 든다.

사용자가 코드를 작성하지 않고도 UI를 테스트할 수 있는 방법이 가장 큰 이점이라고 생각한다.

1. 상태 변형
   1. 버튼이 토글이 되는지 확인 가능
   2. props의 체크 박스를 켜고 끄며 시각적 테스트 가능
2. 크기 변형
   1. small, medium, large 세가지 크기가 있을 때 레이아웃이 깨지는 테스트 가능
3. 커스텀 스타일 가능
   1. 사용자가 임의의 색상을 지정했을 때 버튼 색을 테스트 가능

---

3. 사용을 해보며..

사용을 해보며 처음 storybook 코드를 작성을 해야 해서 번거로움이 있지만 위에서 설명한 바와 같이

1. 중복 코드 방지 (컴포넌트 재고 파악)
2. 자동 문서화
3. 사용 컨벤션 제공
4. 모든 상태의 명세화 및 자동 검증
5. 비즈니스 로직 없이 격리된 개발 환경

이러한 장점들을 생각하면 프로젝트 규모가 커졌을 때 storybook에 투자하는 시간 대비 좋은 효율이 나올 것 같다.