스토리북

CommonButton 예시import { fn } from "@storybook/test";import { Meta } from "@storybook/react";import CommonButton from "./CommonButton";const meta: Meta = { title: "Button/CommonButton", component: CommonButton, decorators: [ (Story) => ( ), ], parameters: { layout: "centered", // 중앙 배치 }, tags: ["autodocs"], // 문서 자동 생성 argTypes: { text: { control: "text" }..

Chromatic을 이용한 배포가 가장 쉽고 간편하다. 심지어 CI (지속적 통합), 즉 자동 배포를 지원한다. 그리고 채팅 응답률이 높고 신경을 많이 써주는 느낌을 받았다. (답장 안하니까 해결했는지 계속 물어보더라....)   Visual testing & review for web user interfacesChromatic scans every possible UI state across browsers to catch visual and functional bugs. Assign reviewers and resolve discussions to streamline team sign-off.www.chromatic.com  설치npm install --save-dev chromatic   크로마틱..

개인적으로 styled-components 좀 좋아한다. 잘만 만들면 재사용성이 꽤나 높기 때문에 (잘! 만들면..)그래서 storybook 테스팅을 진행하며 styled-components를 적용하는 법을 정리해보려고 한다.  Styled-components 환경 설정  Integrate Styled Components with Storybook | StorybookStyled Components is a css-in-js framework to build fast and functional components.storybook.js.org  1. styled-components 설치 npm install styled-components  2. addon-themes 설..

스토리북 튜토리얼을 보고 따라해보려고 했으나 생각보다 어려웠고, 그냥 스토리북 프로젝트 생성하면 나오는 예제 참고해서 뚝딱뚝딱 연습해봤다.  스토리북 프로젝트 생성반드시 기존 프로젝트 위에 생성할 필요는 없다. 그래서 난 독립적으로 생성 npx -p @storybook/cli sb init   6006포트에 스토리북 페이지가 열린다. 이제 여기서 UI 컴포넌트를 확인하고 테스트하면 된다. // 실행npm run storybook .storybook 이라는 폴더가 생성된다. 그 안에 두 가지 파일이 있다.⬇ main.tsimport type { StorybookConfig } from "@storybook/react-vite";const config: Storyboo..

우선 storybook을 알고 쓰려면 디자인 시스템에 대한 이해가 필요하다.  디자인 시스템디자인 원칙과 규격, 재사용 가능한 UI 패턴과 컴포넌트, 코드를 포괄하는 시스템디자이너와 개발자를 연결하는 다리 역할서비스 인터페이스의 일관성 유지에 도움코드의 재사용성을 통해 더 빠르고 효율적인 개발이 가능 프로젝트 시 일반적으로 생성하는 공통 컴포넌트가 이 디자인 시스템의 가장 대표적인 예시이다. 그렇다면 스토리북은 어떤 도구이며, 왜 사용하는 것일까? 스토리북  프론트엔드 개발에서 UI 컴포넌트를 개발, 테스트 및 문서화하는 데 사용되는 강력한 도구 스토리북을 "워크벤치"로 사용하여 앱 밖에서 UI 컴포넌트를 구축  사용 이유1. 컴포넌트 단위 개발스토리북을 사용하..