# storybook

codenmh0822

최근에 nextjs(v13)+typescript+twin.macro+storybook+테스팅라이브러리 환경의 프로젝트를 시작하였다. 이전에는 storybook을 제외하였지만 이번에는 TDD + CDD 기반을 다지며 프로젝트를 진행하고싶었기에 storybook을 추가로

seobbang

Storybook의 기본 개념에 대하여

crg1050

디자인 시스템, 아토믹 디자인, storybook을 활용한 디자인 시스템 등에 대해 학습했다.디자인 원칙 부터 재사용할 수 있는 UI 패턴과 컴포넌트 코드로 구성된 시스템전체 서비스에 효율적이고 일관된 디자인을 적용할 수 있도록 도와준다.디자인 원칙, 스타일 가이드,

kdeun1

Storybook 7을 설치해보자.

yooonsh

https://laurentcazanove.com/articles/storybook-nuxt-guide/위 정보를 따라 nuxt3기반 storybook을 셋팅하고 있었다,,???아니 난 순서대로 잘 하고 있었는데 왜 오류가 나지심지어 다른 분들 다 잘되고 나만

93minki

스토리북 배포하기 공식 문서를 참고 했다.공식문서에 상세하게 절차가 나와 있지만 조금 더 상세하게 알아본다.우선 Next 또는 React 프로젝트를 하나 생성한다.그리고 npx storybook@latest init 명령어를 사용해서 스토리북을 설치한다.latest로

jooooo

sns 프로젝트에서 공통 컴포넌트 작업을 맡게 되었다. 팀원들에게 내가 구현한 컴포넌트 사용법을 잘 공유할 수 있는 방법을 찾다가 storybook을 적용하게 되었다. storybook은? UI 컴포넌트를 분리해서 개발하여 테스트하고 문서화할 수 있는 개발 도구인데

rjsduf0503

이번에 처음으로 NPM 라이브러리를 개발하면서 Chromatic을 이용해 storybook을 배포하는데는 성공했지만, 매번 빌드 후 다시 push하는 과정이 귀찮았다. 따라서 github action과 Chromatic CI/CD를 활용해 배포 자동화를 시도했다. gi

kimphysicsman

1. 개요 > 어제 작업에 이어서 오늘은 angular 컴포넌트를 storybook으로 이동시켜 자동으로 디자인페이지를 구성하여 확인할 수 있게하였고 이를 npm 패키지로 배포하는 단계까지 진행했다. 2. storybook 적용하기 > 1) storybook 설치

jaehojung94

스토리 (Story): 스토리는 개별 컴포넌트에 대한 시각적인 표현입니다. 스토리북에서 각 스토리는 특정 상태나 속성을 갖는 컴포넌트의 인스턴스입니다. 예를 들어, 버튼 컴포넌트의 "기본 상태", "활성 상태", "비활성 상태" 등의 다양한 스토리를 만들 수 있습니다.

bluejoyq

eslint로 .storybook 내부의 파일도 인식하고 싶었는데 eslint에서 인식을 못했다.eslint 기본 설정에서 숨김 처리된 폴더는 무시한다. https://github.com/eslint/eslint/issues/8429mono repo일반적인 경

hyevvy

오늘 프론트 개발자들끼리 이야기를 나누다 "StoryBook이 필요할까?"라는 주제가 나왔다.나는 그동안 사이드프로젝트에서는 StoryBook을 꽤나 많이 사용했기 때문에 이런 주제에 대해 별 고민을 해본 적이 없었다.그래서 이번 기회에 스토리북에 대해 톺아보려고 한다

lovesyung

기존의 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 등의 라이브러리의 등장으로 컴포넌트 단위 개발이 주류가 되었지만, CSS는 그렇지 못했다는 점에서 출발한 개념이다. <span style="background-color:<span

jooyong-boo

스토리북 v7 이상에서 styled-components theme를 적용하려했는데 적용이 잘 안되는 문제가 있었다

swim1720

안녕하세요 :) 개발자 Sean입니다.이번주 새로운 프로젝트를 시작하며 아키텍쳐와 사용할 라이브러리에 대해 고민하고, 기본 틀을 세팅하는 시간을 가져보았습니다. 이번에는 ui 라이브러리로 chakra를 이용해 약간의 커스터마이징을 하고,storybook을 통해 컴포넌트

support

Next.js 프로젝트 생성Yarn berry 적용package.json - packageManager 3버전 이상이라면 적용 성공yarn.lock 마이그레이션의존성에 문제가 있는지 확인문제가 없다면 nodemodules 삭제.yarnrc.yml 파일에 추가zero-i

jeong_eeeun

프로젝트를 하면서 chakra-ui를 사용하며 storybook을 사용함. UI 스타일이 적용 안되는것을 확인... 찾아보니 addon이 따로 필요하다더라. storybook >6.4 일 경우에 필요하다. 아래와 같은 라이브러리가 필요하다.설치 후 .storybook/

hahbr88

install터미널에 위 명령어를 입력한다.npx storybook@next init스토리북 설치할거냐고 물어보는데 y 를 누르고 엔터를 친다.현재 7.0.2 버전으로 설치 할 수 있다.설치메세지그러면 위와 같은 메세지가 나오고 조금만 기다리면 패키지 설치가 시작된다본

ckstn0777

이번 시간에는 Custom Checkbox를 만드는 방법과 이 때 나타난 여러 이슈에 대해 적어볼까 합니다. 회사에 퍼블리셔 과장님이 계셨어서 그 동안 HTML, CSS를 소홀히 했는데 앞으로는 프론트엔드 개발자가 다 할 줄 알아야 하기 때문에 분발해야겠습니다.

shanik21

스토리북 테마 생성 퀵스타트(https://storybook.js.org/docs/react/configure/theming해당 링크에 더욱 자세히 설명되어 있습니다. 해당 글은 Storybook 프로젝트로 초기화 후 진행할 수 있습니다. .storybook