스토리북 시작하기
작성일 : 2022.10.30 / 수정일 : 2022.10.30
들어가며
이번 장은 스토리북 설치와 실행방법에 대해 작성한다.
0. 스토리북이 뭔가요?
스토리북은 UI를 컴포넌트 단위로 개발하고 테스트 하기 위한 도구다.
공식 한국어 번역본에는 다음과 같이 스토리북을 설명하고 있다.
Storybook은 UI 개발을 위한 도구입니다. 구성 요소를 분리하여 개발을 더 빠르고 쉽게 만듭니다. 이렇게 하면 한 번에 하나의 구성 요소에서 작업할 수 있습니다. 복잡한 개발 스택을 시작하거나 특정 데이터를 데이터베이스에 강제로 넣거나 애플리케이션을 탐색할 필요 없이 전체 UI를 개발할 수 있습니다.
기본적으로 React를 베이스로 만들어졌으며, React Native, Vue, Angular, Svelte, Ember 등 다양한 프론트엔드 프레임워크에 확장중이다.
react 외에 다른 프레임워크는 사용해보지 않아 사실 잘 모르겠다.
참고링크
1. 스토리북 설치
주의! 스토리북은 프레임워크가 설정된 프로젝트에 설치해야함.
1. 사전 개발환경 세팅
스토리북은 기존 프로젝트가 있다는 전제로 사용가능하다. 필자는 다음과 같은 개발환경의 프로젝트에 스토리북을 설치하였다.
- 필자의 개발환경 : Next.js(12.2.0), React(18.2.0), typescript(4.6.2), Storybook(6.5.13)
2. 루트 디렉토리에서 커맨드 실행
프로젝트의 루트 디렉토리에서 다음과 같은 명령어를 실행한다.
npx storybook init
3. 설치 완료 후 변경사항 확인
package.json에 다음과 같은 내용이 추가됨.
- 루트 디렉토리에
.storybook폴더가 생성되고 기본 설정파일들이 생성됨.
- src/stories 경로에 storybook 관련 템플릿 파일들이 생성됨.
설치 시 발생했던 에러
상황
npx storybook init 커멘드 실행 시 발생
해결
프로젝트 내의 node_modules/sb 폴더를 삭제 후 npx storybook init 커멘드 실행 시 정상적으로 설치 진행됨.
2. 스토리북 실행
위처럼 스토리북이 설치되었으면 다음 명령어를 통해 실행해볼 수 있다.
npm run storybook
스토리북 실행 시 기본 설정과 템플릿이 적용된 privew 화면 확인할 수 있다.
사이드 바의 작성한 스토리와, 상단의 preview/docs 탭, 하단의 control 탭을 확인할 수 있다.
마치며
공식 문서도 리액트는 한글화가 되어있고(가이드 부분) 설치는 생각보다 어렵지는 않다. 설치는 어렵지는 않은데,,
막상 실행하려 하다보니 많은 에러를 만나볼 수 있었다.😇😇😇
트러블 슈팅과 관련된 내용은 종합적으로 3장에서 정리하고자 한다. 다음 2장에선 스토리북 설정에 대해 알아보겠다.