# 컴포넌트 라이브러리 개발(start)

프론트엔드 개발, 특히 B2C 어플리케이션을 만든다면 통일된 디자인은 생각보다 중요한요소입니다. 디자인이 통일되지 않으면 브랜드의 이미지를 해치고 반대로 통일되면 브랜드만의 특징을 표현할 수 있습니다.

디자인 팀이 따로 있는 회사는 보통 이러한 디자인 요소를 정리하여 가지고 있는 편입니다. 색, 타이포그래피, 패딩, 마진과 같은 레이아웃이나 카드와 같은 특정 UI등 다양한 디자인 요소를 하나의 파일로 정리해 가지고 있습니다.

이러한 파일을 디자인 시스템(혹은 디자인 가이드)라고 합니다. 대표적인 예시로 material design을 예시로 들 수 있습니다.

[material design](https://m2.material.io/design/introduction)

## 디자인 시스템의 활용

먼저 개발 때 가장 기본적인 디자인 시스템은 theme 파일을 활용하는 것입니다. theme 파일은 css파일로 저장할 수 도 있고 특정 넘버값을 활용한 json형태(object) 파일로 저장할 수 도 있습니다.

가장 대표적인 예가 **bootstrap**입니다. bootstrap은 색, 크기와 같은 값을 css 변수로 저장하고 UI적 스타일을 class로 저장해 두어 이를 사용하게 합니다.

bootstrap에서 색을 사용하고자 한다면 아래와 같이 사용할 수 있습니다.

.some-element {
  color: $yellow-300;
}

bootstrap에서 accordian을 만드려고 하면 아래와 같이 사용할 수 있습니다.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

이곳에 더해져서 하나의 layout component를 바로 import해서 사용하는 것을 **컴포넌트 라이브러리**라고 합니다. bootstrap이 HTML 요소에 class만 지정하면 바로 사용할 수 있는것과 달리 컴포넌트 라이브러리는 통상 Framework에 종속됩니다.

따라서 Material Design이 적용된 컴포넌트 라이브러리는 개발하는 프레임워크(react, angular, vue, vanilla ...)에 따라 알맞은 라이브러리를 사용해야 합니다.

material, bootstrap이나 semantic등 유명 디자인 시스템들은 보통 컴포넌트 라이브러리를 제공합니다.

[mui](https://mui.com/)

## 컴포넌트 라이브러리의 개발

특정 UI 세트를 만들어 두는것은 차후 개발에 상당한 도움이 됩니다. 라이브러리 세트를 만들어 npm(node package manager)에 배포해두면 차후 개발 시 해당 라이브러리를 패키지 다운로드 하여 활용할 수 있습니다.

해당 글에서는 npm을 배포하는 과정까지 알아보겠습니다.

## NPM 배포 기초

npm 배포는 package.json에 의해 이뤄집니다. npm client는 package.json의 정보에 따라 라이브러리를 업로드하고 다운로드하므로 package.json의 설정을 적절히 해주어야 합니다.

주요 설정은 아래와 같습니다.

**dependencies**: 패키지 설치 시 함께 설치하는 패키지 목록

**devDependencies**: 패키지 빌드 시(혹은 개발시)에만 요구되는 목록

**peerDependencies**: 패키지에서 직접적으로 import하진 않지만 활용에 요구되는 패키지

**version**: npm패키지는 배포시 버전을 통해 관리한다. 따라서 매 배포시 버전을 달리해야한다.

**name**: 배포되는 패키지의 이름

적어도 위 설정이 정확해야 정상적으로 이루어 집니다. 그외의 설정은 아래 글을 참고하면 좋습니다.

[내 NPM패키지(모듈) 배포하기](https://heropy.blog/2019/01/31/node-js-npm-module-publish/)

배포는 `npm publish` 커맨드를 통해 배포합니다. 해당 과정에서 따로 설정이 없다면 npm 로그인이 요구되고 배포 디렉토리, public 여부를 선언합니다.

npm publish --access=public publish_directory

## 마무리

디자인 시스템은 프론트 개발에 통일성과 간편함을 제공합니다. 적절한 라이브러리를 사용한 개발은 개발 속도의 증진을 줍니다. 다음 글에서는 실질적으로 typescript를 포함한 react-library를 배포하고 circleCI를 통해 자동화하는 과정까지 살펴보겠습니다.