본문 바로가기

storybook

(2)
[Storybook/ Vue3] Play 함수를 이용하여 컴포넌트 상호작용 자동화 Storybook 공식 문서를 번역한 글입니다. https://storybook.js.org/docs/vue/writing-stories/play-function Play function 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 Play 함수는 스토리가 렌더링된 후 실행되는 작은 코드 스니펫입니다. 다음과 같은 용도로 사용할 수 있습니다. 사용자 대신 컴포넌트와 상호작용 테스트 시나리오를 ..
스토리북 개발팀이 알려주는 컨테이너 / 프리젠터 패턴 - Context API를 이용해 의존성 주입하기 스토리북 공식 문서에서 container / presenter 패턴의 사용 사례에 대해 배워봅니다. 스토리북을 전혀 몰라도 패턴에 대해 배우실 수 있습니다. 페이지(화면)을 만드는 방법 BBC, Guardian 및 Storybook 유지보수 팀은 순수한 프레젠테이션 페이지를 만듭니다. 이 방법을 사용하면 Storybook에서 페이지를 렌더링하기 위해 특별한 작업을 수행할 필요가 없습니다. 여기서 특별한 작업이라 함은 모킹, 몽키 패치를 이용한 의존성 주입을 의미합니다. 화면 단계까지 프리젠테이셔널 컴포넌트로 작성하는 것은 간단합니다. 스토리북 외부에 있는 앱의 단일 래퍼 컴포넌트에서 모든 지저분한 "connected" 논리를 수행한다는 아이디어입니다. 스토리북 소개 튜토리얼의 Data 장에서 이 접근 방..