# storybook

195개의 포스트
post-thumbnail

Storybook + twin.macro 설정을 통해 배운점

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

2023년 6월 2일
·
0개의 댓글
·
post-thumbnail

StoryBook

Storybook의 기본 개념에 대하여

2023년 5월 31일
·
1개의 댓글
·
post-thumbnail

[💻 코드스테이츠 FE 44기] [UX/UI] Design System, Component Library 과제

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

2023년 5월 24일
·
0개의 댓글
·
post-thumbnail

Vue3 프로젝트에 Storybook 7 설치, 적용하기

Storybook 7을 설치해보자.

2023년 5월 24일
·
0개의 댓글
·
post-thumbnail

[Nuxt3/Storybook] Error: No configuration files have been found in your configDir 오류

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

2023년 5월 23일
·
0개의 댓글
·

Storybook Chromatic 으로 배포하기

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

2023년 5월 20일
·
0개의 댓글
·

[Next.js] Storybook 적용하기

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

2023년 5월 17일
·
0개의 댓글
·
post-thumbnail

Storybook, NPM 배포 통합하기

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

2023년 5월 16일
·
0개의 댓글
·

[230515 - TIL] storybook을 이용한 angular 컴포넌트 관리 및 npm 패키지 배포

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

2023년 5월 15일
·
0개의 댓글
·
post-thumbnail

STORYBOOK

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

2023년 5월 15일
·
0개의 댓글
·

[React] .storybook 내부 파일 eslint에 추가하기

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

2023년 4월 30일
·
0개의 댓글
·

StoryBook은 필수일까?

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

2023년 4월 29일
·
0개의 댓글
·
post-thumbnail

(SEB_FE) Section3 Unit3 CDD 개발 도구

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

2023년 4월 18일
·
0개의 댓글
·
post-thumbnail

StoryBook v7 이상에서 styled-components theme 적용하기

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

2023년 4월 17일
·
0개의 댓글
·
post-thumbnail

[UI] Chakra와 Storybook 연동하기

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

2023년 4월 14일
·
0개의 댓글
·
post-thumbnail

next.js 13 + yarn berry + typescript 에서 storybook, Jest, emotion 사용하기

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

2023년 4월 12일
·
0개의 댓글
·

chakra-ui로 storybook 적용

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

2023년 4월 11일
·
0개의 댓글
·
post-thumbnail

storybook/nextjs 프로젝트에 적용하기

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

2023년 4월 8일
·
0개의 댓글
·
post-thumbnail

Custom Checkbox 만들기 (Safari 이슈)

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

2023년 4월 8일
·
0개의 댓글
·
post-thumbnail

Storybook 브랜드 로고 변경하기

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

2023년 4월 7일
·
0개의 댓글
·