[FE/Storybook] Storybook 이 뭘까, 그리고 왜 쓸까?

왜 갑자기 나는 storybook 이 궁금해졌는지...

새로 프로젝트를 시작하며, 다른 팀 동료분께서 프로젝트에 storybook 을 도입하셨다..!

그냥 UI 를 테스트하는 도구겠거니 하고 사실 잘 안보고 넘겼는데, 우리 팀에서 최신 스택들로 시작하는 프로젝트에서도 storybook 을 넣자는 이야기가 나왔다.

팀 내 유일한 프론트 개발자로서 내가 배워서 팀원들을 알려줘야 할 입장이기에 이번 기회에 뭔지 제대로 알아보려 한다.

 

---

Storybook

 

- UI 컴포넌트 개발 도구

    => 다시말해 로직과 관련 없는 UI 를 개발할 때 쓰며, 실제 개발하는 곳이 아닌 개발을 도와주는 도구다.

 

- 메인 어플리케이션과 별개로 따로 구동이 가능한 웹사이트 형태다. (포트번호를 달리해서 뜬다.)

 

- React, Vue, Angular 등 다양한 프레임워크에서 사용 가능하다.

 

 

 

Storybook 구성

 

- story 라는 기본 구성 단위로 구성되며, 하나의 UI 컴포넌트는 하나 이상의 story 를 가지게 된다.

하나 이상이라고 적은 이유는 각 상황에 따라 하나의 UI 컴포넌트가 어떻게 사용되는지를 story 로 만들어주기에 상황만큼 story 를 더 가질 수 있기 때문이다. 

 

ex) Button 컴포넌트를 만들었는데, type = "Alert" 인 경우, size = "small" 인 경우 등 여러 옵션이 있을 수 있음.

 

 

- Addon(애드온)이라는 기능을 사용하면 기본적인 기능 이외에도 여러 테스팅 등을 해볼 수 있는 기능들을 추가할 수 있다. (parameter 를 바꿔서 edge case 를 테스트해본다던지...)

=> 사실상 로직과 관련없는 UI 관련 테스트는 모두 가능하다는 뜻!

 

 

 

Storybook 장점

 

- storybook 을 이용해서 개발하는 개발자 : 로직에 독립적인 UI 렌더링 결과를 보며(시각적으로 테스트하며), UI 를 만들 수 있다. 

=> 문제가 생겼을 때 UI 문제인지 로직문제인지 발견하기 쉬울 거 같다. (storybook 에서 해보고 되면 로직을 잘못짜서인 것이니..)

 

- storybook 을 이용한 컴포넌트로 개발하는 개발자 : (storybook 을 잘 만들어놨다면,) 코드를 보지 않고도 UI 를 체험해서 바로 갖다쓰기 편하다.

 

 

 

Story 사용법

 

내가 굳이 정리할 필요는 없을 거 같고, 공식문서 또는 잘 정리해놓은 블로그에 잘 나와있다.