컴포넌트 단위로 개발[2021.09.13]

1. 컴포넌트 단위로 개발

재사용 할 수 있는 UI 컴포넌트의 필요성에 의해 고안된 방법이
Component Driven Development (CDD) 개발 방법이다.
이는 부품 단위로 UI 컴포넌트를 만들어 가는 방법이다. 
1. 컴포넌트 생성

2. 컴포넌트 결합

3. 페이지 조립

2. 컴포넌트 UI 개발을 위한 Storybook

Component Driven Development 가 트렌드로 자리 잡게 되면서 
이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 등장

Storybook은 UI 개발 즉, Component Driven Development를 하기
위한 도구입니다. 
1. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트
   에서 작업할 수 있다. 
2. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동
   하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할
   수 있다.
3. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으
   로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확
   인할 수 있다. 
   
   

3. 구조적인 CSS 작성 방법의 발전

프로젝트의 규모나 복잡도가 점점 커지고 함께 작업해야할 팀원 수도 많아짐에
따라 CSS를 작성하는 일관된 패턴이 없는 것이 문제점이 되었고 모바일이나 태블릿을 비롯한 
다양한 디바이스들의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야 하기 때문에 CSS는 
더 복잡해지게 되었다.

1. CSS전처리기 대표적인(SASS)
  - 반복되는 CSS 코드가 있다면 이를 변수로 지정($변수명)하여 재사용 가능 
  - 스타일이 겹치는 문제 해결을 위해 단순히 계층 구조를 만들어 내는 것에
    의존하여 그 결과 컴파일된 CSS 용량이 어마어마하게 커지는 문제 발생
    
2. CSS방법론 대표적인(BEM)
  - Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법
  - 클래스명 선택자가 장황해지고, 이런 긴 클래스명 때문에 마크업이 불필요
    하게 커지며, 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 
    확장 필요
    
3. 컴포넌트 작성에 적합한 Styled-Component
  - 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 
    스타일을 자동으로 삽입
  - Styled Component 는 스스로 유니크한 className 을 생성
  - 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 
    컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 
    속성도 함께 삭제