[ Storybook for Vite ] React Vite TypeScript 프로젝트에 Storybook 도입하기
React 2023. 4. 14. 16:10

어쩌다가 도입하게 되었는지? 최근 AWS 프론트엔드 모임에서 Storybook에 대한 소개 발표를 들었다. 해당 기술을 현재 프로젝트에 도입하게 된다면 매우 실용적으로 활용할 수 있다는 생각이 들어서 대표님께 강력 어필을 하고, 결국 '당장 도입!!' 이라는 결과를 얻을 수 있었다. Storybook 도입 여정 Storybook 설치 공식 문서 https://storybook.js.org/docs/react/get-started/install Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, ..

[ Storybook for Designer ] Storybook과 Figma 연결하기
자두의 도전 일지 2023. 4. 13. 16:07

Storybook는 여러 플랫폼에서 UI 컴포넌트를 개발, 테스트 및 문서화하기 위한 오픈 소스 도구입니다. Storybook을 사용하여 다음과 같은 작업을 할 수 있습니다: 서로 다른 플랫폼과 기기에서 사용할 수 있는 코드 기반의 컴포넌트를 만듭니다. 디자이너, 엔지니어 및 프로덕트 매니저와 함께 작업합니다. 전체 어플리케이션을 실행하지 않고도 상호작용 가능한 개발 환경에서 컴포넌트를 쇼케이스 합니다. 컴포넌트 구현에 대한 다양한 사용 사례 및 예제를 보여줍니다. 프로토타이핑, 테스트 및 문서화를 위한 애드온을 설치합니다. Storybook과 Figma를 연결하면 디자인을 Storybook에서 볼 수 있으며, Figma에서 story를 볼 수 있습니다. Storybook의 디자인 애드온은 코드 기반의 ..