Component Driven Development
예전에 사용한 UI컴포넌트가 다른 기획에서 다시 쓰인다면 개발자들은 다시 그부분을 만들어야 할까? 결론부터 말하자면 아니다. 디자인과 계발 단계부터 재사용할수 있는 UI 컴포넌트가 있다면 우리는 이런고민을 해결할수 있다.
이런 고민을 해결하기 위해 등장한 방법이 Component Driven Development (CDD) 이다 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있습니다.
컴포넌트 UI 개발을 위한 Storybook
CCD 즉 UI제작을 하기위한 도구로 각각의 컴포넌트들을 하나의 컴포넌트에서 작업하며 전체 UI를 한눈에 보고 개발할수 있도록 시각과하여 여러 테스트를 확인 할수 있도록 만들어진 개발 도구이다.
storybook에서 지원하는 주요 기능을 몇가지 알아보자
1.UI 컴포넌트들을 카탈로그 화하기
2.컴포넌트 변화를 Stories로 저장하기
3.핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
4.리액트를 포함한 다양한 뷰 레이어 지원하기구조화된 css가 필요해진 이유
css는 작성하는 일관된 패턴이 없고 과거 컴퓨터라는 한정적인 디바이스에서 모바일, 태블릿등과 같은 많은 디바이스가 계속 등장함에 따라 css는 더욱 커지고 복잡해지고 있다. 이런 문제점을 해결하기위해 css를 구조화하려는 방법이 여러가지 형태로 발생되고 있고 이런 문제를 해결하기 위한 몇가지 방법을 보자면
css 전처리기 (css preprocessor)
css 전처리기는 css 가 구조적으로 작성될수 있게 도움을 주는 도구로
css의 문제점을 프로그래밍적 개념(변수,함수,상속 등)을 활용하여 해결하려고 한다. 하지만 문제점으로 웹서버가 인지못한다는 단점으로 각 css전처리기에 맞는 complier를 사용하여야 실제로 우리가 사용하는 css문서로 변환이 된다.
1. SASS
css전처리기중 하나로 Syntactically Awesome Style Sheets의 약자로 CSS를 확장해 주는 스크립팅 언어라고 한다.
JS의 특정 속성 (ex. color, margin, width 등)의 값(ex. #ffffff, 25rem, 100px 등)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해 준다.
하지만 스타일이 겹치는 문제를 해결하기 위해 단순히 계층 구조를 만드는 것에 의지하고 이런문제점으로 인해 css의 용량은 어마어마하게 커지게된다는 단점이 있다.
2. BEM (css 방법론)
Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법이며, Block, Element, Modifier 각각은 —와 __로 구분한다.
이런 방법은 html/css/SASS/ 파일을 일관된 코딩구조로 만들어준다는 장점이 있고
마크업이 불필요하게 커지며 재사용시마다 UI컴포넌트를 명시적으로 확장해야만 했고 캡슐화의 개념이 불가능하다는 단점이 발생되었다.
3. CSS- in -JS
CSS를 컴포넌트의 영역으로 부르기위해 CSS- in -JS가 탄생하였고 CSS- in -JS의 대표격인 Styled-Component를 알아보도록하자.
Styled-Component 작성 예시
먼저 Styled Component의 대표적인특징을 살펴보자면
반복되는 CSS코드가 있다면 변수를 활용하여 재사용이가능하다 한가지더 변수를 선언할 때는 $ 기호를 활용해야 한다.
