# storybook

hyehyeonmoon

Storybook controls를 이용해 MSW 응답을 조작할 수 있게 만들었습니다. 즉, 1개의 story에서 여러 개의 MSW 응답을 받을 수 있게 되면서 다수의 story를 생성해야 하는 불편함을 해소했습니다.

nabang6047

g

bami

스토리북과 관련된 일련의 포스트들은 React를 가지고 작성되었습니다.이번에는 Storybook이라는 도구에 대해서 알아보도록 하겠습니다.Srotybook은 컴포넌트를 개발(과 관리, 변화 추적 등)하는데 도움을 주는 오픈 소스 툴입니다. 처음엔 React 개발을 위해

bzeromo

react 컴포넌트 연습

bzeromo

react.js Ⅲ

ethan_world

atom 요소인 Input 의 포커스 여부와 유저 인풋을 받기위한 setState 함수를 molecule단에서 만들어서 props로 내려줬다. 스토리북에서 해당 molecule은 정상작동 하지만, atom의 포커스를 넣으면 setIsFocused is not a fu

bzeromo

react.js 사용하기 Ⅱ

pds0309

svg컴포넌트를 만들었는데 그 전에 svg를 못 가져오는 것 같다!nextjs와 storybook에서 svg파일을 컴포넌트처럼 사용하기 위해 @svgr/webpack이라는 라이브러리를 사용하고 있었고 svg파일을 react component로 변환해주는 웹팩로더 설정을

gyultang

(localhost:6006)하나의 개발환경이자 UI컴포넌트를 테스트할 수 있는 플레이그라운드리액트 애플리케이션 밖에서 동작하므로 리액트 애플리케이션내의 비즈니스로직을 신경쓰지 않는다.비즈니스로직과 분리하여 UI만 독립적으로 테스팅이 가능하다. 1) 이미 개발된 다양

jeongda

storybook은 UI 컴포넌트를 분리해서 개발하여 테스트하고 문서화할 수 있는 개발 도구인데 다른 개발자, 디자이너와 협업하고 유지보수를 진행하는 것을 편리하게 한다. 컴포넌트의 상태 변화 및 이벤트 등을 시각적으로 확인할 수 있어 개발자의 작업 효율성을 높여주는

gth1123

스토리북에서 스토리를 작성하는 방법에 대해 간단히 정리해보자 스토리북은 한마디로 말하면 컴포넌트의 어떤 props을 전달한 스냅샷을 찍어놓은 것이다

gth1123

storybook을 세팅하는 것은 간단하다https://storybook.js.org/docs/react/get-started/installnpx storybook init 을 하면 설치 및 예제까지 세팅이 된다그런데 사내 UI 라이브러리에서 scss를 glo

jinic

UI 개발을 위한 도구 storybook web components with lit: https://piyushsinha.tech/introduction-to-storybook-for-web-componentshttps://webcomponents.

doodoo

Storybook 시작하기 ✨

sunwoo020

기획자로부터 하나의 페이지 기획이 도착했고, 디자이너와 개발자가 협력하여 디자인과 개발이 진행되었다.페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했다.그런데 기획자가 버튼에 대한 기획을 이전에 요청했던 버튼과 똑같이 사용하도록

jinic

https://www.daleseo.com/storybook/

lee2302

재사용할 수 있는 UI컴포넌트를 만들면 편하고 공유하기도 좋지 않을까 하는 개발방식에 해결법과 같다.레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발방식을 말한다.CDD를 활용한 개발 방법은 컴포넌트 단위로 만들어 페이지를 조립하는 개발 방

jinnkimm7

스토리북 UI 컴포넌트를 모아서 문서화하고 보여주는 오픈소스툴이다. (Storybook is an open source tool for building UI components and pages in isolation.) 개발자는 컴포넌트를 스토리북에 등록해놓을 수 있고, 어떤 컴포넌트가 있는지 확인 할 수 있다. StoryBook 설치하기 우선 리액트를...

wns450

부트캠프에서 Storybook에 대하여 배웠지만 딱히 활용도를 느끼지 못했다.이번에 프로젝트를 진행하면서 컴포넌트화를 시도 했고, 많은 컴포넌트가 생겨나면서어떤 컴포넌트를 가지고 있는지 헷갈리는 경우가 생겨서 효율적(100%)으로 컴포넌트들을 사용하지 못했다.그래서 그

doodream

프론트엔드 개발자의 퍼블리싱 더 좋을 순 없을까?