1. 시작하기
로컬 환경에서 Storybook을 실행하기 위해 Template 코드를 clone하고 필요한 설정을 합니다.
2. 간단한 컴포넌트 만들기: Task 컴포넌트
Task 컴포넌트를 만들어 다양한 상태를 테스트하고, @storybook/addon-a11y 를 통해 접근성 문제를 자동으로 감지하여 해결합니다.
3. 복합적 컴포넌트 조합하기
4. 데이터 처리
스토리북에서 리덕스와 연결된 컴포넌트를 테스트하기 위해 mock 스토어를 사용해 실제 데이터와 상호작용하는 방식으로 스토리를 구성합니다.
5. 화면 구성
컴포넌트 주도 개발(CDD)을 통해 UI를 점진적으로 구축하며, 각 컴포넌트의 독립성을 유지합니다.
주요 과정
- 화면연결하기
- API 서비스 모킹(Mocking)
- 컴포넌트 테스트
- 테스트 러너를 사용한 테스트 자동화
느낌점
막연하게 storybook으로 테스트할 수 있고 이런저런 강력한 기능을 제공하는 걸 알고는 있었지만 문서화 도구로만 사용하다가 이렇게 테스트도 하고 접근성 개선도 해보니 왜 다들 강력한 도구라고 하는지 알 것 같았다. 이 공부를 통해 많은 것을 가져갈 수 있다면 좋겠다.
github
https://github.com/hyoseong1994/taskbox
참고
https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/
개발 노트