개발 환경에서 스토리 북 설정 

Storybook은 개발 모드에서 앱과 함께 실행됩니다. 앱의 비즈니스 로직 및 컨텍스트에서 분리 된 UI 구성 요소를 빌드 하는 데 도움이 됩니다. Learn Storybook의 이번 에디션은 React 용입니다. React Native, Vue, Angular 및 Svelte에 대한 다른 버전이 있습니다.

https://www.learnstorybook.com/intro-to-storybook/react/en/get-started/ 

React Storybook 설정 

사용자 환경에서 빌드 프로세스를 설정하려면 몇 가지 단계를 수행해야 합니다. 먼저 Create React App (CRA)을 사용하여 빌드 시스템을 설정하고 생성 된 앱에서 Storybook 및 Jest 테스트를 활성화하려고 합니다. 다음 명령을 실행 해 보겠습니다.

# Create our application:
npx create-react-app taskbox

cd taskbox

# Add Storybook:
npx -p @storybook/cli sb init

이 튜토리얼 버전에서는 대부분의 명령을 실행하기 위해 yarn을 사용할 것입니다. Yarn이 설치되어 있지만 대신 npm을 사용하려는 경우 걱정하지 마십시오. 문제 없이 자습서를 계속 진행할 수 있습니다. 위의 첫 번째 명령에 --use-npm 플래그를 추가하기 만하면 CRA와 Storybook이 이를 기반으로 초기화됩니다. 또한 자습서를 진행하는 동안 npm 대응 명령에 사용되는 명령을 조정하는 것을 잊지 마십시오.

애플리케이션의 다양한 환경이 제대로 작동하는지 빠르게 확인할 수 있습니다.

# Run the test runner (Jest) in a terminal:
yarn test --watchAll

# Start the component explorer on port 9009:
yarn storybook

# Run the frontend app proper on port 3000:
yarn start

--watchAll 플래그를 테스트 명령에 추가 한 것을 눈치 채셨을 것입니다. 의도적인 것이니 걱정하지 마세요. 이 작은 변경으로 모든 테스트가 실행되고 모든 것이 애플리케이션에서 정상인지 확인할 수 있습니다. 이 튜토리얼을 진행하는 동안 다양한 테스트 시나리오에 대해 소개하게 되므로 전체 테스트 스위트가 실행되는지 확인하기 위해 package.json의 테스트 스크립트에 플래그를 추가하고 고려할 수 있습니다.

세 가지 프런트 엔드 앱 양식 : 자동 테스트 (Jest), 구성 요소 개발 (Storybook) 및 앱 자체.

작업 중인 앱 부분에 따라 이러한 기능 중 하나 이상을 동시에 실행할 수 있습니다. 현재 초점은 단일 UI 구성 요소를 만드는 것이므로 Storybook을 계속 실행하겠습니다.

Reuse CSS 

Taskbox는 GraphQL 및 React Tutorial 예제 앱의 디자인 요소를 재사용하므로 이 튜토리얼에서 CSS를 작성할 필요가 없습니다. 이 컴파일 된 CSS를 복사하여 src/index.css 파일에 붙여 넣으십시오.

스타일을 수정하려면 소스 LESS 파일이 GitHub 저장소에 제공됩니다.

Add assets 

의도한 디자인과 일치 시키려면 글꼴 및 아이콘 디렉터리를 모두 다운로드하고 해당 콘텐츠를 공용 폴더에 배치해야 합니다.

svn (Subversion)을 사용하여 GitHub에서 파일 폴더를 쉽게 다운로드했습니다. Subversion이 설치되어 있지 않거나 수동으로 수행하려는 경우 여기에서 직접 폴더를 가져올 수 있습니다.

svn export https://github.com/chromaui/learnstorybook-code/branches/master/public/icon public/icon
svn export https://github.com/chromaui/learnstorybook-code/branches/master/public/font public/font

스타일과 자산을 추가하면 앱이 약간 이상하게 렌더링 됩니다. 괜찮아. 지금은 앱을 개발하고 있지 않습니다. 첫 번째 구성 요소를 구축하는 것부터 시작합니다!