Web 4부 - 현업 개발자가 알려주는 웹프로젝트 만들기. (Ant Design이란?)
페이지 정보
본문
안녕하세요. 엔지엠소프트웨어입니다. 오늘은~ React + TypeScript + AntDesign을 조합해서 웹프로젝트를 구성하는 방법에 대해 알아볼께요. 우선, 앤트 디자인을 설치해야 하는데요. 아래 명령으로 설치를 진행하시면 됩니다. 이전 내용을 학습하지 않으신 분들은 아래 링크를 클릭해서 개발 환경 구성을 완료해야 합니다.
※ 앤트 디자인은 UI/UX를 쉽게 개발해서 적용할 수 있는 프론트앤드 프레임워크입니다. 아래에서 자세하게 알아볼께요.
[ 1부 - 개발 환경 만들기 ]
[ 2부 - React, Typescript 설치하기 ]
npm install antd
간단한 테스트를 위해~ 버튼을 하나 추가하고 컴파일 후 실행 해볼께요. 우선, App.css 파일의 첫줄에 아래 코드를 추가하세요.
@import '~antd/dist/antd.css';
App.tsx 코드를 아래 코드로 변경합니다.
import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';
const App: FC = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;
npm start로 실행하세요. 아래와 같이 버튼이 보일겁니다.
이제 그럴듯한 디자인을 위해~ [ 앤트 디자인 레이아웃 ]으로 이동하세요. 아래 레이아웃을 사용하는게 좋을거 같네요.
index.css를 아래 코드로 변경해주세요.
.logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl .logo {
float: right;
margin: 16px 0 16px 24px;
}
.site-layout-background {
background: #fff;
}
index.html 도 변경 해줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
</head>
<body>
<div id="container" style="padding: 24px" />
<script>var mountNode = document.getElementById('container');</script>
</body>
</html>
index.tsx 에서 레이아웃을 만들어줍니다.
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Layout, Menu, Breadcrumb } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
ReactDOM.render(
<Layout>
<Header className="header">
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%', borderRight: 0 }}
>
<SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
<Menu.Item key="5">option5</Menu.Item>
<Menu.Item key="6">option6</Menu.Item>
<Menu.Item key="7">option7</Menu.Item>
<Menu.Item key="8">option8</Menu.Item>
</SubMenu>
<SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
<Menu.Item key="9">option9</Menu.Item>
<Menu.Item key="10">option10</Menu.Item>
<Menu.Item key="11">option11</Menu.Item>
<Menu.Item key="12">option12</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout style={{ padding: '0 24px 24px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<Content
className="site-layout-background"
style={{
padding: 24,
margin: 0,
minHeight: 280,
}}
>
Content
</Content>
</Layout>
</Layout>
</Layout>,
document.getElementById('container'),
);
마지막으로 package.json 내용을 아래와 같이 변경하고, Ctrl+K+S로 전체 저장하세요.
{
"title": "Header Sider 2 - antd@4.16.7",
"scripts": {
"test": "react-scripts test --env=jsdom",
"start": "react-scripts start",
"eject": "react-scripts eject",
"build": "react-scripts build"
},
"main": "index.js",
"devDependencies": {
"typescript": "^4.0.5"
},
"dependencies": {
"react-scripts": "^4.0.0",
"react-dom": "^16.14.0",
"react": "^16.14.0",
"antd": "4.16.7",
"@ant-design/icons": "latest"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
npm start로 실행하면 아래와 같은 화면을 볼 수 있습니다.
로그인 컴포넌트를 콘텐츠 영역에 표시해볼께요. 아래 그림과 같이 component 폴더 아래 Login.tsx 파일을 추가하세요.
import React, { FC } from 'react';
import 'antd/dist/antd.css';
import { Form, Input, Button, Checkbox } from 'antd';
const onFinish = (values :any) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo :any) => {
console.log('Failed:', errorInfo);
};
const Login: FC = () => (
<Form
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: 'Please input your username!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
export default Login;
index.tsx 에서 content를 <Login /> 로 변경 해줍니다.
}}
>
<Login />
</Content>
</Layout>
</Layout>
</Layout>,
document.getElementById('container'),
);
다시 실행(npm start)하면 아래와 같이 표시됩니다.
여기까지 잘 되죠~? 앤트 디자인을 이용하면, UI/UX 또는 디자인팀이 없어도 개발자 혼자~ 괜찮은 웹사이트를 만들 수 있습니다. 완성도 높은 UI/UX 프레임워크를 사용하고 싶다면 앤트 디자인만한게 없다고 생각합니다. 이외에도 상용 미들 웨어로는 DevExpress나 GrapeCity가 있는데요. 생각보다 무겁고 뭔가... 그렇습니다. 요즘은 어떨지 모르겠네요. 이외에도 제가 모르는 괜찮은 UI 프레임워크가 있을수도 있으니 자신에게 맞는걸 선택하는게 중요합니다.
※ 컴파일된 상태에서 Ctrl+S로 저장하면 자동으로 다시 컴파일되고, 웹페이지가 갱신됩니다.
빠르게 개발하기 위해 앤트 디자인 UI 프레임워크를 선택했다면~ 원하는 UI를 쇼핑하고, 적용하는 방법을 알아야 합니다. 크게 어려운 부분은 없어요. 아래 내용을 잘 따라하면 누구나 쉽게 멋진 홈페이지를 만들 수 있습니다. 다만, 디테일한 부분을 조정하기는 쉽지 않을거에요. 이런 부분들은 엔지엠소프트웨어와 같은 커뮤니티의 도움을 받으면 됩니다. 아마도~ 리액트, 타입스크립트, 앤트디자인 커뮤니티가 있을겁니다. 앤드 디자인 홈페이지로 이동하세요.
[ Ant Design ]
상단 메뉴에서 컴포넌트(Components)를 클릭하세요. 수많은 컴포넌트들이 카테고리별로 잘 분류되어 있습니다.
이 글에서 사용한 로그인 컴포넌트는 폼(Form) 카테고리에 있습니다. Form은 HTML에서 <form> 엘리먼트입니다. 프론트엔드에서 백엔드로 정보를 전달하기 위한 문서 구역입니다. HTML이나 노드 또는 엘리먼트와 같은게 어떤걸 말하는지 이해되지 않을겁니다. 개발자가 아닌 일반인도 이 글의 내용을 따라하면 뭔가 화면에 표시되는걸 보여주기 위한 내용이라서 그래요. 그래서~ 여러분들은 "왜?"라는 질문을 자주해야 합니다. 구글에서 항상 "How to get stock price?", "How to email check?", "How to react install or setup?"... 과 같은 질문을 통해 학습해야 합니다. 물론, 비용을 지불하면 좀 더 체계적이고 빠르게 학습할 수 있을겁니다. 무료 국비 교육이 많으니 개발자가 되고 싶은 분들은 알아보세요. 무료 국비 교육으로 기본을 다지고, 엔지엠소프트웨어와 같은 개발자 커뮤니티를 적극적으로 이용하세요. 빠르게 실력을 향상 시킬 수 있는 지름길입니다^^
원하는 디자인을 찾았으면 적용해봐야겠죠? 하단에 
버튼들이 보일겁니다. Open in Codesendbox를 클릭하세요.
코드샌드박스가 새창으로 열립니다. 코드샌드박스는 웹기반 자바스크립트 에디터 서비스를 제공하는 사이트입니다. 파이썬 개발할 때 리플릿이나 코랩을 이용했을텐데요. 이와 같다고 보시면 됩니다. 단순히 자바스크립트만 되는건 아니고, 리액트, 앵귤라, 자바스크립트 및 타입스크립트까지 전부 코딩하고 테스트할 수 있습니다. 자바스크립트나 파이썬의 경우 이미 갖춰진 환경을 제공해주는 서비스를 이용하면 쉽고 빠르게 결과를 확인할 수 있습니다.
아래 index.css, index.html, index.js, package.json 4개 파일의 내용을 내 프로젝트에 적절하게 병합 해줍니다. 이 글에서는 Login.tsx 컴포넌트에 폼을 구현했습니다. 로그인 컴포넌트는 레이아웃의 콘텐츠 영역에 추가 되어 있습니다.
다음에는 데이타베이스를 구성하고, 로그인할 수 있도록 해볼께요^^
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
- 이전글딥러닝을 이용한 한글 챗봇 만들기. (kochat) 21.07.18
- 다음글3부 - 현업 개발자가 알려주는 웹프로젝트 만들기. (로그인 만들기!) 21.07.17
댓글목록
등록된 댓글이 없습니다.