Post

react 개발을 위한 Storybook 활용하기

Storybook 은 독립적인 컴포넌트를 개발할 수 있으며, 컨포넌트를 조합해 Story 에서 테스트해볼 수 있다.
React 개발에 유용하게 쓰이고 있기 떄문에 사용하게 되었다.

1. 스토리북 설치


먼저 Storybook 사용하기 위한 초기세팅을 해줍니다.

1
2
npx sb init  // 초기세팅
npm add --dev react-docgen-typescript-loader  // 컴포넌트 테이블을 만들기 위해 설치함

image

1~2분 정도 걸려 위 같이 출력되었다면 설치 끝!!
설치가 완료되었다면 아래 명령어를 통해 실행해보겠습니다. (localhost:6006 포트에서 확인가능)

1
npm run storybook  // or yarn storybook

image


2. 폴더 구조


추후에 포스팅 예정


3. 스토리 만들기


추후에 포스팅 예정

This post is licensed under CC BY 4.0 by the author.