안녕하세요. 엔지엠소프트웨어입니다. 오늘은~ React + TypeScript + AntDesign을 조합해서 웹프로젝트를 구성하는 방법에 대해 알아볼께요. 우선, 앤드 디자인을 설치해야 하는데요. 아래 명령으로 설치를 진행하시면 됩니다. 이전 내용을 학습하지 않으신 분들은 아래 링크를 클릭해서 개발 환경 구성을 완료해야 합니다.
[ 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로 저장하면 자동으로 다시 컴파일되고, 웹페이지가 갱신됩니다.
다음에는 데이타베이스를 구성하고, 로그인할 수 있도록 해볼께요^^
엔지엠소프트웨어
엔지엠 매크로는 복잡한 반복작업을 자동화할 수 있습니다. PC 게임, 모바일 게임을 최적으로 지원하며 모든 PC 프로그램 및 업무에 적용할 수 있습니다.
www.ngmsoftware.com
'게임' 카테고리의 다른 글
| 코딩 없이 게임, 업무 자동화 매크로나 오토 RPA 매크로 만들기 (0) | 2021.10.02 |
|---|---|
| 마우스 키보드 매크로 프로그램 (0) | 2021.09.30 |
| 무료 게임 매크로 프로그램 공유 (0) | 2021.05.05 |
| NGM 매크로 - 리니지 집행검 키우기 (0) | 2020.02.27 |
| [NGM] 사용 후기 포인트 지급 안내입니다. (0) | 2020.02.13 |
댓글