# storybook

144개의 포스트

[Storybook] 충돌하는 decorator 적용하기

스토리북 환경에서 react-router-dom의 라우팅, 여러 스타일 라이브러리의 ThemeProvider, Context 등을 적용하기 위해선 preview.js에서 decorator를 설정해주어야 한다.( 더 정확히는, 각 스토리북 컴포넌트 story -> 컴포넌

2일 전
·
0개의 댓글
·

팀 프로젝트 스터디 1주차) ESLint, Prettier, Storybook을 적용한 리액트 프로젝트 설정

이번 팀 프로젝트에 적용할 기술들을 학습하기위해 프론트엔드 팀 스터디를 진행하기로 계획하였다.피그마로 간단한 디자인CRA로 생성한 리액트 프로젝트에 eslint, prettier, storybook 설정하기자주 ESlint와 Prettier를 비슷한 기능을 하는 도구로

2022년 11월 9일
·
1개의 댓글
·
post-thumbnail

Storybook 초기 셋팅하기

지난번에 Storybook 을 셋팅했었는데, 다시 해보려니 잘 안되서 다시 작성해보는 스토리북 셋팅참고스토리북 공식 페이지Storybook-StoryBook을-이용한-컴포넌트-단위-개발-기본세팅 <- 2020년 6월 이후로 그대로 따라하기엔 부적절함npx crea

2022년 11월 5일
·
0개의 댓글
·
post-thumbnail

React에 Storybook 도입하기

Storybook은 컴포넌트 단위의 UI 개발 도구 입니다.React 프로젝트 안에 있는 많은 컴포넌트들을 문서화 할 수 있습니다.Storybook의 기본 단위는 story로 보통 UI 컴포넌트는 하나 이상의 story를 가진다고 할 수 있다.이 story를 통해서 이

2022년 11월 1일
·
0개의 댓글
·
post-thumbnail

[디자인 시스템] TopBar with Storybook

요즘 프로젝트를 진행중인데, 내가 프론트엔드 개발뿐만 아니라 디자인까지 맡아서 하려니까 살짝 힘들지만 재밌는 나날을 보내고 있다🙂 오늘은 TopBar의 디자인이 완성된 기념으로 TopBar 개발을 뿌실 예정이다 🔥 우선 양옆 Margin을 16px으로 정했다.

2022년 10월 28일
·
0개의 댓글
·

[ 📖 storybook] 사용법

storybook은 UI 컴포넌트 개발 도구이다. 실제 컴포넌트에 일일히 스타일을 입힐 필요 없이, 다양한 컴포넌트들을 따로 만들어서 적용시켜 볼 수 있다. 설치실행torybook 설치가 완료되면, /.storybook 폴더와 /src/stories 폴더가 생성된 것을

2022년 10월 27일
·
0개의 댓글
·
post-thumbnail

라이브러리와 함께 하는 Storybook 설정하기

다들 스토리북을 사용하면서 겪었을 문제라고 생각된다. 여러 라이브러리와 함께 이용할 시 골치아프다는것..지금부터 외부 라이브러리들과 스토리북을 함께 이용할때 스토리북을 설정하는 법을 알아보자!먼저 react router를 사용한다면 컴포넌트에 BrowserRouter를

2022년 10월 23일
·
0개의 댓글
·
post-thumbnail

[React - Error Handling] Storybook 적용 버튼에 onClick 이벤트가 적용되지 않는 이슈 🛠

BearMello 프로젝트를 진행하면서 겪은 에러 이슈에 대한 에러 핸들링 과정을 기록합니닷 👩‍🔧

2022년 9월 21일
·
0개의 댓글
·
post-thumbnail

[Storybook] 합성 컴포넌트의 스토리는 어떻게 작성하는데?

안녕하세요! 이번에는 저번 합성 컴포넌트(Composite component)의 스토리를 작성하는 방법에 대해 알아보도록 하겠습니다. 합성 컴포넌트는 간단히 저번 포스트에서 작성한 Input , Button 컴포넌트를 렌더링 하는 컴포넌트라고 생각하시면 됩니다. 즉,

2022년 9월 17일
·
0개의 댓글
·

노트 #67 | 스토리북 (Storybook) 개요

개요 CDD 지원 도구인 Component Explorer 중 하나인 Stroybook 에 대해 학습합니다. 학습 목표 Stroybook 의 정의 Storybook 의 목적과 기능 Storybook 의 사용법 (+배포) Storybook 개요 UI 개발, Compo

2022년 9월 16일
·
0개의 댓글
·
post-thumbnail

storybook -2

스토리북에 테일윈드 적용하기

2022년 9월 15일
·
0개의 댓글
·
post-thumbnail

storybook -1

storybook 스토리북

2022년 9월 13일
·
0개의 댓글
·
post-thumbnail

[Storybook] 스토리(Story)를 어떻게 작성하는데?

StoryBook에서 어떻게 Story를 작성하는지 알아보도록 하죠!

2022년 9월 8일
·
0개의 댓글
·
post-thumbnail

Storybook 활용기

이번에 Storybook을 한번 사용해보자는 아이디어가 개발 미팅에서 나와서 '이것은 무엇인고' 하고 알아보게 되었다. Component를 개발과 분리하여 독립적인 환경에서 빠르고 쉽게 UI 개발을 도와주는 UI 개발 도구라고 한다.

2022년 9월 4일
·
0개의 댓글
·
post-thumbnail

[Storybook] 스토리(Story)가 뭔데?

스토리북 GUI 환경과 스토리 파일을 살펴봄으로써 스토리가 무엇인지 알아보죠!

2022년 9월 4일
·
0개의 댓글
·
post-thumbnail

[Storybook] React 프로젝트에 어떻게 적용 하는데?

React 프로젝트를 생성해보고, 해당 프로젝트에 Storybook을 적용하는 방법에 대해 알아보죠!

2022년 9월 3일
·
0개의 댓글
·
post-thumbnail

[Storybook] 스토리북이 뭔데?

간단하게 스토리북(Storybook)이 무엇인지 살펴볼까요?

2022년 9월 1일
·
0개의 댓글
·
post-thumbnail

Storybook Deploy with Chromatic

퍼스널 브랜딩 디자인 시스템 제작기 :)

2022년 9월 1일
·
0개의 댓글
·
post-thumbnail

[UX Engineering] [Design System] storybook - intro

storybook 을 찾았다 !

2022년 8월 29일
·
0개의 댓글
·
post-thumbnail

[UX Engineering] [Design System] storybook - install

storybook docs 따라보면서 프로젝트에 포함시켜보기

2022년 8월 29일
·
0개의 댓글
·