[라이브러리]ng-zorro : Augular를 위한 UI Framework(Ant 디자인 철학)

# 개요

ng-zorro-antd란? Angular 프로젝트 상에서 사용가능한 Ant Design 기반 UI Framework이다.

nz로 시작하는 속성, 태그는 ng-zorro 모듈 내 정의된 구성요소임을 의미

# 설치

Q. Ant Design이란?

- Admin 페이지를 더 쉽게 만들 수 있도록 하기 위해 만들어진 React / Angular 기반의 UI Framework이다.

- 디자이너 없이, 완성도 높은 UI 프레임워크를 쓰고 싶고, 좋은 UX를 만들고 싶은 욕구에서 나온 결과이다. 

- 요즘은 디자이너 없이도, Bootstrap과 같은 UI 프레임워크를 사용할 경우, 쉽게 수준높은 UI를 만들어낼 수 있다.

- Ant Design이란 10가지 디자인 원칙에 입각하여, 훌륭한 디자인의 UX를 제공하는 UI 프레임워크이다.

-> 근접선 / 정렬 / 대조 / 반복 / 직관적으로 만들어라 / 화면에 머물러라(새로운 페이지 열기x) / 가볍게 유지해라

가이드를 제공해라 / 트랜지션을 사용하라 / 즉각적인 반응

- 10가지 원칙 아래 각 플랫폼(브라우저, 디바이스?) 별로 UI 컴포넌트를 제공한다.(리액트와 앵귤러로 구현되어 있다.)

- 기본적인 버튼, 그리드, 폼 컴포넌트가 훌륭한 편이다.

- 달력, 자동 완성, 스피너 등도 기본으로 제공한다는 장점이 있다.

- 어드민 어플리케이션은 서비스 운영에 반드시 필요한 것이지만 제품 자체 보다는 우선 순위가 낮다. 그래서 디자인도 좀 엉망이고 메뉴얼 없이는 사용하기 어려운 UX를 만들어내기 쉽다. 이런 현실을 고려한다면 앤트 디자인은 좋은 도구가 될수 있을 것 같다

- 앤트 디자인은 많은 컴포넌트를 제공하는 만큼 번들링 결과도 비교적 크다. 필요한 기능만 번들링해주는 플러그인(babel-plugin 같은)이 필요하다.

- Theme를 변경하는 옵션 또한 제공한다. ex. "@primary-color": "#1DA57A"

- Bootstrap은 jQuery 기반이고, Ant Design는 Bootstrap에서 대체 가능

# 설치방법

- ng add ng-zorro-antd 또는 $ npm install ng-zorro-antd

# 사용법 예시

import { NzButtonModule } from 'ng-zorro-antd/button';              //(일반)버튼

<button nz-button nzType="primary">Primary</button>       

      

import { NzTypographyModule } from 'ng-zorro-antd/typography'; //(일반)단락 스타일

<h1 nz-typography>Introduction</h1>

import { NzGridModule } from 'ng-zorro-antd/grid';                    //(레이아웃)그리드

<div nz-row>

      <div nz-col nzSpan="12">col-12</div>

      <div nz-col nzSpan="12">col-12</div>

</div>

import { NzLayoutModule } from 'ng-zorro-antd/layout';              //(레이아웃)기본

<nz-layout>

      <nz-header>Header</nz-header>

      <nz-content>Content</nz-content>

      <nz-footer>Footer</nz-footer>

</nz-layout>

import { NzSpaceModule } from 'ng-zorro-antd/space';                //(레이아웃)패딩, 마진 대신 Space사용

<nz-space>

      <nz-space-item>

        <button nz-button nzType="primary">Button</button>

      </nz-space-item>

</nz-space>

import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; //BreadScrumb

<nz-breadcrumb>

      <nz-breadcrumb-item>

        Home

      </nz-breadcrumb-item>

import { NzInputModule } from 'ng-zorro-antd/input';                //(폼)Inpute

<input nz-input placeholder="Basic usage" [(ngModel)]="value" />

   

import { NzAvatarModule } from 'ng-zorro-antd/avatar';              //아바타 그림

<nz-avatar nzSize="large" nzIcon="user"></nz-avatar>

import { NzSpinModule } from 'ng-zorro-antd/spin';                   //로딩 스피너

<nz-spin nzSimple></nz-spin>

# 장점

- 타입스크립트 지원

- 잘 정리된 문서

- 다양한 폼 컨트롤(Cascader)

- 폼 서브밋, 유효성 검사, 에러 처리

- 고급 기능을 가진 테이블 컴포넌트

- GitHub Star 수 55K

# 출처

- http://jeonghwan-kim.github.io/2018/10/13/ant-design-101.html

- https://subicura.com/2020/01/07/2019-dev-summary.html