오늘한일

이전에 리액트를 이용해 States Airline Client Application을 만들어보았다.
오늘은 해당 과제의 서버를 express 프레임워크를 통해 구현해보았고,
이를 통해 좀더 알게된 사실에 대해서 작성해보려한다.

Achievement Goals

• 컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.
• 컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.
• 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
• 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.
• DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다

Component Driven Development

레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법을 말한다.
디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면
동일한 UI컴포넌트에 대해서 매번 새롭게 개발할 필요가 없다.

Storybook

Storybook은 Component Driven Development(CDD)를 지원하는 도구중 하나다.

Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다.

Storybook에서 지원하는 주요 기능

• UI 컴포넌트들을 카탈로그 화하기
• 컴포넌트 변화를 Stories로 저장하기
• 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
• 리액트를 포함한 다양한 뷰 레이어 지원하기

애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발을 할 수 있다는 장점이 있다.

구조적인 CSS 작성 방법의 필요성

프로젝트 규모가 커짐에 따라 CSS코드의 복잡도가 점점 커지고 개발 인력이 많아짐에 따라서 일관된 CSS 작성 패턴이 없다는것은 큰 불편함이 따랐다.
게다가, 모바일이나 태블릿을 비롯한 여러 디바이스들의 등장으로 여러 디스플레이를 커버해야했기 때문에
CSS는 더 복잡해졌다.

이를 해결하기위해 여러가지 구조화된 CSS 작성 방법이 필요하였다.
CSS 전처리기를 만들기도 하였고, BEM, OOCSS, SMACSS 같은 여러 CSS 방법론이 대두되었다.
각각의 장단점은 있으나 공통된 지향점은 다음과 같다.

• 코드의 재사용
• 코드의 간결화(유지보수 용이)
• 코드의 확장성
• 코드의 예측성(클래스 명으로 의미 예측)

이후로는 웹개발의 방향성이 애플리케이션 쪽으로 넘어오면서
컴포넌트 기반의 개발 방식을 위한 CSS작성법이 필요해졌다.

Styled-Component

CSS도 컴포넌트 영역으로 불러들이기 위해서 CSS-in-JS가 탄생해서 이 문제를 정확하게 해결하였다.
Styled-Component는 컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리이며,
CSS-in-JS의 대표적인 라이브러리다.
기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.
Styled-Component는 CSS를 컴포넌트 안으로 작성하기에 코드를 캡슐화한다.