제목: React Storybook 애드온 Knobs가 표시되지 않는 문제 해결 팁
소개
React Storybook은 단독으로 UI 컴포넌트를 개발하는 데 유용한 강력한 도구입니다. 그 중 유용한 애드온 중 하나는 “Knobs” 애드온으로, UI 패널을 통해 컴포넌트 props를 대화식으로 편집할 수 있습니다. 그러나 Storybook에서 Knobs가 나타나지 않는 문제가 발생할 수도 있습니다. 이 블로그 포스트에서는 이 문제를 해결하기 위한 문제 해결 팁을 살펴보고 Knobs를 다시 작동시킬 수 있는 방법을 알아보겠습니다.
팁 1: 애드온 구성 확인
첫 번째 단계는 “Knobs” 애드온이 Storybook에서 제대로 구성되어 있는지 확인하는 것입니다. 프로젝트에 “@storybook/addon-knobs”와 “@storybook/react”와 같은 필요한 패키지가 설치되어 있는지 확인하십시오. 또한, addon-knobs/register 모듈을 가져와 Storybook 구성 파일(.storybook/addons.js)에서 애드온이 등록되어 있는지 확인하십시오.
import '@storybook/addon-knobs/register';
팁 2: 데코레이터 설정
다음으로, 스토리 파일에서 “withKnobs” 데코레이터가 올바르게 설정되어 있는지 확인하십시오. 이 데코레이터는 스토리에 대한 Knobs 지원을 추가합니다. 이를 개별적으로 특정한 스토리에 적용하거나 모든 스토리에 대한 데코레이터로서 전역적으로 적용할 수 있습니다.
import { withKnobs } from '@storybook/addon-knobs';
stories.addDecorator(withKnobs);
팁 3: Storybook 레이아웃 확인
일부 경우에는 Storybook의 애드온 패널이 사라지거나 화면 밖에 위치하여 Knobs가 보이지 않을 수 있습니다. 다음 코드를 실행하여 Storybook 레이아웃을 재설정해 볼 수 있습니다:
localStorage.removeItem('storybook-layout');
팁 4: URL 쿼리 매개변수
Storybook URL에 수동으로 쿼리 매개변수를 추가한 경우 Knobs의 가시성에 문제가 발생할 수 있습니다. 불필요한 쿼리 매개변수를 제거해보세요. 예를 들어 다음과 같이 쿼리 매개변수 없이 Storybook에 접근할 수 있습니다: http://localhost:6006.
팁 5: 버전 호환성
Storybook이나 Knobs 애드온의 특정 버전을 사용하는 경우 호환성 문제가 있는지 확인하십시오. 원활한 통합을 위해 두 가지의 최신 버전을 사용하는 것이 좋으며 알려진 버그를 피할 수 있습니다.
결론
Knobs 애드온을 추가한 React Storybook은 UI 컴포넌트를 개발하고 테스트하는 데 훌륭한 도구입니다. 그러나 Knobs가 표시되지 않는 문제가 발생한 경우 걱정하지 마세요! 이 블로그 포스트에서 제시한 문제 해결 팁을 따라 문제를 식별하고 해결할 수 있을 것입니다. 애드온 구성을 확인하고 데코레이터 설정을 검토하고 필요할 때 Storybook 레이아웃을 재설정하고 URL 쿼리 매개변수를 검토하고 버전 호환성을 확인하는 것을 잊지 마십시오. 즐거운 Knobs 셋팅을 하세요!
