테스트
테스트의 중요성
- 복잡한 컴포넌트 상태 조합을 수작업으로 검토하는 것은현실적으로 불가능하여 UI 버그 방지와 유지보수 효율성을 위해 자동 테스트 필요
시각적 테스트(Chromatic)
- UI 외관의 변경 여부를 감지.
- 기준 스크린샷과 변경 스크린샷 비교 → 차이 발생 시 알림.
- 수동 리뷰 시간 절약, UI 회귀 방지.
단위 테스트(Jest + React Testing Library 등)
- 컴포넌트의 기능 테스트.
- Link 컴포넌트가 올바른 href를 갖는지 테스트.
- CI 파이프라인에서 자동 실행 설정 가능.
접근성 테스트(Storybook의 @storybook/addon-a11y)
- 장애가 있는 사용자도 사용할 수 있도록 UI를 검증.
기타 테스트 전략
- 스냅샷 테스트(jest)
- 컴포넌트의 마크업을 저장/비교
- 예측 불가, 유지보수 어려움
- E2E 테스트(Selenium, Cypress, playwrite)
- 사용자 플로우 테스트
- 복잡한 컴포넌트에만 제한적 활용 가능
문서
디자인 시스템은 컴포넌트 재사용을 통해 개발 비용을 절감할 수 있지만 재사용되지 않으면 의미 없음 → 문서화는 재사용을 촉진하는 핵심 수단.
문서화의 어려움
기능 추가와 동시에 문서 유지보수는 번거롭고 비효율적이며 대부분 문서는 빠르게 구식이 되어 신뢰도가 떨어짐 → 컴포넌트 재사용 저해.
문서화의 이상적인 조건
- 🔄최신 상태 유지
- ✍️글쓰기를 용이하게 하기 위한 마크다운과 같은 친숙한 쓰기 도구를 사용
- ⚡️유지보수 시간 단축을 통해 팀이 글쓰기에만 집중 가능한 환경 조성
- 📐상용구 기능을 제공하여 개발자가 공통 패턴을 재작성 하는 것을 방지
- 🎨맞춤형 기능을 제공하여 유난히 복잡한 유즈 케이스 및 컴포넌트를 위한 유용성 제공
Storybook을 활용한 자동 문서화
Storybook Docs 애드온 사용 시, 기존 스토리에서 자동으로 문서를 생성 가능.
Canvas 탭: 컴포넌트 개발 환경
Docs 탭: 자동 생성된 문서(미리보기, 소스 코드, 인자 테이블 등)를 제공.
JSDoc 주석, PropTypes 주석을 통해 인자 설명 추가가능
MDX 기반 고급 문서화
MDX를 사용하면 문서의 구조, 순서, 내용 완전 제어 가능.
📚 문서 중심 페이지 작성
Intro.stories.mdx와 같은 독립 문서 페이지를 만들어 소개 및 가이드 문서 제공.
.storybook/main.js에서 로드 순서 제어로 첫 화면에 노출 가능.
온라인 퍼블리싱
build-storybook --docs 명령어로 배포 전용 문서 빌드 가능.
배포
배포 섹션은 실습위주 내용이라 정리하지 않습니다.
작업 흐름(workflow)
| 단계 | 설명 |
|---|---|
| 1. 설계 | 새로운 컴포넌트 정의 및 Story 작성 |
| 2. 문서화 | 자동 Docs + PropTypes로 문서 보완 |
| 3. 리뷰 | PR + Storybook 링크로 협업 리뷰 |
| 4. 테스트 | Chromatic으로 시각적 회귀 테스트 |
| 5. 배포 | Auto + GitHub Actions로 자동 배포 |
참고
개발 노트