# storybook

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

[배경 지식] Storybook 시작하기(feat. React + TypeScript)
ICT 인턴을 '미리디' 라는 기업에서 미리캔버스 라는 웹사이트의 프론트엔드 개발자로 진행하고 있다. 여러가지 공부를 하고 있는데, 여기서 알게 된 것이 스토리북 이라는 것이다.이 가이드는 전문 개발자들이 디자인 시스템을 배울 수 있는 방법을 다루고 있습니다. 자바스크
Storybook 익히기 #1
스터디에서 좋은 사람들을 만나서, 프로젝트를 만들기로 했다.디자인과 백엔드를 담당해주시는 분이 한 분 있고, 프론트는 나까지 두 명이다. 이번에 스토리북을 써보기로 해서, 디자인이 나오기 전까지 스토리북과 리덕스를 대략적으로 공부를 해보고 있다.아직 디자인이 나오지 않
rollup + storybook 따라하기
왜 rollup인가? 스토리북의 기본 설정은 기존의 프로젝트에 같이 합쳐서 쓰는 것이다. 하지만 실제로 이렇게 써볼 경우 기본적으로 스토리북은 해당 프로젝트의 UI 컴포넌트에 종속적이 된다. 따라서 n개의 프로젝트에서 UI 컴포넌트를 쓰고, 해당 UI 컴포넌트를 독립적

Storybook이 뭔가요? 리덕스는 또 뭐죠?
스토리북 (Storybook) 스토리북은 리액트 UI 컴포넌트를 개발할 때 쓰이는 라이브러리다 전체 모양을 세우는 프레임워크와는 다르게 라이브러리는 필요한 부분만 쏙쏙 골라 쓸 수 있어서 편리하다 스토리북은 맨 처음 React만 지원했지만, 현재는 Vue도 지원한다.
storybook
회사에서 storybook을 사용하는데 처음봤다찾아보니 컴포넌트 단위의 개발을 할 때 컴포넌트가 어떻게 보여지고 어떻게 동작하는지 알 수 있게 해주는 툴이었다예를 들어 컴포넌트가 args로 color, size를 받는다면 스토리북을 통해 color와 size에 대해 임
[TS + storybook] 절대 경로 설정하기
최근에 하고 있는 프로젝트에서 import하는 파일들을 절대 경로로 관리하기 위해 설정을 했는데, storybook에서 config paths를 읽기 위해서는 추가적인 작업이 필요했다. 처음 알게 된 거라 기록해서 남기기로 한다.

Storybook 사용해보기
간단하게 storkbook을 사용해보고 후기를 작성해봅니다.컴포넌트 단위로 UI 개발을 지원하는 도구입니다. 실제 어플리케이션 실행과 별개로 컴포넌트 단위의 개발이 가능해집고 만든 컴포넌트를 공유할 수 있습니다.우선 cra를 해주고 storybook 추가를 위해 npx
.jpg)
storybook tutorial 한글로 번역하기
공식문서를 읽으며 스토리북에 대해 배우고, 오랫동안 쉰 영어공부도 재개할 겸 스토리북 튜토리얼 번역 프로젝트에 참가하게 되었다.
React 프로젝트에 Storybook 도입하기
평소에 리액트 컴포넌트 디자인 패턴을 프로젝트에 도입해보고 싶다는 생각은 막연하게 해봤는데, 막상 직접 해본 적은 없었다. 이번에 기회가 되어서 Storybook을 프로젝트에 도입하는 걸 기록해보려고 한다!
[FE쥬니어의 Design System] 01. Personal Design System, Storybook, Vite로 환경 설정하기
Storybook, Vite로 Personal Design System 개발 환경 설정한 방법

Next js StoryBook 배포(Netlify)
Storybook build build를 하면 위와같이 storybook-static폴더가 자동으로 생성된다

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

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

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