화면 구현 2

화면 구현 1에서는 bootstrap을 사용하였다.

화면 구현 1과 동일한데 CSS 프레임웍을 bootstrap 대신 Ant Design을 사용하였다. bootstrap은 CSS3 의 flex layout 을 가져와서 가로를 12칸으로 나누어서 사용하는데 Ant Design은 가로를 24칸으로 더 세밀하게 나누었다. 그러나 break point 등은 bootstrap과 거의 동일하다.

하지만, bootstrap으로 상용화하기에는 부족한 컴포넌트로 또다른 많은 3rd party 라이브러리를 사용해야 한다. 그에 반해 Ant Design은 필요한 대부분의 컴포넌트가 구현되어있어있다. 특히 개발하기에는 배보다 배꼽이 큰 컴포넌트로 캘린더를 들 수 있겠는데, Ant Design은 이 컴포넌트가 갖춰져 있다. 이뿐만 아니라 개발에 필수적으로 사용되는 여러가지 컴포넌트들이 다양하게 갖춰져있다.

다양한 컴포넌트 순으로 CSS 프레임워크를 평가하자면 다음과 같다.

Bootstrap < Material UI < Ant Design

사용된 기술 스택은 react + typescript + Ant Design 이다.

git 소스는 다음을 참고하자.

+ https://github.com/eastflag/react-board-ant