Series

[ 살펴보기 ] - Storybook

Frontend UI documentation library인 storybook을 살펴보자.

[ 살펴보기 ] Storybook - Basics
Storybook은 Project에서 사용되는 compopnent에 대한 documentation을 만들고자 할 때 사용하기 좋은 library다. 초기 설정은 Project의 구성마다 조금씩 다르므로 documentation을 참고하자. 해당 포스트는 NextJS + MUI library를 기준으로 진행된다. Nextjs root 경로에서 다음 command를 실행하면 stroybook을 사용하기 위한 기초적인 세팅이 project에 추가된다...
Sep 23, 20246 min read14
[ 살펴보기 ] Storybook - Story
이전 포스트에서 살펴보았듯이 component의 특정 상태를 표현하기 위해 story를 추가하면 storybook의 특정 상태의 component를 확인할 수 있다. 이번 포스트에선 Story를 선언할 때 함께 사용하는 property들을 살펴보자. Args 실제 component가 전달 받는 props을 story에선 args property를 통해 설정할 수 있다. 아래의 예제를 살펴보자 // button.storeis.ts import ...
Sep 24, 20247 min read13
[ 살펴보기 ] Storybook - Addons
Storybook은 addon을 통해 여러가지 기능을 제공한다. 이번 포스트에선 Storybook이 default로 사용하는 중요 addons을 살펴보자. Actions Component의 click이나 mouseover등 event가 호출 되었을 때 해당 event에 대한 event handler가 있다면 해당 event handler가 호출 되었을 때 전달받은 parameter를 조회할 때 사용할 수 있다. 다음 예제를 살펴보자. impo...
Sep 26, 20246 min read11
[ 살펴보기 ] Storybook - Configuration
.storybook/main.ts 파일 npx storybook@latest init 명령을 통해 storybook을 설치했다면 .storybook 폴더에 main.ts 파일이 존재하는데 main.ts을 통해 story 파일의 위치 및 사용할 addon 또는 framework 관련 설정을 한다. main.ts 파일은 .storybook 폴더 안에 위치해야 하며 .storybook 폴더 역시 project의 root level에 위치해야 한다. ...
Oct 2, 20244 min read4

Command Palette