Storybook은 사용자 인터페이스 컴포넌트의 개발 및 문서화를 위한 툴입니다. 자바스크립트 앱 개발 시 Storybook을 사용하면 컴포넌트를 독립적으로 테스트하고 문서화할 수 있습니다. 이러한 장점은 개발 후 앱을 배포할 때까지 계속 유지될 수 있도록 자동화와 CI/CD 환경과 연동하는 것이 중요합니다. 이 글에서는 Storybook을 자동화하고 CI/CD와 연동하는 방법에 대해 알아보겠습니다.
1. Storybook 자동화
1.1 Storybook 설정
Storybook을 자동화하려면 먼저 프로젝트에 Storybook을 설정해야 합니다. 프로젝트 루트 디렉토리에서 다음 명령어를 실행하여 Storybook을 설치합니다.
npm install @storybook/vue --save-dev
프로젝트 디렉토리에 .storybook 디렉토리를 생성하고, .storybook/main.js 파일을 만듭니다. main.js 파일에는 다음과 같이 설정을 추가합니다.
module.exports = {
stories: ["../src/**/*.stories.js"],
addons: ["@storybook/addon-actions", "@storybook/addon-links"],
};
1.2 스토리 작성
Storybook은 스토리 파일을 통해 컴포넌트를 작성합니다. src 디렉토리에 Button.stories.js 파일을 생성하고, 다음과 같이 스토리를 작성합니다.
import { storiesOf } from "@storybook/vue";
import Button from "./Button.vue";
storiesOf("Button", module).add("Default", () => ({
components: { Button },
template: "<Button label='Click me' />",
}));
1.3 자동 실행 스크립트 추가
Storybook을 자동으로 실행할 수 있는 스크립트를 추가해야 합니다. package.json 파일에 다음과 같이 스크립트를 추가합니다.
"scripts": {
"storybook": "start-storybook -p 6006"
}
이제 npm run storybook 명령어를 실행하면 로컬에서 Storybook이 실행됩니다.
2. CI/CD 연동
2.1 CI 설정
Storybook을 CI/CD와 연동하기 위해 CI를 설정해야 합니다. 대표적인 CI 도구로는 Jenkins, Travis CI, Circle CI 등이 있습니다. 각 CI 도구의 문서를 참고하여 프로젝트를 CI에 등록하고, 프로젝트를 빌드하고 테스트할 수 있는 환경을 구성합니다.
2.2 CI 스크립트 작성
CI에서 Storybook을 자동으로 실행하려면 CI 스크립트를 작성해야 합니다. CI 스크립트는 CI 도구의 설정 파일 또는 스크립트로 작성할 수 있습니다. 예를 들어, .travis.yml 파일에 다음과 같은 스크립트를 추가할 수 있습니다.
script:
- npm run storybook
CI가 실행될 때, 자동으로 Storybook이 실행되고 스토리 파일들이 테스트됩니다.
2.3 배포 자동화
Storybook을 배포 자동화하려면 CI 스크립트에 배포 스크립트를 추가해야 합니다. 배포 스크립트는 사용하는 CI 도구와 배포하는 환경에 따라 달라질 수 있습니다. 예를 들어, 배포 스크립트를 작성하여 호스팅 서비스 (예: Netlify, Vercel)에 Storybook을 자동으로 배포할 수 있습니다.
3. 마무리
이제 Storybook을 자동화하고 CI/CD와 연동하는 방법에 대해 알아보았습니다. Storybook을 프로젝트에 도입하고 자동화 및 CI/CD 환경과 연동하여 개발과 배포를 효율적으로 관리할 수 있습니다. 이를 통해 컴포넌트를 독립적으로 테스트하고 문서화할 수 있어 개발 생산성을 높일 수 있습니다.
참고 자료: