2021.08.12(Tue.) <Storybook JS를 이용한 React 컴포넌트 디자인의 기초>

누르면 스토리북 홈페이지로 이동합니다.

1. Storybook?

• 일명, 컴포넌트 탐색기
• 모든 컴포넌트들을 각각 따로 한꺼번에 보면서 테스트해 보는 일을 할 수 있다. 진짜 우리 컴퓨터에 있는 '탐색기'를 생각하면 된다.

2. 굳이 왜 사용하죠?

• 그렇다. 안 써도 된다. 하지만 쓰면 더 행복해진다.
• 프로젝트를 완성시켜 놓고 컴포넌트에 어떤 부분을 수정하려고 하면 어디 있는지 찾는 일부터, 혹시나 있을 예상 하지 못한 결과를 프로젝트 안이 아닌 밖에서 미리 해 보고 적용할 수 있다.
• 다른 개발자나 디자이너들과 협업을 할 때도 확실히 보여줄 수 있기 때문에 편리하다!

3. 기본 셋팅

• npx degit chromaui/intro-storybook-react-template taskbox로 기본 프로젝트를 설치한다. 리액트로 돌아가기 때문에 리액트 앱을 하나 설치하는 샘이다.
• cd taskbox로 들어가 실행한다.
• npx -p @storybook/cli sb init으로 현재 만들고 있는 프로젝트에서도 설치가 가능하다.

4. 어떻게 사용할까?

• Vs 코드로 실행시켜서 components폴더를 만든다.
• 안에 각각의 원하는 컴포넌트의 폴더를 만들어 그 안에 js파일을 만든다.
• 그리고 작업 후에 다시 스토리북 react파일을 npm run storybook로 실행시켜 보면, 만든 ui를 볼 수 있다.
• Backpack UI에 다양한 대모가 있다. 참고하면 고수들의 작업물을 따라 만들 수 있을 것이다.

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

React를 위한 Storybook 튜토리얼

https://storybook.js.org/docs/react/get-started/examples

Example Storybooks

• 위의 두 가지 사이트를 잘 돌아본다면 더 편하게 사용할 수 있을 것이다.