Randomly 프로젝트 - Storybook 적용기

Randomly 프로젝트 - Storybook 적용기

 

 

 

개발을 하면서 jest로 만든 함수들을 유닛테스트 하였는데, 컴포넌트 단위로 테스트를 할 수 있는 Storybook도 추가적으로 알게 되었다.

 

이 storybook을 사용하면 내가 만든 컴포넌트들을 개별적으로 테스트해볼 수 있어 내 코드의 품질을 더 높일 수 있을 것이라 생각되었다.

 

그렇다면, 이 Storybook에 대해서 한 번 알아보고 도입해보자!

 

 

 

---

🧐 Storybook 넌 누구냐?

 

Storybook은 UI 컴포넌트를 개발하고 테스트하는 도구로 개발자들이 UI 컴포넌트의 개발과 디버깅을 더욱 쉽게 할 수 있도록 돕는 오픈 소스 도구이다.

 

Storybook을 사용하면 UI 컴포넌트를 개별적으로 테스트하고 독립적으로 개발할 수 있으며, 빠른 개발과 디자인 시스템의 요지 보수를 가능하게 한다.

 

 

 

---

 

🥰 Storybook의 이점

1. UI 컴포넌트의 개발과 디버깅이 용이해진다. UI 컴포넌트를 개별적으로 렌더링하므로 개별적인 컴포넌트의 상태와 렌더링 결과를 확인할 수 있다.
2. UI 컴포넌트의 문서화가 쉬워진다.
3. 컴포넌트를 개별적으로 테스트하고 개발할 수 있으므로 재사용성과 일관성을 높일 수 있다.

 

 

---

🫡 적용해보자!

 

npx @storybook/cli sb init

 

설치!

 

 

해당 명령어로 설치하면

 

📦.storybook
 ┣ 📜main.js
 ┗ 📜preview.js

 

이렇게 root 디렉터리에 .storybook 폴더가 생성된다.

 

src/ 내부에도 stories 폴더가 생성되는데, 예시 파일들이라서 모두 삭제해주고 내가 테스트할 컴포넌트를 작성해주었다.

 

컴포넌트명.stories.tsx 로 작성하면된다.

 

나는 댓글 컴포넌트를 테스트해보려고 먼저 만들어 봤다.

 

 

 

 

comment.stories.tsx

 

 

title: storybook에 올릴 component 폴더 계층 구조

component: story를 만들 컴포넌트 이름

 

이후 테스트할 컴포넌트를 정의한다.

 

나는 Comment 컴포넌트를 불러와 comment 변수에 담아주었다.

 

이후 exComment01 이라는 변수에 Comment 컴포넌트에서 사용되는 데이터값들을 넣어주어서 스토리를 작성했다.

 

 

 

 

 

 

npm run storybook

Storybook 실행

 

 

 

 

 

http://localhost:6006/ 으로 접속하면 내가 등록한 컴포넌트가 Storybook에 뜬 것을 확인할 수 있다.

 

이전에 등록된 댓글 데이터를 그대로 가져와봤는데, exComment01에 등록한 그대로 잘 나온다.

 

Control 값을 수정하면 그대로 잘 반영도 된다.

 

 

 

 

 

 

 

 

앞으로 이 Storybook을 잘 사용해보면서 현재 만들어진 여러 컴포넌트와 내가 만들 컴포넌트들을 테스트해보고 관리해봐야겠다.