스토리북에서 콘솔 창에 발생한 에러.. Storybook: Frontend workshop for UI developmentStorybook 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 스토리북에서 value 값을 제어하면 url에 나오는데 어떤 값들에 대해서는 url에 등록되기 적절하지 않다고 판단하여 변경이 있더라도 url을 그대로 유지하고 콘솔에 저 경고를 띄우는 것 같다.적절하지 않다고 파악되는 값들로..
Storybook
@storybook/addon-designs GitHub - storybookjs/addon-designs: A Storybook addon that embeds Figma, websites, or images in the addon panel.A Storybook addon that embeds Figma, websites, or images in the addon panel. - storybookjs/addon-designsgithub.com designs addon을 활용하면 Figma 디자인을 스토리북에 불러올 수 있기 때문에, Figma에서 디자인한 컴포넌트와 스토리북 컴포넌트를 시각적으로 비교해가며 개발을 진행할 수 있다는 장점이 있다. 1. Installnpm install -D @sto..
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 크로마틱..
(React와 Styled-components로 진행) 개요공통 Input 컴포넌트를 만들면서 스토리북에서 input 값이 잘 입력 되는지 테스트 해보고 싶었다.그런데 onClick과는 달리 @storybook/test의 fn만 추가하는 것으로는 onChange 동작 및 바인딩된 함수를 테스트할 수가 없다.그래서 새롭게 useArgs를 사용했다. 구현CommonInput.tsximport { InputBox } from "./CommonInput.styles";export default function CommonInput({ value, placeholder, onChange }: Props) { return ( );} CommonInput.stories.tsximport { fn } f..
개인적으로 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. 컴포넌트 단위 개발스토리북을 사용하..
