Storybook (3) 썸네일형 리스트형 [ Storybook 스터디 5주차 ] [ 테스트 ]# UI 컴포넌트 테스트의 기초무엇이 테스트에 적합할지 알아보자.디자인시스템은 UI 컴포넌트로 구성된다. 각 UI 컴포넌트에는 일련의 입력(속성)들이 주어졌을 때 의도한 외관과 느낌을 설명하는 스토리들이 포함되어 있다.그런 다음 최종 사용자를 위해 브라우저 또는 장치에서 스토리를 렌더링한다. 한 컴포넌트에는 여러 상태가 포함되어있다.상태에 디자인 시스템 컴포넌트의 수를 곱해본다면, 모든 상태를 추적하는 것이 불가능하다는 걸 알 수 있다.그래서 지금 자동테스트를 설정해야한다. # 외관에 대한 시각적 테스트디자인 시스템에는 시각적인 UI 컴포넌트가 포함되어있다.시각적 테스트는 렌더링된 UI의 시각적 측면을 검증한다.시각적 테스트는 일관된 브라우저 환경에서 모든 UI 컴포넌트의 이미지를 캡쳐한다... [ Storybook 스터디 4주차 ] [디자인 시스템 소개]- 거대 기술기업부터 신생 스타트업까지 회사들은 시간과 비용을 아끼기 위해 UI패턴을 재사용하는 방식 도입 # 다지인 시스템을 왜 사용하는가?재사용이 가능한 사용자 인터페이스는 새로운 개념이 아니다. 스타일가이드, UI키트 및 공유가능한 위젯은 예전부터 존재했다.UI컴포넌트 : 사용자인터페이스를 이루고 있는 조각들의 시각적이고 기능적인 속성을 캡슐화 (like 레고) 디자이너, 개발자 모두 UI 컴포넌트를 다루고 있다.디자인 시스템은 두 분야를 연결하는 다리.조직의 공용 컴포넌트에 대한 '단일한 진실의 원천(source of truth)'이 된다. 프러덕션 디자인 시스템은 UI 컴포넌트와 프런트엔드 인프라구조를 포함해야한다.3가지 기술적 파트- 재사용이 가능한 공용 UI 컴포넌트- .. [ Storybook ] Storybook의 args, parameters # args- 컴포넌트가 어떻게 렌더링되어야 하는지에 대해 하나의 자바스크립트 객체로 정의를 해놓은 것- 컴포넌트의 props, slot, style, input 등 다양한 속성값을 지정하는데 사용되는 객체- 컴포넌트의 다양한 상태를 시각적으로 테스트하고 문서화할 수 있다. ## 특징1. 동적 속성 : 스토리북의 UI에서 속성값을 실시간으로 변경 가능. 컴포넌트의 다양한 상태를 쉽게 확인2. 재사용성 : 여러 스토리에서 동일한 args를 재사용 가능. 코드중복을 줄이고 일관성 유지가능import { Button } from './Button';export default { component: Button,};export const Primary = { args: { primary: true, .. 이전 1 다음
