Storybook 활용하기

Imnottired·2023년 2월 14일
0

부트캠프에서 Storybook에 대하여 배웠지만 필요성을 느끼지 못했다

이번에 프로젝트를 진행하면서 컴포넌트화를 시도 했고, 많은 컴포넌트가 생겨나면서
어떤 컴포넌트를 가지고 있는지 헷갈리는 경우가 생겨서 효율적(100%)으로 컴포넌트들을 사용하지 못했다.
그래서 그러한 문제점 개선 방안을 Sample Page가 있으면 좋겠다 라고 생각했다
그러던 중 Storybook이 떠올라 공부하게 되었다.


https://www.youtube.com/watch?v=XIMON_SEge0
Storybook 기본적인 활용법

https://www.youtube.com/watch?v=jc9xKzdkYDg
Say Hello to Storybook: 스토리북을 통한 React UI 컴포넌트 개발

https://www.youtube.com/watch?v=xQOpjychnwQ&t=855s
개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기 - 2021 Korean version

3개 영상을 참고해서 정리하였다.
제일 좋았던 영상은 마지막 영상 내용이 포인트를 잘정리하여 좋았다.
목차가 3개 다 없어서 내용 정리는 좀 힘들었다.

Storybook을 이용하면 SamplePage에 대한 내용이 줄어들고 별도의 팝업과정없이 빠르게
이것저것 트라이를 해볼 수 있다.
props값도 바꿔 볼 수 있고 컬러도 바꿔볼 수 있다.

그리고 어떠한 컴포넌트인지 빠르게 인지할 수 있어 앞으로 사용 atomic패턴에 도움이 될 것이라 생각하였다.

특히 2번째 영상은 4년전 영상이 된데도 아토믹 패턴을 사용하고 그에 대해 연계로 스토리북을 사용한다는 점이 인상 깊었다.

부트캠프에서 배울 때는 컴포넌트화에 대한 메커니즘을 알지 못해서 몰랐는데,
연계성에 대해 이어서 잘설명하니 중요한 부분이라고 생각이 들었고, 이번에 잘접목해서 배워볼 예정이다.

그리고 어떠한 좋은 발명을 해도 어떻게 활용될지 그려져야 사람들이 사용할거 같다는 생각도 들어서 남에게 설명할 포인트들을 잘 알아낸거같아서 좋았다.

profile
새로운 것을 배우는 것보다 정리하는 것이 중요하다.

0개의 댓글