유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

Storybook is actually good now, with Jeppe Reinhold

Svelte Society

2025. 10. 16.

0

#frontend
  • Storybook은 Chromatic이 후원하는 오픈소스 프로젝트로, 컴포넌트 개발을 위한 격리된 워크숍 환경을 제공하며, 실제 애플리케이션과 동일한 소스 코드와 Vite 설정을 공유합니다. 🛠️
  • 과거 Svelte와의 통합은 커뮤니티 기여에 의존하여 유지보수가 어려웠고, 특히 Webpack과 Vite의 충돌로 인해 설정이 복잡했습니다. 🚧
  • Britney의 Svelte Storybook 설정 실패 영상이 계기가 되어, Svelte에 열정적인 Jeppe가 Storybook 코어 팀에 합류하며 Svelte 통합 개선에 박차를 가했습니다. 🚀
  • SvelteKit 공식 패키지 출시로 제로-설정(zero-config) 환경을 제공하며, Svelte 코어 팀(Ben McCann, Dominic 등)과의 긴밀한 협력을 통해 통합이 크게 향상되었습니다. 🤝
  • Svelte CSF(Component Story Format)를 통해 Svelte 문법으로 스토리를 작성할 수 있게 되어, 슬롯/스니펫, Svelte 상태, 룬(runes) 등을 쉽게 다룰 수 있게 되었습니다. 📝
  • play 함수를 활용한 시각적 테스트 기능은 컴포넌트 상호작용을 Storybook UI에서 직접 확인하고 디버깅할 수 있게 하여, CLI 기반 테스트의 한계를 극복합니다. 👀
  • 발행된 Storybook 링크를 통해 디자이너나 협업자가 테스트 실패 지점에서 직접 상호작용하며 피드백을 줄 수 있어, 정적 이미지/영상보다 강력한 협업 도구로 활용됩니다. 🔗
  • 새로운 SvelteKit 통합은 매우 쉬운 설정 과정을 제공하며, Svelte 공식 문서에도 Storybook을 통한 테스트 방법이 설명되어 접근성이 높아졌습니다. ✅
  • Storybook은 컴포넌트 중심 개발(Component-Driven Development) 및 디자인 시스템 구축에 필수적인 도구로 자리매김하며, 초기 단계부터 버그를 줄이고 신뢰할 수 있는 컴포넌트를 만드는데 기여합니다. 🏗️

Recommanded Videos