Skip to content
Snippets Groups Projects
Commit 24a5117d authored by 찬주 이's avatar 찬주 이
Browse files

Merge branch 'next' into 'master'

Next

See merge request !1
parents 6a122d23 fb087be5
No related branches found
No related tags found
1 merge request!1Next
Pipeline #7520 passed
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
\ No newline at end of file
# 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*
{
"name": "react-boilerplate",
"version": "0.1.0",
"private": true,
"dependencies": {
"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",
"style-loader": "^3.3.2",
"file-loader": "^6.2.0",
"webpack": "^5.77.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.1"
}
}
This diff is collapsed.
public/index.html 100644 → 100755
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="generator" content="GitLab Pages"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Plain HTML site using GitLab Pages</title> <title>React App</title>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="navbar"> <div id="root"></div>
<a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a> <script src="./app.bundle.js"></script>
<a href="https://gitlab.com/pages/plain-html/">Repository</a>
<a href="https://gitlab.com/pages/">Other Examples</a>
</div>
<h1>Hello World!</h1>
<p>
This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
</p>
</body> </body>
</html> </html>
import React, { useState, useEffect, useMemo } from 'react';
const TimeButton = (props) => {
const [time, setTime] = useState(null);
const timer = useMemo(() => {
return setInterval(() => {
let date = new Date();
let options = { timeZone: props.tz, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
let formattedDate = date.toLocaleDateString(undefined, options);
setTime(formattedDate);
}, 1000);
}, [props.tz]);
useEffect(() => {
return () => {
clearInterval(timer);
};
}, [timer]);
const displayTime = () => {
let date = new Date();
let options = { timeZone: props.tz, weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' };
let formattedDate = date.toLocaleDateString(undefined, options);
setTime(formattedDate);
}
return (
<>
<button onClick={displayTime} tz={props.tz}>{props.name}</button>
<div id='time'>{time}</div>
</>
);
}
const App = () => {
const cityListConst = [
{ cityName: "Vienna", timezone: "Europe/Vienna" },
{ cityName: "Lord_Howe", timezone: "Australia/Lord_Howe" },
{ cityName: "Shanghai", timezone: "Asia/Shanghai" }
];
const [cityList, setCityList] = useState(cityListConst);
return (
<>
<h1>내가 가고 싶은 곳들</h1>
<div>
{cityList.map((city) => (
<TimeButton key={city.cityName} tz={city.timezone} name={city.cityName} />
))}
</div>
</>
);
}
export default App;
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()
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: [{
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',
},
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment