스토리북(Storybook) UI 설치하기

https://storybook.js.org/

먼저 나는 CRA(create-react-app)를 통하여 react 기반의 프로젝트를 세팅해두었다.

하단의 코드를 이용하여 스토리 북을 설치해준다.

npx sb init

잘 설치되었는지 확인하려면 package.json에 storybook이 들어왔나 확인하거나 폴더 구조에서 storybook 폴더의 생성을 확인하는 것도 간단한 방법이다.

.storybook 폴더 하위에는 main.js와 preview.js라는 두 파일이 생성되어있는데, main.js는 스토리북 config 설정들을 하는 스트립트 파일이며, preview.js는 모든 스토리들에 공통적으로 적용할 포맷 등을 세팅하는 곳이라고 생각하면 된다. 이는 조금 더 공부한 후에 따로 포스팅을 할 예정이다.

각설하고, 스토리북 설치 확인의 가장 좋은 방법은 직접 실행하는 부분인데, 하단의 코드를 통하여 실행하면 6006 포트에서 스토리북 페이지가 열리게 된다.

npm run storybook

여기까지 되었다면 스토리북 설치가 완벽하게 된 셈이다.

스토리북은 친절하게도 트라이얼 버전을 한국어로 따로 만들어두었다. 혹시 관심있으신 분들은 공식 홈페이지에서 제공하는 트라이얼을 따라 공부해 보는게 제일 정확한 방법일 것 같다.

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/

React를 위한 Storybook 튜토리얼