반응형
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. 컴포넌트를 가져와 이것 저것 사용해 보자.
반응형
'Web&Dev' 카테고리의 다른 글
리덕스는 왜 쓰는가? (0) | 2020.01.22 |
---|---|
블로그 꾸미기 - 해커같은 배경 및 글자색 변경하기 CSS,HTML 편집 2 (0) | 2019.07.13 |
블로그 꾸미기 - 해커같은 배경 및 글자색 변경하기 CSS,HTML 편집 (0) | 2019.07.04 |