React를 위한 Storybook 튜토리얼

Storybook을 개발 환경에 설치해봅시다

Storybook은 개발 모드에서 앱과 함께 실행됩니다. 이것은 비즈니스 로직과 컨텍스트로부터 UI 컴포넌트를 독립적으로 분리하여 만들수 있도록 도와줍니다. 본 Storybook 문서는 React를 위한 것입니다. 그 밖의 React Native, Vue, Angular 그리고 Svelte에 대한 문서도 있습니다.

Storybook과 여러분의 앱

React Storybook 설치하기

개발 환경에 빌드 프로세스를 설정하려면 몇 가지 단계를 거쳐야 합니다. 먼저 React App 생성하기(CRA)를 사용하여 빌드 시스템을 설정하고 StorybookJest 테스트를 앱에서 활성화해야 합니다. 아래의 명령어들을 실행해주세요:

# 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의 테스트 스크립트 부분에 이 플래그를 추가하여 모든 테스트가 실행되도록 하실 수 있습니다.

프런트엔드 앱의 3가지 양상 : 자동화된 테스트 (Jest), 컴포넌트 개발 (Storybook), 그리고 앱 그 자체.

3가지 양상

앱의 어느 부분을 작업하고 계신가에 따라, 하나 또는 그 이상을 동시에 실행하기를 원하실 수 있습니다. 현재는 단일 UI 컴포넌트를 만드는 데 초점을 두고 있기 때문에, Storybook을 계속 실행해두도록 하겠습니다.

CSS를 재사용하기

Taskbox는 GraphQL과 React 튜토리얼 연습 예제를 재사용할 것이므로 CSS를 따로 작성할 필요가 없습니다. 컴파일된 CSSsrc/index.css 파일에 복사하여 붙여넣기 해주세요.

Taskbox의 UI

만약 스타일 변경을 원하신다면 LESS 소스파일들은 GitHub 저장소에 있습니다.

Asset 추가하기

의도된 디자인에 맞도록 글꼴과 아이콘 디렉터리들을 모두 다운로드해서 public 폴더 안에 넣어주세요. 터미널에서 다음 명령어를 실행하세요.

npx degit chromaui/learnstorybook-code/public/font public/font
npx degit chromaui/learnstorybook-code/public/icon public/icon

다음 명령어들은 Github로부터 쉽게 파일과 폴더를 다운로드할 수 있도록 degit을 사용하였습니다. 만일 수동으로 다운로드하고 싶으신 경우 여기에서 폴더를 직접 가져오실 수 있습니다.

스타일과 asset을 추가하신 후에 앱이 약간 이상하게 랜더링 될 것입니다. 우리가 앱을 아직 작업하지 않았기에 괜찮습니다. 그럼 첫 번째 컴포넌트 제작을 시작해보겠습니다!

Next Chapter
간단한 컴포넌트
간단한 컴포넌트를 독립적으로 만들어봅시다