mindol1004/excel-download
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

map

Browse Source
This commit is contained in:
haerong22
2020-12-20 20:04:29 +09:00
parent 1ca5d09378
commit 1de0dfde66
10 changed files with 6223 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
react_webgame/main/WordRelay.jsx → react_webgame/2. 끝말잇기/WordRelay.jsx
View File

0
react_webgame/main/WordRelayHooks.jsx → react_webgame/2. 끝말잇기/WordRelayHooks.jsx
View File

6
react_webgame/2. 끝말잇기/client.jsx Normal file
View File

@@ -0,0 +1,6 @@
const React = require('react');
const ReactDom = require('react-dom');
const WordRelayHooks = require('./WordRelayHooks');
ReactDom.render(<WordRelayHooks />, document.querySelector('#root'));

10
react_webgame/2. 끝말잇기/index.html Normal file
View File

@@ -0,0 +1,10 @@
<html>
<head>
<meta charset="utf-8"/>
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>

6071
react_webgame/2. 끝말잇기/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

27
react_webgame/2. 끝말잇기/package.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "main",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack serve --env development"
},
"author": "kim",
"license": "MIT",
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"babel-loader": "^8.2.2",
"react-refresh": "^0.9.0",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}

53
react_webgame/2. 끝말잇기/webpack.config.js Normal file
View File

@@ -0,0 +1,53 @@
const path = require('path'); // 경로 조작하는 모듈
const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
name: 'wordrelay-setting',
mode: 'development', // 실 서비스 에서는 production
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx']
},
entry: {
app:['./client'],
}, // 입력
module: {
rules: [{
test: /\.jsx?$/, // js, jsx 파일에 babel-loader적용
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['> 5% in KR','last 2 chrome versions'],
},
debug: true,
}],
'@babel/preset-react'
],
plugins: [
'@babel/plugin-proposal-class-properties',
'react-refresh/babel',
],
},
}],
}, // 모듈적용
plugins: [
new RefreshWebpackPlugin()
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js',
publicPath: '/dist/',
}, // 출력
devServer: {
publicPath: '/dist/',
hot: true,
},
};

51
react_webgame/main/NumberBaseball.jsx Normal file
View File

@@ -0,0 +1,51 @@
import React, { Component } from 'react';
// 숫자 4개를 겹치지않고 랜덤하고 뽑는 함수
function getNumbers() {
}
class NumberBaseball extends Component {
state = {
result: '',
value: '',
answer: getNumbers(),
tries: [],
};
onSubmitForm = () => {
}
onChangeInput = () => {
}
input;
onRefInput = (c) => {
this.input = c;
}
render() {
return (
<>
<h1>{this.state.result}</h1>
<form onSubmit={this.onSubmitForm}>
<input ref={this.onRefInput} maxLength={4} value={this.state.value} onChange={this.onChangeInput}/>
</form>
<div>시도: {this.state.tries.length}</div>
<ul>
{['사과', '바나나', '포도', '귤', '수박'].map((v) => {
return (
<li>{v}</li>
)
})
}
</ul>
</>
)
}
}
export default NumberBaseball; // import NumberBaseball

8
react_webgame/main/client.jsx
View File

@@ -1,6 +1,6 @@
const React = require('react'); import React from 'react';
const ReactDom = require('react-dom'); import ReactDom from 'react-dom';
const WordRelayHooks = require('./WordRelayHooks'); import NumberBaseball from './NumberBaseball';
ReactDom.render(<WordRelayHooks />, document.querySelector('#root')); ReactDom.render(<NumberBaseball />, document.querySelector('#root'));

2
react_webgame/main/index.html
View File

@@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>끝말잇기</title> <title>숫자야구</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>