Storybook 설정하기

1. 스토리북 설치

• 스토리북을 설치해준다.

yarn add -D @storybook/nextjs

2. 웹팩 설치

yarn add --dev webpack

※ 또잇또잇에서는 생략해도 됐을지도..? 이미 설치가 되어있었던 것 같기도 하다.

3. 스토리북 초기화

npx sb init

• 터미널 결과

• 이 과정 후 자동으로 package.json에 script들이 추가되며, 필요한 패키지(@storybook/~~)들이 설치된다.

  

• 그리고 루트 폴더에 .storybook 폴더가 생성되고, 그 안에 main.ts 파일과 preview.ts 파일이 생성된다. 이들은 스토리북 설정 파일들이라고 한다.

• 추가로 ./stories/...도 만들어지는데, 이는 스토리북 샘플 코드이다! 나중에 스토리북을 실행한 뒤 스토리북 실행 화면에서 확인이 가능하다.

4. 스토리북 실행