패스트캠퍼스 챌린지 26일차 - 리액트 UI라이브러리 (Ant Design)

 

Ant Design (antd)

 

이번 강의에서 소개된 라이브러리는 중국 ant그룹에서 사용하기 위해 만든 Ant Design이다.

사실 이 라이브러리는 전에 클론코딩을 하면서 사용한 적이 있는데 거의 복붙 수준의 기본기능 구현 위주의 강의라

깊게 다뤄보지 않았는데 이번 기회에 공식문서를 자세하게 볼수 있었다.

Antd는 OnsenUI와 다르게 React base의 라이브러리이다. 그래서인지 document의 예제도 리액트로 코드를 제공하고 있다.

npm install antd

@import '~antd/dist/antd.css';

antd에서 제공하는 디자인을 적용하기 위해서 App.css (또는 대표적으로 사용하고 있는 css 파일)에 antd.css를 import 해주어야한다.

antd는 앞서 배웠던 sass와 다른 css 전처리기 less 기반으로 작성되었다.

(less variables를 이용하여 커스텀을 좀더 쉽게할수 있다.)

 

 

기존에 Moment.js를 기반으로 적용되었던 컴포넌트들을 dayjs 와 date-fns도 지원한다.

따라서 프로젝트에 Moment.js를 사용하지 않더라도 dayjs와 date-fns 라이브러리를 사용하면 날짜관련 디자인에 아무런 영향을 주지 않는다.

 

디자인된 컴포넌트 뿐만 아니라 다른 UI라이브러리에서는 제공하지 않는 antd의 디자인 철학에 관해서도 자세히 설명되어있다.

색의 팔레트라던지 폰트 크기를 어떻게 정하게 되었다던지 아이콘을 어떻게 만들었는지 상세하게 담겨있어서

디자인 관점에서도 배울점이 있는 것 같다.

 

 

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.