user-thumbnail
@wlsdud2194
💻 공부하고 공유하는 것을 좋아하는 고등학생입니다
SERIES

storybook

Storybook 작성하기 #1 - 개요

2019년 11월 14일

이번 포스트에서는 Storybook 이라는 것을 알아볼까 합니다. Storybook은 UI 구성 요소(컴포넌트)를 개발하기위한 오픈 소스 도구입니다. 예전에는 페이지 단위의 개발을 하였다면 요즘에는 컴포넌트 단위로 프론트엔드를 개발하고, 많은 분들이 React, Vue나 Angular를 이용하여 개발합니다. 여기서 컴포넌트는 외부에 영향을 받지 않고 ...

Storybook 작성하기 #2 - 활용하기

2019년 11월 14일

지난 글에서 간단하게 Storybook이 무엇이고 어떤 기능을 제공하는지 알아보았습니다. 이번글에서는 React.js에서 Storybook을 어떻게 적용하고 사용하는지 간단한 투두리스트를 만들면서 알아보려고 합니다. 📙 Storybook-cli 설치 및 시작 먼저 간단하게 create-react-app을 이용하여 프로젝트를 생성하겠습니다. 이제 ...

Storybook 작성하기 #3 - 스냅샷 테스팅

2019년 11월 14일

지난 포스트에 이어 이번 글에서는 Storybook에서 스냅샷을 이용하여 컴포넌트 테스트 자동화를 해보겠습니다. 🖼️ Snapshot Testing? snapshot 테스트 케이스는 UI component를 렌더링한 뒤, 스크린샷을 찍고, 테스트 부근에 저장된 레퍼런스 이미지와 찍은 것들을 비교합니다. 만약 이전에 찍었던 이미지와 테스트했을 때와의...