인공지능으로 숫자를 판별하는 API를 작성하였으므로 API를 호출할 화면을 만들어야 한다. 다음과 같이 React로 앱을 생성하고 설정한다. 작성한 파일은 다음과 같다.
index.html
<html>
<head>
<meta charset="UTF-8"/>
<link rel='icon' href='favicon.ico' type='image/x-icon' />
<title>Mnist</title>
</head>
<body>
<div id="root"></div>
<script src="./app.js"></script>
</body>
</html>웹 어플리케이션의 첫 페이지이다. Webpack을 이용하여 빌드한 결과물을 public이라는 폴더에 app.js라는 파일로 저장하므로 다음과 같이 설정하였다.
package.json
{
"name": "react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "webpack-dev-server --hot",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.7.4",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/preset-env": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"react-hot-loader": "^4.12.18",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"dependencies": {
"@material-ui/core": "^4.7.2",
"axios": "^0.19.0",
"css-loader": "^3.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"style-loader": "^1.0.1"
}
}
어플리케이션의 dependency를 설정하는 package.json파일이다. 필요한 패키지를 다음과 같이 설치하였다.
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
name: 'react-app',
mode: 'development',
devtool: 'eval',
resolve:{
extensions: ['.js','jsx']
},
entry: {
app: ['./app'],
},
module: {
rules: [{
test: /\.jsx?/,
loader: 'babel-loader',
options:{
presets: [
['@babel/preset-env',{
targets:{
browsers: ['> 5% in KR']
},
debug: true,
}], '@babel/preset-react'],
plugins: [
'@babel/plugin-proposal-class-properties',
'react-hot-loader/babel'
],
}
},
{
test : /\.(css)$/,
use:['style-loader','css-loader']
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({debug: true}),
],
output: {
path: path.join(__dirname,'./build'),
filename: 'app.js',
publicPath: '/',
}
}웹팩은 의존성을 지닌 여러 모듈들을 엮어서 하나의 번들 파일로 만드는 번들 모듈러다. 크게 entry, module, output으로 나뉜다. entry에서는 번들링 하려는 자바 스크립트 모듈의 진입점을 설정한다. 여기서는 app.js로 설정하였다. module에서는 사용하는 모듈을 웹팩이 이해하도록 설정한다. output은 하나의 번들 파일을 어디에 어떻게 생성할지 설정한다. 결과는 app.js라는 파일로 생성되며 build이라는 폴더에 저장된다.
app.js
const ReactDom = require('react-dom');
const React = require('react');
const {hot} = require('react-hot-loader/root');
import Main from './Main';
import './app.css';
const Hot = hot(Main);
ReactDom.render(<Hot/>, document.querySelector('#root')); app.css
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
html{
font-family: 'Noto Sans KR' !important;
height: 100%;
width: 100%;
margin: 0px;
font-size: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
#root{
height: 100%;
width: 100%;
margin: 0px;
}
p{
margin:0px;
}번들링하려는 자바 스크립트 모듈의 진입점이다. Main.js를 index.html의 root라는 id를 가진 div 태그에 렌더링 한다. 지금까지는 설정과 관련된 코드가 대부분이었고 Main.js에서 본격적으로 화면과 관련된 코드를 작성한다.
Webpack을 설정하는 방법은 react 문서와 유튜브의 제로초님의 강의를 참고하였다.
React 참고 문서
https://reactjs.net/bundling/webpack.html
Webpack | ReactJS.NET
.NET integration for ReactJS
reactjs.net
다음 글 바로가기
'개인 개발 프로젝트 > AI 숫자 판별 앱' 카테고리의 다른 글
| [AI 숫자 판별 앱] 7. React 앱 Heroku에 배포 (0) | 2020.01.01 |
|---|---|
| [AI 숫자 판별 앱] 6. React 화면 코드 작성 (0) | 2019.12.29 |
| [AI 숫자 판별 앱] 4. API Heroku 배포 및 테스트 (0) | 2019.12.29 |
| [AI 숫자 판별 앱] 3. 숫자 판별 API 작성 및 테스트 (0) | 2019.12.16 |
| [AI 숫자 판별 앱] 2. 숫자 판별 함수 작성 (0) | 2019.12.16 |