두번째 프로젝트를 할때 스토리북이라는 도구를 사용했다. 이번에도 마찬가지로 스토리북을 사용할 예정이다.
스토리북이란
소프트웨어 개발에서 사용되는 도구 중 하나로, 주로 UI 컴포넌트를 개발하고 테스트하는 데에 활용된다.
(UI 컴포넌트 : 버튼, 모달창, 인풋창 등등)
스토리북을 왜 쓰는 걸까?
개발 단계에서 빠른 시각적 피드백을 얻을 수 있다는 장점이 있다.
많은 개발자들은 일부 css를 업데이트하기 위해 전체 스택을 다시 시작하곤 한다. 꽤 번거로울 뿐만 아니라 전체 앱이 다시 빌드되는 동안 기다려야 하기 떄문에 시간도 낭비됨.
작업을 시작하기 전에 적합한 상태로 앱 UI를 확보해주는 것은 쉬운 일이 아님.
스토리북은 이것을 가능하게 한다.
데이터, provider 및 네트워크 요청을 제공하여 온디맨드 방식으로 특정 컴포넌트 상태를 생성할 수 있도록 하는 이동식 고정 장치이다.
각 컴포넌트를 시각적으로 디자인하고 문서화함으로써 개발 및 디자인에 대한 이해도를 높일 수 있음
그리고 무엇보다 재사용성과 유지보수성이 뛰어나다. 각 컴포넌트를 독립적으로 개발하고 테스트하기 때문에 코드 중복을 최소화하고, 새로운 기능 추가, 버그 수정이 효율적이다.
설치 과정
여기저기서 말이 다 달라서 설치 삭제만 여러번 반복했지만 결국 저 한줄로 설치가 가능하다.
npx sb init
빌드를 하는 방법
yarn storybook
끝!
설치를 마치면 기본 스토리북 파일들이 생성되는 데 사용하지 않을거면 삭제!
Born to be FE developer 🧑🏻💻