공룡 점프 게임은 리액트만 이용하여 구현하였다. 작성한 파일은 다음과 같다.
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",
"file-loader": "^5.0.2",
"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",
"express": "^4.17.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-motion": "^0.5.2",
"style-loader": "^1.0.1"
}
}
애플리케이션의 dependency를 설정하는 package.json파일이다. 필요한 패키지를 다음과 같이 설치하였다. webpack-dev-server은 웹팩을 이용하여 빌드하고 로컬에서 리액트 애플리케이션을 구동하는 서버를 유지하는 역할을 한다. webpack은 웹팩을 이용하여 빌드한다. 배포시 빌드 결과물을 생성하기 위해 사용한다. express는 빌드 결과물을 이용하여 배포할때 사용한다.
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: ['./client'],
},
module: {
rules: [
{
test: /\.jsx?/,
use:{
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:[
{
loader:'style-loader'
},
{
loader:'css-loader'
},
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader : 'file-loader'
}
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({debug: true}),
],
output: {
path: path.join(__dirname,'./build'),
filename: 'app.js',
publicPath: '/',
}
}웹팩은 의존성을 지닌 여러 모듈들을 엮어서 하나의 번들 파일로 만드는 번들 모듈러다. 크게 entry, module, output으로 나뉜다. entry에서는 번들링 하려는 자바 스크립트 모듈의 진입점을 설정한다. 여기서는 client.js로 설정하였다.
module에서는 사용하는 모듈을 웹팩이 이해하도록 설정한다. rules에서는 어떤 규칙을 이용할 것인지를 배열 형태로 정의한다. rules에는 세 개의 객체를 정의하였다. 각 객체에서 test에서는 로딩할 파일이 어떤 형식인지 정의하고 use에서는 파일을 로딩할 때 어떤 로더와 옵션을 이용할지 정의한다.
첫 번째 객체에서는 js와 jsx 파일을 babel을 이용하여 로딩하도록 설정한다. 바벨을 사용하는 이유는 js로 작성한 코드가 브라우저 종류와 버전에 상관없이 동일하게 작동하도록 하기 위함이다. 여기서는 한국에서 가장 많이 사용하는 상위 95% 브라우저까지 지원하도록 설정하였다. 두 번째 객체에서는 .css 파일을 style-loader와 css-loader를 이용하여 로딩하도록 설정하였고, 세 번째 객체에서는 .png, .svg, .jpg, .gif 파일을 file-loader를 이용하여 로딩하도록 설정하였다.
output은 하나의 번들 파일을 어디에 어떻게 생성할지 설정한다. 결과는 filename에서 정의한 app.js라는 파일로 생성되며 path에서 정의한 build이라는 폴더에 저장된다. publicPath는 서버상의 경로로 나중에 리액트를 배포할때 빌드한 번들 파일이나 이미지 파일이 위치할 경로를 의미한다. 개발 시 localhost에서 애플리케이션을 실행하면 해당 가상 경로에 번들 파일과 이미지 파일이 위치한다. 이때는 실제로 파일이 생기진 않는다.
index.html
<html>
<head>
<meta charset="UTF-8"/>
<title>react-app</title>
</head>
<body>
<div id="root"></div>
<script src="./app.js"></script>
</body>
</html>웹 어플리케이션의 첫 페이지이다. Webpack을 이용하여 빌드한 결과물은 index.html이 위치하는 경로에 app.js라는 파일로 저장하므로 다음과 같이 설정하였다.
client.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel='icon' href='favicon.ico' type='image/x-icon' />
<title>Jump Game</title>
</head>
<body>
<div id="root"></div>
<script src="./app.js"></script>
</body>
</html>client.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 태그에 렌더링 한다. React hot loader는 webpack-dev-server를 실행 중일 때 변경사항이 생기면 다시 실행할 필요 없이 바로 반영해주기 위해 사용한다. Main.js에서부터 본격적으로 화면과 관련된 코드를 작성한다.
Webpack 참고 문서
webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
[전체 글]
'개인 개발 프로젝트 > 공룡 점프 게임' 카테고리의 다른 글
| [공룡 점프 게임] 6. React 웹 게임 Heroku에 배포 (0) | 2020.07.21 |
|---|---|
| [공룡 점프 게임] 5. 공룡과 병균 컴포넌트 작성 (0) | 2020.02.02 |
| [공룡 점프 게임] 4. 배경 컴포넌트 작성 (0) | 2020.02.02 |
| [공룡 점프 게임] 3. 메인화면 작성 (0) | 2020.02.02 |
| [공룡 점프 게임] 1. 프로젝트 소개 (2) | 2020.02.01 |