이번에는 Storybook와 자바스크립트 라우팅 라이브러리를 통합하는 방법에 대해 알아보겠습니다. Storybook은 UI 컴포넌트 개발을 위한 도구로 많이 사용되고 있으며, 자바스크립트 라우팅 라이브러리는 SPA(Single Page Application)에서 페이지 이동을 관리하는 데 사용됩니다. 이 두 가지를 통합하여 개발 환경을 더욱 향상시킬 수 있습니다.
Storybook 설정
먼저 Storybook을 설정해야 합니다. 프로젝트 루트에 .storybook 디렉토리를 생성하고, 그 안에 main.js 파일을 만듭니다. 이 파일은 Storybook의 기본 설정을 담당합니다. 다음과 같은 내용을 추가합니다.
// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.js'],
};
다음으로, .storybook 디렉토리 안에 preview.js 파일을 생성합니다. 이 파일은 Storybook의 미리보기 설정을 담당하는 파일입니다. 다음과 같은 내용을 추가합니다.
// .storybook/preview.js
import { addDecorator } from '@storybook/react';
import { withNextRouter } from 'storybook-addon-next-router';
addDecorator(withNextRouter());
// 필요한 경우 라우터 설정 추가
// withNextRouter({
// path: '/',
// asPath: '/',
// query: {},
// push() {},
// replace() {},
// reload() {},
// back() {},
// prefetch() {},
// }),
자바스크립트 라우팅 라이브러리 통합
Storybook에 자바스크립트 라우팅 라이브러리를 통합하려면 storybook-addon-next-router 라이브러리를 설치해야 합니다. 다음 명령어로 설치할 수 있습니다.
npm install storybook-addon-next-router --save-dev
설치 후에는 preview.js에서 withNextRouter를 import하고, addDecorator 함수를 이용하여 라우터를 등록합니다.
import { addDecorator } from '@storybook/react';
import { withNextRouter } from 'storybook-addon-next-router';
위에서 추가한 preview.js 파일을 확인해서 주석 처리된 부분을 필요에 따라 수정해줍니다. 각각의 라우터 메소드는 비어있는 구현을 가지고 있으므로, 필요에 따라 접근 경로 등을 설정해줄 수 있습니다.
Storybook 실행
이제 Storybook을 실행할 차례입니다. 프로젝트 루트 경로에서 다음 명령어를 실행합니다.
npm run storybook
위 명령어를 실행하면 Storybook 서버가 실행되며, 웹 브라우저에서 http://localhost:6006에 접속하여 라우터가 통합된 Storybook을 확인할 수 있습니다.
결론
이번 포스트에서는 Storybook과 자바스크립트 라우팅 라이브러리를 통합하는 방법에 대해 알아보았습니다. 이를 통해 UI 컴포넌트 개발과 페이지 이동 관리를 통합하여 더 좋은 개발 환경을 구축할 수 있습니다.