디자인 시스템을 관리하고 컴포넌트를 개발하며, 때로는 실제 데이터를 사용해 UI 컴포넌트를 테스트해야 할 때가 있습니다. 이러한 요구사항을 충족시키기 위해, Storybook과 자바스크립트 딥러닝 라이브러리를 통합하여 사용할 수 있습니다.
Storybook은 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공해주는 툴입니다. 컴포넌트를 개발할 때 실제 데이터를 사용해 테스트하기 위해서는 데이터를 모의(mock)하는 방법이 필요합니다. 이를 위해 여러 딥러닝 라이브러리를 활용할 수 있는데, 여기서는 자바스크립트로 구현된 딥러닝 라이브러리인 TensorFlow.js를 예로 들어볼 것입니다.
1. Storybook 설치
먼저, Storybook을 설치해야 합니다. 아래 명령어를 터미널에 입력하여 설치할 수 있습니다.
npx -p @storybook/cli sb init
2. TensorFlow.js 설치
TensorFlow.js를 사용하기 위해 다음과 같이 npm을 이용하여 설치합니다.
npm install @tensorflow/tfjs @tensorflow-models/coco-ssd
3. TensorFlow.js를 활용한 컴포넌트 테스트
이제 딥러닝 라이브러리인 TensorFlow.js를 활용하여 Storybook에서 컴포넌트를 테스트해보겠습니다.
import React from 'react';
import { useModel } from '@tensorflow-models/coco-ssd';
import { render } from '@testing-library/react';
const ImageComponent = () => {
const [model, setModel] = React.useState(null);
// 모델 로딩
React.useEffect(() => {
const loadModel = async () => {
const loadedModel = await useModel();
setModel(loadedModel);
};
loadModel();
}, []);
// 이미지 분류
const classifyImage = async () => {
const image = document.getElementById('my-image');
if (image && model) {
const predictions = await model.detect(image);
console.log(predictions);
}
};
return (
<div>
<img id="my-image" src="https://example.com/my-image.jpg" alt="My Image" />
<button onClick={classifyImage}>Classify Image</button>
</div>
);
};
// Storybook에서 ImageComponent를 테스트하기 위한 스토리 작성
export const ImageComponentStory = () => <ImageComponent />;
위 코드는 TensorFlow.js를 사용하여 이미지를 분류하는 ImageComponent를 포함한 컴포넌트를 작성한 것입니다. 이제 Storybook에서 이 컴포넌트를 테스트할 수 있습니다.
4. Storybook에 컴포넌트 추가하기
테스트를 위해 작성한 컴포넌트를 Storybook에 추가해보겠습니다. .storybook/config.js 파일을 열고 해당 파일 안에 아래와 같은 코드를 추가합니다.
import { configure } from '@storybook/react';
// ImageComponent를 포함한 스토리 추가
configure(require.context('../src', true, /\.stories\.js$/), module);
이제 Storybook을 실행하면 ImageComponent를 포함한 스토리가 추가되어 테스트할 수 있게 됩니다.
마무리
위에서는 Storybook과 JavaScript 딥러닝 라이브러리인 TensorFlow.js의 통합을 소개했습니다. Storybook을 통해 컴포넌트를 테스트하고, TensorFlow.js를 이용해 실제 데이터를 사용하여 분류 작업을 수행할 수 있습니다. 이러한 방식을 통해 UI 컴포넌트의 효율적인 개발과 테스트가 가능해집니다.
참고자료: