Storybook

https://storybook.js.org/showcase/

처음 도입하게 된 계기는 모든 FE 개발자들이 너무 많은 Component로 인해 어떤게 무슨 Component 인지 확인이 어려워 다 따로 구현하는 점 그리고 관심도 문제로 도입하고 싶어했다. 타 회사의 쇼케이스를 본다면 보통 디자인 컴포넌트를 정의하고, 해당 컴포넌트를 확인하는 용도로 사용하는거 같았다.

 

우리팀에서 처음 적극적으로 사용해봤는데, 우리는 DatePicker, TextField 같은 작은 컴포넌트 뿐만 아니라 Epic에 필요한 큰 단위의 컴포넌트와 페이지까지도 스토리북에 올렸다. 그 이유는

• 무거운 프로젝트를 npm run dev 하지 않고 npm run storybook 을 통해 가볍게 사용할 수 있었다.
• 작은 컴포넌트, 작은 컴포넌트들이 합쳐진 컴포넌트부터 만들고 페이지를 나중에 한 번에 구성했기 때문에 확인할 곳이 필요했다.

어떻게 사용하는게 정답인지는 모르겠지만 우리 팀에 필요한 요구대로 사용해보니 편하고 좋았다.

물론 나중에 작은 컴포넌트들이 합쳐진 컴포넌트와 페이지는 사실 다신 볼일이 없어서 지워야하나 싶긴 했다.