TIL - 2021-08-09
내가 보려고 쓰는....
## TIL 3일차 👨💻
Component Driven Development (CDD)
기획자로부터 하나의 페이지 기획이 도착했고, 디자이너와 개발자가 협력하여 디자인 개발이 진행되었고 페이지는 모두 완성했는데 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착함.
근데 기획자의 요청사항에서 버튼에 대한 기록이 이전에 요청받았던 버튼을 똑같이 사용하도록 요청했는데. 그럴때 디자이너와 개발자는 이부분을 모두 새로 만들어야할까?
디자인과 개발 단계에서부터 재상요할 수 있는 UI컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결할 수 있다.
이 고민을 해결하기 위해 등장한 개발방법이 바로 Component Driven Development(CDD)임.
레고처럼 조립할수 있는 부품 단위로 UI컴포넌트를 만들어 나가는 개발을 진행할수 있음.
실제로 CDD 방식을 활용하 UI를 구축하느 사이트들도 많다고 한다.
이제 여러분들은 위 사이트처럼 CDD 방법을 이용한 UI컴포넌트 제작 방식을 배우게 된다
컴포넌트 UI 개발을 위한 Storybook
UI개발도구 중에는 Storybook 라는 도구가 있다.
Component Driven Development 가 트랜드로 자리잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기)가 등장했습니다. Component Explorer에는 많은 UI 개발도구가 다양하게 있는데 그중 하나가 Storybook 입니다.
Storybook은 무엇일까?
UI 개발 즉, Component Driven Development를 하기 위한도구입니다.
각각의 컴포넌트들을 따로 볼수 있게 구성해서 한번에 하나의 컴포넌트에서 작업할수 있다고합니다.
복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요없이 전체 UI를 한눈에 보고 개발할 수 있다고 합니다.
Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다고합니다. 이를 통해서 버그를 사전에 방지할수 있습니다. 또한 테스트 및 개발속도를 향상시키는 장점이 있으며, 어플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있습니다.
Storybook과 같은 UI 개발도구를 왜 사용할까?
Storybook은 기본적으로 독립적인 개발환경에서 실행됩니다. 개발자는 애플리케이션의 다양한상황에 구애받지 않고 UI컴포넌트를 집중적으로 개발 할 수 있습니다.
회사의 내부 개발자들을 위해 문서화(documentation)를 하여 회사의 UI 라이브러리로써 사용하거나, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로 사용할 수 있습니다.
Storybook에서 지원하는 주요 기능은 다음과 같다
- UI 컴포넌트들을 카탈로그화 하기
- 컴포넌트 변화를 Stories로 저장하기
- 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
- 리액트를 포함한 다양한 뷰 레이어 지원하기
우리는 이시간을 통해 Storybook을 이용하며 컴포넌트를 시각화하거나 시뮬레이션할 수 있는 다양한 테스트 상태를 만들어 보게 될거에요.
Storybook 설치 및 세팅 방법
다음 명령어들만으로 스토리북 세팅을 간단하게 진행할수는 있으나 스스로 설치를 해 보고 싶으면 공식문서 를 참고해볼것
Clone the template
npx degit chromaui/intro-storybook-react-template taskbox
cd taskbox
Install dependencies
yarn
