react 조건문
This commit is contained in:
haerong22
@@ -1,6 +1,18 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
class Try extends PureComponent {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
const filtered = this.props.filtered(() => {
|
||||
|
||||
})
|
||||
this.state = {
|
||||
result: filtered,
|
||||
try: this.props.try,
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { tryInfo } = this.props;
|
||||
return (
|
||||
7
react_webgame/3.숫자야구/client.jsx
Normal file
7
react_webgame/3.숫자야구/client.jsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
import ReactDom from 'react-dom';
|
||||
|
||||
import Test from './NumberBaseball-class';
|
||||
|
||||
|
||||
ReactDom.render(<Test />, document.querySelector('#root'));
|
||||
10
react_webgame/3.숫자야구/index.html
Normal file
10
react_webgame/3.숫자야구/index.html
Normal 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/3.숫자야구/package-lock.json
generated
Normal file
6071
react_webgame/3.숫자야구/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
react_webgame/3.숫자야구/package.json
Normal file
27
react_webgame/3.숫자야구/package.json
Normal 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/3.숫자야구/webpack.config.js
Normal file
53
react_webgame/3.숫자야구/webpack.config.js
Normal 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,
|
||||
},
|
||||
};
|
||||
40
react_webgame/main/ResponseCheck-class.jsx
Normal file
40
react_webgame/main/ResponseCheck-class.jsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
class ResponseCheck extends Component {
|
||||
state = {
|
||||
state: 'waiting',
|
||||
message: '클릭해서 시작하세요.',
|
||||
result: [],
|
||||
}
|
||||
|
||||
onClickScreen = () => {
|
||||
|
||||
}
|
||||
|
||||
renderAverage = () => {
|
||||
const { result } = this.state;
|
||||
return result.length === 0
|
||||
? null
|
||||
: <div>평균 시간: {this.state.result.reduce((a, c) => a + c) / this.state.result.length}ms</div>
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const { state, message } = this.state;
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
id="screen"
|
||||
className={state}
|
||||
onClick={this.onClickScreen}
|
||||
>
|
||||
{message}
|
||||
</div>
|
||||
{this.renderAverage()}
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ResponseCheck;
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import ReactDom from 'react-dom';
|
||||
|
||||
import Test from './NumberBaseball-class';
|
||||
import ResponseCheck from './ResponseCheck-class';
|
||||
|
||||
|
||||
ReactDom.render(<Test />, document.querySelector('#root'));
|
||||
ReactDom.render(<ResponseCheck />, document.querySelector('#root'));
|
||||
@@ -2,6 +2,24 @@
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>숫자야구</title>
|
||||
<style>
|
||||
#screen {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
#screen.waiting {
|
||||
background-color: aqua;
|
||||
}
|
||||
#screen.ready {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
#screen.now {
|
||||
background-color: greenyellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
Reference in New Issue
Block a user