백엔드 서버 구동
먼저 앞에서 개발한 스프링 혹은 노드 둘 중 하나의 REST API 서버를 구동하여 http://localhost:8080 서버로 접속할 수 있도록 한다.
프런트엔드 개발환경
최신 프런트엔드 개발환경은 노드와 git이 설치되어야 한다. 여기를 참고해서 설치하자. 개발툴은 webstorm을 사용할 것이므로 여기를 참고해서 개발툴 설치와 환경설정을 한다.
프로젝트 구성
CLI 방식으로 리액트 프로젝트를 구성할 것인데 typescript를 적용한다.
react-board-typescript 는 프로젝트 명이고, – -template typescript는 타입스크립트를 적용하라는 옵션이다.
1 |
npx create-react-app react-board-typescript --template typescript |
이제 웹팩 기반 리액트프로젝트가 생성되었을 것이다. webstorm에서 프로젝트명과 동일한 폴더를 열어보자.
여기서는 CSS 프레임웍으로 Ant Design 을 설치한다.
Ant Design 홈페이지는 여기이다.
Ant Design은 타입스크립트를 지원하므로 하나의 라이브러리만 설치하면 된다.
1 |
npm install andt |
개발환경 서버를 아래와 같이 구동한다.
1 |
npm run start |
ant design은 less로 개발되었고, 만일 테마 등을 커스터마이징을 하기 위해서는 webpack에 less 환경 변수를 세팅해줘야 한다.
create-react-app은 webpack 으로 구성되었지만 webpack으로 개발되었는지 알수 없을 정도로 wrapping 되어있다. webpack config 화일을 사용하기 위해서 eject 하는 방법이 있는데 eject 를 하게 되면 다시 원래대로 돌아갈 수 없기 때문에 가장 많이 사용하는 라이브러리가 react-rewired-app 이다.
ant 홈페이지에는 react-rewired-app 와 아주 유사한 craco 로 webpack 환경화일을 수정할 수 있다. 먼저 라이브러리를 설치한다.
1 |
npm install @craco/craco craco-less |
App.css를 App.less로 리팩토링하고 맨 상단에 아래 한줄을 를 삽입한다.
1 |
@import '~antd/dist/antd.less'; |
App.js에 App.css 대신에 App.less 로 수정한다.
1 2 |
- import './App.js'; + import './App.less'; |
루트 폴더에 craco.config.js 화일을 만들고 커스터마이징할 less 변수들을 설정한다. 여기서는 한 예로 primary color를 설정하였다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const CracoLessPlugin = require('craco-less'); module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ], }; |
package.json의 스크립트를 바꿔준다.
1 2 3 4 5 6 7 8 |
"scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", } |
Ant 레이아웃 구성
ant design 홈페이지의 layout 컴포넌트를 살펴본다. 가장 상단에 있는 Header, content, Footer 레이아웃을 App.js에 적용한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React from 'react'; import './App.less'; import {Layout} from "antd"; const { Header, Footer, Content } = Layout; function App() { return ( <layout> <header>Header</header> <content>Content</content> <footer>Footer</footer> </layout> ); } |
적용하고 화면을 확인하면 헤더 부분이 검게 나온다. 기본 테마가 다크테마로 적용이 되어서 헤더부분의 백그라운드를 커스터마이징 해야 한다. 앞에서 커스터마이징 환경은 설정되었고 헤더 백그라운드를 여기에서 찾아보면 @layout-header-background: #001529; 로 정의 된 부분을 찾을수 있다. 이 변수를 craco-config.js에 정의하면 된다.
또 다른 방법은 클래스명을 중복 정의하는 방법이다. App.less 화일에 아래 내용을정의 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@import '~antd/dist/antd.less'; .ant-layout-header { padding: 0 1rem; background: #6aa0c7; } .ant-layout-content { background: #ffffff; padding: 1rem; } .ant-layout-footer { padding: 1rem; } |