✳️ Achievement Goals ✳️

• 컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.

  Component-Driven Development(CDD)란 레고를 조립하듯이 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법이다. 때문에 가장 작은 컴포넌트부터 개발하여 페이지를 조립하는데, 이를 Bottom-up(상향식) 개발 방식이라고 부른다.

• 컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.

  Yes!

• 구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.

  점점 커지는 프로젝트 규모와 모바일, 태블릿 등 다양한 디바이스의 등장으로 구조화된 CSS가 필요해지면서 다양한 CSS 전처리기(CSS Preprocessor)가 등장했다. CSS 전처리기는 CSS의 문제점을 프로그래밍 개념(변수, 함수, 상속 등)을 활용하여 해결한다. 각 CSS 전처리기에 맞는 컴파일러를 사용해야하며, 이 CSS 방법론의 지향점은 아래의 네 가지로 정리할 수 있다.

  1. 코드의 재사용성
  2. 코드의 간결화(쉬운 유지보수)
  3. 코드의 확장성
  4. 코드의 예측성(클래스명으로 의미 예측 가능)

• 컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.

  기본적인 형식은 다음과 같다.

  1. JavaScript에서 변수를 선언하듯이 태그 만들기
  2. tag 의 속성을 정의하기
  3. back-ticks (``) 안에 기존 CSS 문법을 이용하여 스타일 속성을 정의하기

  결과물은 아래와 같다.

  
  const Name = styled.div`
      display: inline-block;
      border-radius: 3px;
      padding: 0.5rem 0;
      margin: 0.5rem 1rem;
      width: 11rem;
  `;

• DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.

  DOM 엘리먼트의 Reference(주소값)를 활용해야 하는 경우 useRef를 사용한다. 아래의 경우만 해당되며, 이 외의 경우 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양해야한다.

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

  형식은 다음과 같다.

  
  const 주소를_담는_그릇 = useRef(참조자료형)
  
  return (
      <div>
    	<input ref={주소를_담는_그릇} type="text" />
      </div>
  );