# 스토리북
스토리북 배포 with figspec
프로젝트에서 깃 액션으로 storybook을 배포하라는 의뢰가 들어왔다. 스토리북에서 배포를 하는 경우 피그마와 즉시 연동이 되어 디자이너와 협업하기 편해진다는 장점이 있다. "오, 신기한 기술이네"하고 신기해하던 와중 figspec의 존재에 대해 알게 되었다. 단순히
스토리북 런( npm run storybook ) 안됨
당신이 프로젝트 깃 클론 받은 후 npm install 하여 의존성 패키지 설치했는데 npm run storybook 에서 이런 에러가 난다면 ,,?단순히 .stotybook 경로에 public 이라는 폴더를 생성해주면된다.!!
[프로젝트] 깃허브에 스토리북 연결하기
한동안 작업을 마치고 PR을 날리면 다른 팀원들이 코드리뷰할 때 확인할 수 있도록, 작업한 UI의 스크린샷을 함께 첨부해왔었다. 그 동안은 하나 두 개 정도의 스크린샷만 첨부하니 크게 문제가 없었지만, 바로 어제 랜딩 페이지 작업을 마치고 PR을 날리려는데 스크린샷을
🎨 스토리북 (StoryBook)의 기능은 어디까지 활용 가능한거에요? ↗️
목차 🤔 스토리북(Storybook)에 대해 얼마나 알고 계세요? **- 주로 사람들이 알고 있는 사항 ** UI 컴포넌트를 개발하고 직접 문서화, 시각화하여 시뮬레이션 해 볼 수 있는 도구 React, vue, angular 등 다양한 프레임워크를 지원 스
Storybook에 styled-components 적용하기 (theme, GlobalStyle)
Storybook에 styled-components의 GlobalStyle과 theme을 적용하는 방법 2가지
Storybook에서 useParams 사용하기
storybook-addon-react-router-v6 패키지가 react-router 를 의존하기 때문에 react-router가 설치되어 있지 않다면 설치해줍니다.useParams를 사용해서 petFoodId를 가져오는 ReviewItem 컴포넌트의 경우locat
디자인 시스템 (Design System)
UI/UX 디자인이 발전함에 따라 UI 화면을 생성해야 하는 규모나 속도도 끊임없이 발전되고 있습니다. 이러한 발전 속도 때문에 설계 작업을 간소화 하기 위해서 여러 기업에서 디자인 시스템을 구축하고 있습니다.디자인 시스템이란?디자인 시스템은 디자인 원칙, 규격, 재사
[프로젝트][개발환경 세팅] storybook 설치
두번째 프로젝트를 할때 스토리북이라는 도구를 사용했다. 이번에도 마찬가지로 스토리북을 사용할 예정이다.소프트웨어 개발에서 사용되는 도구 중 하나로, 주로 UI 컴포넌트를 개발하고 테스트하는 데에 활용된다.(UI 컴포넌트 : 버튼, 모달창, 인풋창 등등)개발 단계에서 빠
스토리북(Storybook) 설치 및 세팅 시작하기
기존 프로젝트의 루트 디렉터리 내에서 다음 명령어를 실행한다.설치가 완료되면 프로젝트 내에 .storybook 폴더가 생성 된다.로컬에서 스토리북이 환영 페이지가 뜨면 설치 완료!
storybook
다음과 같이 React 프로젝트를 생성하면서 Storybook을 설치해보자..storybook 폴더와 stories 폴더가 생성되는데, .storybook 폴더 내부의 파일들은 전역적인 설정 관련된 것들, stories 폴더 내부에는 예시가 되는 컴포넌트와 스토리들이
[Error Handling] 스토리북 실행 시 나타나는 에러코드 0308010c 해결방안
storybook 설치는 됐는데, 사진과 같은 에러코드(0308010c:digital envelope routines::unsupported)가 뜨면서 실행이 안되는 경우 해결방법에 대해 알려드리고자 공유드립니다. 찾아본 바에 따르면 원인은 크게 두 가지 입니다.
[React] Storybook
스토리북과 관련된 일련의 포스트들은 React를 가지고 작성되었습니다.이번에는 Storybook이라는 도구에 대해서 알아보도록 하겠습니다.Srotybook은 컴포넌트를 개발(과 관리, 변화 추적 등)하는데 도움을 주는 오픈 소스 툴입니다. 처음엔 React 개발을 위해
디자인 시스템 혼자서도 만들수 있다 !
최근 한달간 디자인 시스템을 직접 만들어 보고 프로젝트에 적용했습니다. 디자인 시스템을 왜 만들어야 하는지, 어떻게 적용할 수 있는지에 대한 글입니다.
[번역] 왜 2022년에는 스토리북일까요?
Storybook은 UI 컴포넌트를 독립적인 환경에서 만들 수 있게 도와주는 툴임과 동시에 UI 컴포넌트를 위한 놀이터라고도 합니다😊 스토리북 도입을 고민하고 있다면? 이 글을 읽어보시는 건 어떨까요?
