UI 관련 용어 정리 (CDD&Storybook&CSS&DOM reference)

Component-Driven Development(CDD)

레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있음.

Storybook

CDD를 하기 위한 도구

• 각각의 컴포넌트들을 따로 볼 수 있게 구성해서 한번에 하나의 컴포넌트에서 작업할 수 있음
• 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있음
• 기본적으로 독립적인 개발환경에서 실행되기 때문에 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있음

Storybook 설치방법

npx degit chromaui/intro-storybook-react-template taskbox

cd taskbox

npx install yarn

CSS 전처리기(CSS Preprocessor)

: CSS가 구조적으로 작성될 수 있게 도움을 주는 도구

• 양이 많고 유지관리가 힘든 CSS의 문제점들을 프로그래밍 개념을 활용하여 해결해나갈 수 있음
• 하지만 CSS 전처리기 자체만으로는 웹 서버가 인지하기 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 됨.

SASS(Syntactically Awesome Style Sheets)

: CSS를 확장해 주는 스크립팅 언어

• CSS를 만들어주는 언어로서 자바스크립트처럼 특정 속성(color, margin, width, etc)의 값(#ffffff, 25rem, 100px)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해 주는 기능을 가졌음.
• SCSS코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어주는 전처리기의 역활을 함
• CSS의 구조화를 해결해주지만 다른 단점들이 더 많아서 효율적이지 않음

..이러한 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두됨
방법론의 공통 지향점은

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

BEM(Block, Element, Modifier)

• block: 전체를 감싸고 있는 블럭 요소
• element: 블럭이 포함하고 있는 한 조각
• modifier: 블럭 또는 요소의 속성(외관이나 상태를 변화가능하게 하는 부분)

.block_element--modifier
      (각각은 -와 _로 구분함)

  ex) header_navigation--navi-text {
                                      color: red;
                                   }

--클래스명은 BEM 방식의 이름을 여러번 반복하여 재사용 가능함
--HTML/CSS/SASS 파일에서도 일관된 코딩 구조를 만들어줌

하지만

• 긴 클래스명 때문에 마크업이 불필요하게 커짐
• 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야 함.
• 언어 로직 상에 진정한 캡슐화(객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념)의 개념이 없음

CSS-in-JS

CSS도 컴포넌트 영역으로 불러들리기 위한 도구

Styled-Component

• 기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공함.
• react의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 만들어짐
• 기존 CSS 문법으로도 스타일 속성이 추가된 react 컴포넌트를 만들 수 있음
• ( )안에 기존 CSS 문법을 이용하여 스타일 속성을 정의해주면 됨

Automatic critical CSS

• 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입함
• 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있음

No class name bugs

: 스스로 유니크한 className을 생성함. 중복이나 오타로 인한 버그를 줄여줌

Easier deletion of CSS

• 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됨

Simple dynamic styling

• className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적임

Painless maintenance

• 코드의 크기가 커지더라도 유지보수가 어렵지 않음.

Automatic vendor prefixing

• 개별 컴포넌트마다 기존의 CSS를 이용하여 스타일 속성을 정의하면 됨. 나머지는 알아서 처리됨.

DOM reference

React로 대부분의 프론트엔드 요구사항을 구현할 수 있지만 DOM 엘리먼트의 주소값을 활용해야 하는 경우가 있다

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

이런 예외적인 상황에서 useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있음

const 주소값을_담는_그릇 = useRef(참조자료형)
// 이제 주소값을_담는_그릇 변수에 어떤 주소값이든 담을 수 있습니다.
return (
    <div>
      <input ref={주소값을_담는_그릇} type="text" />
        {/* React에서 사용 가능한 ref라는 속성에 주소값을_담는_그릇을 값으로 할당하면*/}
        {/* 주소값을_담는_그릇 변수에는 input DOM 엘리먼트의 주소가 담깁니다. */}
        {/* 향후 다른 컴포넌트에서 input DOM 엘리먼트를 활용할 수 있습니다. */}
    </div>
  );