# storybook
[Storybook] 충돌하는 decorator 적용하기
스토리북 환경에서 react-router-dom의 라우팅, 여러 스타일 라이브러리의 ThemeProvider, Context 등을 적용하기 위해선 preview.js에서 decorator를 설정해주어야 한다.( 더 정확히는, 각 스토리북 컴포넌트 story -> 컴포넌
팀 프로젝트 스터디 1주차) ESLint, Prettier, Storybook을 적용한 리액트 프로젝트 설정
이번 팀 프로젝트에 적용할 기술들을 학습하기위해 프론트엔드 팀 스터디를 진행하기로 계획하였다.피그마로 간단한 디자인CRA로 생성한 리액트 프로젝트에 eslint, prettier, storybook 설정하기자주 ESlint와 Prettier를 비슷한 기능을 하는 도구로
Storybook 초기 셋팅하기
지난번에 Storybook 을 셋팅했었는데, 다시 해보려니 잘 안되서 다시 작성해보는 스토리북 셋팅참고스토리북 공식 페이지Storybook-StoryBook을-이용한-컴포넌트-단위-개발-기본세팅 <- 2020년 6월 이후로 그대로 따라하기엔 부적절함npx crea
React에 Storybook 도입하기
Storybook은 컴포넌트 단위의 UI 개발 도구 입니다.React 프로젝트 안에 있는 많은 컴포넌트들을 문서화 할 수 있습니다.Storybook의 기본 단위는 story로 보통 UI 컴포넌트는 하나 이상의 story를 가진다고 할 수 있다.이 story를 통해서 이
[디자인 시스템] TopBar with Storybook
요즘 프로젝트를 진행중인데, 내가 프론트엔드 개발뿐만 아니라 디자인까지 맡아서 하려니까 살짝 힘들지만 재밌는 나날을 보내고 있다🙂 오늘은 TopBar의 디자인이 완성된 기념으로 TopBar 개발을 뿌실 예정이다 🔥 우선 양옆 Margin을 16px으로 정했다.
[ 📖 storybook] 사용법
storybook은 UI 컴포넌트 개발 도구이다. 실제 컴포넌트에 일일히 스타일을 입힐 필요 없이, 다양한 컴포넌트들을 따로 만들어서 적용시켜 볼 수 있다. 설치실행torybook 설치가 완료되면, /.storybook 폴더와 /src/stories 폴더가 생성된 것을
라이브러리와 함께 하는 Storybook 설정하기
다들 스토리북을 사용하면서 겪었을 문제라고 생각된다. 여러 라이브러리와 함께 이용할 시 골치아프다는것..지금부터 외부 라이브러리들과 스토리북을 함께 이용할때 스토리북을 설정하는 법을 알아보자!먼저 react router를 사용한다면 컴포넌트에 BrowserRouter를
[React - Error Handling] Storybook 적용 버튼에 onClick 이벤트가 적용되지 않는 이슈 🛠
BearMello 프로젝트를 진행하면서 겪은 에러 이슈에 대한 에러 핸들링 과정을 기록합니닷 👩🔧
[Storybook] 합성 컴포넌트의 스토리는 어떻게 작성하는데?
안녕하세요! 이번에는 저번 합성 컴포넌트(Composite component)의 스토리를 작성하는 방법에 대해 알아보도록 하겠습니다. 합성 컴포넌트는 간단히 저번 포스트에서 작성한 Input , Button 컴포넌트를 렌더링 하는 컴포넌트라고 생각하시면 됩니다. 즉,
노트 #67 | 스토리북 (Storybook) 개요
개요 CDD 지원 도구인 Component Explorer 중 하나인 Stroybook 에 대해 학습합니다. 학습 목표 Stroybook 의 정의 Storybook 의 목적과 기능 Storybook 의 사용법 (+배포) Storybook 개요 UI 개발, Compo
Storybook 활용기
이번에 Storybook을 한번 사용해보자는 아이디어가 개발 미팅에서 나와서 '이것은 무엇인고' 하고 알아보게 되었다. Component를 개발과 분리하여 독립적인 환경에서 빠르고 쉽게 UI 개발을 도와주는 UI 개발 도구라고 한다.
[Storybook] React 프로젝트에 어떻게 적용 하는데?
React 프로젝트를 생성해보고, 해당 프로젝트에 Storybook을 적용하는 방법에 대해 알아보죠!
[UX Engineering] [Design System] storybook - install
storybook docs 따라보면서 프로젝트에 포함시켜보기