React JS 개발일지 AntDesign 튜토리얼 CSS 프레임워크 시작

 

 

 

 

 

 

AntDesign

 

 

핀터레스트 Gestalt 사용하려다가, 차라리 좀더 완성된 컴포넌트 UI 프레임 워크를 배우자. !!

CSS 프레임워크를 사용하면 빠르게 프로토 타입을 만들 수 있다. 즉, 페이지 디자인에 시간을 많이 쏟는다면 애초에 프레임워크를 사용해서, 웹구조만으로 디자인까지 얻어가려는 목적이다.

 

 

CSS 프레임 워크는 두 종류로 나뉜다.

 

 

컴포넌트 프레임워크 : 부트스트랩, MD 부트스트랩, AntDesign 등

유틸리티 프레임워크 : tailwind 등

 

 

각 장단점은 있다.

 

컴포넌트 프레임워크는 컴포넌트 단위로 다자인이 되어있기때문에, 빠르게 페이지를 구성하는 반면, 프레임워크 티가 난다.

 

 

반면, 유틸리티 프레임워크는 직접 디자인을 하면서 컴포넌트를 써 내려가기 때문에, 다소 번거롭지만 디자인은 할때마다 다를수밖에 없다..

 

 

AntDesing + React 설치 방법

 

 

 

1. 다음처럼 설치 해준다.

 

 

- yarn add antd
- yarn add react-app-rewired customize-cra
- yarn add babel-plugin-import
- yarn add less less-loader

 

 

2. 스크립트 추가 package.json에 

antd로 나는 rewired 를 사용하는 버전과 기존의 start를 유지하고싶어 나누었다.

 

 

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
또는
    "antd": "react-app-rewired start",
}

 

 

3. Then create a config-overrides.js at root directory of your project for further overriding.

루트 경로에 config-overrides.js 를 추가하고

 

 

const { override, fixBabelImports, addLessLoader } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { "@primary-color": "#1DA57A" }
  })
);

 

 

 

4. 컴포넌트를 가져와 이것 저것 사용해 보자.