노력하는 개발자 노력하는 개발자

Project/Figma+Storybook

• chromatic에 git action 설정

  Project/Figma+Storybook 2023. 10. 30. 15:36

  push 후 chromatic에 자동 배포되도록 설정해보자! 작업 흐름은 commit을 push한다던가 풀 리퀘스트를 만드는 것 같은 이벤트에 의해 트리거된다. 상호작용 테스트와 접근성 검사를 Jest로 수행합니다. 시각적 요소 그리고 구성 테스트를 크로마틱(Chromatic)으로 수행합니다. 사용자 흐름(user flow) 테스트를 사이프레스(Cypress)로 수행합니다. 1. chromatic.yml 파일 생성 https://www.chromatic.com/docs/github-actions/ Introduction • Chromatic docs Chromatic is a cloud based toolchain built around Storybook to help teams develop robus..

  Read More
• Storybook Webpack5 오류

  Project/Figma+Storybook 2023. 10. 27. 16:26

  깃에 있는 문서를 보면 create-react-app는 webpack5와 호환되지 않는다. (현재는) Storybook의 webpack5 지원을 시도하기 전에 프로젝트가 Webpack 5에서 작동하는지 확인하십시오. 예를 들어 create-react-app v4(CRA v4)는 webpack5와 호환되지 않으므로 CRA 프로젝트가 있는 경우 다음이 필요합니다. webpack5를 사용하는 CRA v5로 업그레이드합니다. 프로젝트에서 webpack5를 확인한 후에는 새로 설치하거나 업그레이드를 수행할 수 있습니다. 필자는 아래와 같이 webpack5의 종속성을 추가하였다. SB에도 webpack4 종속성이 포함되어 있으므로 webpack@5 dev 종속성은 webpack5를 끌어올리도록 강제한다. $ npm..

  Read More
• chromatic 배포 세팅

  Project/Figma+Storybook 2023. 10. 26. 17:46

  https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community. storybook.js.org chromatic 회원가입 아래 사이트 접속 후 회원가입을 진행한다. https://www.chromatic.com/ Automatically review, test, and document Storyboo..

  Read More
• 리액트 & 스토리북 설치

  Project/Figma+Storybook 2023. 10. 26. 15:05

  https://storybook.js.org/docs/react/get-started/install?ref=chromaticblog.ghost.io Install Storybook Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free. storybook.js.org 리액트 프로젝트 생성 $ npx create-react-app test-design-system --template ko 스토리북 등록 $ cd test-design-sy..

  Read More
• 디자인 시스템 & 스토리북 & 피그마란?

  Project/Figma+Storybook 2023. 10. 25. 17:16

  제일 많이 쓰이는 `스토리북`+`피그마` 조합으로 리액트 컴포넌트용 디자인 시스템 구축 과정을 기록해 보자! 아자아자! Bard. 디자인 시스템 디자인 시스템은 재사용 가능한 UI 컴포넌트, 스타일 가이드, 디자인 원칙 등을 포함하는 시스템입니다. 디자인 시스템을 사용하면 개발자는 일관되고 품질이 높은 사용자 인터페이스를 보다 쉽게 구축할 수 있습니다. Bard. 스토리북 https://storybook.js.org/ Storybook: Frontend workshop for UI development Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for ..

  Read More