# storybook

94개의 포스트
post-thumbnail

스토리 작성하기 (Storybook, TailwindCSS)

📚 Storybook + TailwindCSS 적용하기 Storybook과 TailwindCSS의 공식문서에 나와있는 가이드를 통해 설정을 완료를 하였음에도 yarn storybook 을 통해 Storybook 툴 내부를 확인하였으나 내가 생각한대로 css가 변경이

4일 전
·
0개의 댓글
post-thumbnail

[배경 지식] Storybook 시작하기(feat. React + TypeScript)

ICT 인턴을 '미리디' 라는 기업에서 미리캔버스 라는 웹사이트의 프론트엔드 개발자로 진행하고 있다. 여러가지 공부를 하고 있는데, 여기서 알게 된 것이 스토리북 이라는 것이다.이 가이드는 전문 개발자들이 디자인 시스템을 배울 수 있는 방법을 다루고 있습니다. 자바스크

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

Storybook 익히기 #1

스터디에서 좋은 사람들을 만나서, 프로젝트를 만들기로 했다.디자인과 백엔드를 담당해주시는 분이 한 분 있고, 프론트는 나까지 두 명이다. 이번에 스토리북을 써보기로 해서, 디자인이 나오기 전까지 스토리북과 리덕스를 대략적으로 공부를 해보고 있다.아직 디자인이 나오지 않

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

rollup + storybook 따라하기

왜 rollup인가? 스토리북의 기본 설정은 기존의 프로젝트에 같이 합쳐서 쓰는 것이다. 하지만 실제로 이렇게 써볼 경우 기본적으로 스토리북은 해당 프로젝트의 UI 컴포넌트에 종속적이 된다. 따라서 n개의 프로젝트에서 UI 컴포넌트를 쓰고, 해당 UI 컴포넌트를 독립적

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

Storybook이 뭔가요? 리덕스는 또 뭐죠?

스토리북 (Storybook) 스토리북은 리액트 UI 컴포넌트를 개발할 때 쓰이는 라이브러리다 전체 모양을 세우는 프레임워크와는 다르게 라이브러리는 필요한 부분만 쏙쏙 골라 쓸 수 있어서 편리하다 스토리북은 맨 처음 React만 지원했지만, 현재는 Vue도 지원한다.

2022년 4월 14일
·
1개의 댓글

storybook

회사에서 storybook을 사용하는데 처음봤다찾아보니 컴포넌트 단위의 개발을 할 때 컴포넌트가 어떻게 보여지고 어떻게 동작하는지 알 수 있게 해주는 툴이었다예를 들어 컴포넌트가 args로 color, size를 받는다면 스토리북을 통해 color와 size에 대해 임

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

[TS + storybook] 절대 경로 설정하기

최근에 하고 있는 프로젝트에서 import하는 파일들을 절대 경로로 관리하기 위해 설정을 했는데, storybook에서 config paths를 읽기 위해서는 추가적인 작업이 필요했다. 처음 알게 된 거라 기록해서 남기기로 한다.

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

StoryBook for React #1 세팅

React를 위한 Storybook 첫걸음

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

Next 환경에서 Storybook로 컴포넌트 개발하기

스토리북 구성하기 feat. knobs

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

Storybook 사용해보기

간단하게 storkbook을 사용해보고 후기를 작성해봅니다.컴포넌트 단위로 UI 개발을 지원하는 도구입니다. 실제 어플리케이션 실행과 별개로 컴포넌트 단위의 개발이 가능해집고 만든 컴포넌트를 공유할 수 있습니다.우선 cra를 해주고 storybook 추가를 위해 npx

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

storybook tutorial 한글로 번역하기

공식문서를 읽으며 스토리북에 대해 배우고, 오랫동안 쉰 영어공부도 재개할 겸 스토리북 튜토리얼 번역 프로젝트에 참가하게 되었다.

2022년 3월 5일
·
0개의 댓글

React 프로젝트에 Storybook 도입하기

평소에 리액트 컴포넌트 디자인 패턴을 프로젝트에 도입해보고 싶다는 생각은 막연하게 해봤는데, 막상 직접 해본 적은 없었다. 이번에 기회가 되어서 Storybook을 프로젝트에 도입하는 걸 기록해보려고 한다!

2022년 3월 4일
·
0개의 댓글

[FE쥬니어의 Design System] 01. Personal Design System, Storybook, Vite로 환경 설정하기

Storybook, Vite로 Personal Design System 개발 환경 설정한 방법

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

Next js StoryBook 배포(Netlify)

Storybook build build를 하면 위와같이 storybook-static폴더가 자동으로 생성된다

2022년 2월 28일
·
0개의 댓글
post-thumbnail

Storybook 기능 소개 3탄

스토리북 addon 기능에 대해 간단히 알아보자!

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

Storybook 기능 소개 2탄

이전 챕터까지는 다음과 같은 방식으로 props를 inline(?) 방식으로 전달해주면서 스토리를 작성했었다.이제는 args를 이용해서 스토리를 작성하는 방법을 알아보자.

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

Storybook 기능 소개 1탄

지난 챕터에서는 \*.stories.js파일에 직접 스토리를 작성해보았다. 이번 챕터부터는 실제로 사용할 때 편리한 스토리북의 기능들에 대해서 알아보자.

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

Story 작성하기

지난 챕터에서는 스토리북에 대해 알아보고 설치 방법과 스토리북을 실제로 작동시켜보았다.이번 챕터에서는 story들을 작성해보고 사용해보자.

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

Storybook 튜토리얼

ui 테스팅 라이브러리 Storybook에 대해 알아보자!

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