storybook 설치 및 사용 (Vue3)

기존 프로젝트의 소스를 따서 신규 프로젝트를 진행 예정이라고 하길래 관련된 라이브러리를 확인하던 도중 storybook 이라는 라이브러리를 발견하였다.

설치부터 해보면서 배우는것이 최고의 방법이기 때문에 설치 시작!
storybook-tutorials : https://storybook.js.org/docs/vue/get-started/introduction

설치방법

1. npx storybook init
   이렇게 사용하면 패키지를 자동으로 분석하여 설치해준다.
   그럼 나는 vue3+vite를 사용중이기 때문에 확인 후 설치를 해준다.

2. eslintPlugin 을 사용할것이냐고 묻는데 나는 Yes
   

설치된 package들 이다.

그러면 .storybook 이라는 폴더가 생기고, src아래 stories라는 폴더가 또 생긴다.

3. 설치 완료 되었고 , yarn storybook 명령어를 사용하여 실행!
   

따로 localhost의 주소를 주지 않아도 자동으로 설정되어 실행된다.

추가적인 셋팅은 조금씩 공부를 더 하면서 추가하도록 하겠다!