From 36b1fef1181ac7981d266eb9803c9e0817134037 Mon Sep 17 00:00:00 2001
From: jaejungscene <jaejungscene@ajou.ac.kr>
Date: Fri, 7 Jul 2023 20:52:48 +0900
Subject: [PATCH] modify
---
.babelrc | 6 +++
.gitignore | 25 +++++++++++
package.json | 35 +++++++++++++++
src/App.js | 111 ++++++++++++++++++++++++++++++++++++++++++++++
src/index.js | 10 +++++
webpack.config.js | 41 +++++++++++++++++
6 files changed, 228 insertions(+)
create mode 100644 .babelrc
create mode 100755 .gitignore
create mode 100644 package.json
create mode 100755 src/App.js
create mode 100755 src/index.js
create mode 100644 webpack.config.js
diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..fbd6da0
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ "@babel/preset-env",
+ "@babel/preset-react"
+ ]
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100755
index 0000000..f088ade
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..fb1417f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "react-boilerplate",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "@mui/material": "^5.13.7",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
+ },
+ "scripts": {
+ "start": "webpack-dev-server --open --mode development --port 3000",
+ "build": "webpack --mode production"
+ },
+ "eslintConfig": {
+ "extends": "react-app"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ],
+ "devDependencies": {
+ "@babel/core": "^7.2.2",
+ "@babel/preset-env": "^7.3.1",
+ "@babel/preset-react": "^7.0.0",
+ "babel-loader": "^8.0.5",
+ "css-loader": "^6.7.3",
+ "file-loader": "^6.2.0",
+ "style-loader": "^3.3.2",
+ "webpack": "^5.77.0",
+ "webpack-cli": "^5.1.4",
+ "webpack-dev-server": "^4.13.1"
+ }
+}
diff --git a/src/App.js b/src/App.js
new file mode 100755
index 0000000..bb59e0b
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+// import Button from '@mui/material/Button';
+
+const TimeButton = (props) => {
+ let [time, setTime] = useState(null);
+
+ // const location = { country: true ? '한국' : '일본' };
+
+ // console.log("hello world");
+ // useEffect(() => {
+ // console.log('useEffect... 호출');
+ // }, [location]);
+ // console.log("heqewrqwerq");
+
+ // useEffect(() => {
+ // let timer = setInterval(() => {
+ // displayTime(props.timeZone);
+ // }, 1000);
+ // console.log("alsdkfj");
+ // return () => clearInterval(timer)
+ // }, []);
+
+ const displayTime = (zone) => {
+ let date = new Date();
+ setTime(date.toLocaleString('ko-KR', {timeZone: zone}))
+ }
+
+ return (
+ <>
+ <button onClick={()=>displayTime(props.timeZone)}>{props.cityName}</button>
+ <div id="time">{time}</div>
+ <hr></hr>
+ </>
+ )
+}
+
+const App = () => {
+ let cityList = [
+ {cityName: "Seoul", timezone:"Asia/Seoul"},
+ {cityName: "Dubai", timezone:"Asia/Dubai"},
+ {cityName: "Madrid", timezone:"Europe/Madrid"}
+ ];
+
+ return (
+ <div>
+ <h1>What time is it?</h1>
+ <hr></hr>
+ {cityList.map((i)=>{
+ return(
+ <TimeButton cityName={i.cityName} timeZone={i.timezone}/>
+ )
+ })}
+ </div>
+ );
+}
+
+export default App;
+
+
+
+// import React, {useState, useMemo} from 'react';
+
+// function App() {
+// const [number, setNumber] = useState(0);
+
+// // console.log("0000000");
+// // const squaredNum = squareNum(number);
+// // console.log("1111111");
+
+// const squaredNum = useMemo(()=>{
+// console.log("222222");
+// squareNum(number);
+// console.log("333333");
+// }, [number]);
+
+// const [counter, setCounter] = useState(0);
+
+// // Change the state to the input
+// const onChangeHandler = (e) => {
+// // console.log(e.target.value);
+// setNumber(e.target.value);
+// }
+
+// // console.log("check")
+
+// // Increases the counter by 1
+// const counterHander = () => {
+// setCounter(counter + 1);
+// }
+// return (
+// <div className="App">
+// <h1>Welcome to Geeksforgeeks</h1>
+// <input type="number" placeholder="Enter a number"
+// value={number} onChange={onChangeHandler}>
+// </input>
+// <div>squaredNum: {squaredNum}</div>
+// <div>number: {number}</div>
+// <hr></hr>
+// <button onClick= {counterHander}>Counter ++</button>
+// <div>Counter : {counter}</div>
+// </div>
+// );
+// }
+
+// // function to square the value
+// function squareNum(number){
+// console.log("Squaring will be done!");
+// return Math.pow(number, 2);
+// }
+
+// export default App;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100755
index 0000000..422769f
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+var container = document.getElementById('root');
+var root = ReactDOM.createRoot(container);
+
+root.render(<App />);
+
+module.hot.accept()
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..35e1440
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,41 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+ entry: {
+ app: './src/index.js'
+ },
+ output: {
+ filename: '[name].bundle.js',
+ path: path.resolve(__dirname, 'public')
+ },
+ module: {
+ rules: [{ //js 또는 jsx 파일을 빌드할 때 필요한 라이브러리 정의
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader'
+ }
+ },
+ {
+ test: /\.css$/i,
+ use: ['style-loader', 'css-loader']
+ },
+ {
+ test: /\.(png|jpe?g|gif)$/i,
+ loader: 'file-loader',
+ }]
+ },
+ devServer: {
+ static: {
+ directory: path.join(__dirname, 'public'),
+ },
+ allowedHosts: 'all',
+ },
+ plugins: [
+ new webpack.HotModuleReplacementPlugin()
+ ],
+ watchOptions: {
+ ignored: '**/node_modules',
+ },
+};
--
GitLab