김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
5f64c2f3 1 parent 99f7ecc7

mysql DB연결

Inline Side-by-side
Showing 9 changed files with 131 additions and 191 deletions
......@@ -20,4 +20,7 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
\ No newline at end of file
yarn-error.log*
# database
database.json
\ No newline at end of file
......
......@@ -47,8 +47,6 @@ table {
html, body{
height:100%;
}
#root{
}
body{
width:100%;
background-attachment:fixed;
......
......@@ -13,7 +13,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<title>Do-gether</title>
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<body>
<div id="root"></div>
</body>
</html>
......
import React, { useState, useEffect } from "react";
import React from "react";
import NavBar from "./components/NavBar.js";
import BodyLayout from "./components/BodyLayout.js";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
root:{
}
})
function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<>
<NavBar />
<BodyLayout />
</div>
</>
);
}
......
......@@ -4,59 +4,68 @@ import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid";
import Icon from "@material-ui/core/Icon";
import CircularProgress from "@material-ui/core/CircularProgress";
import TodoCard from "./TodoCard.js";
const useStyles = makeStyles((theme) => ({
root:{
backgroundColor:"rgba(0,0,0,0.5)"
root: {
backgroundColor: "rgba(1,0,0,0.5)"
},
container: {
flexGrow: 1,
paddingTop:"4rem",
paddingBottom:"1rem",
paddingTop: "4rem",
paddingBottom: "1rem",
marginLeft: "auto",
marginRight: "auto"
},
item: {
marginRight: "auto",
},
item: {},
}));
const callApi = async () => {
const response = await fetch("/api/cards");
const body = await response.json();
return body;
};
export default function BodyLayout() {
const classes = useStyles();
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(1);
const callApi = async () => {
const response = await fetch("/api/cards");
const body = await response.json();
return body;
};
useEffect(() => {
callApi()
.then((res) => setData(res))
.then((res) => {
setData(res);
setIsLoading(0);
})
.catch((err) => console.log(err));
});
}, []);
if (!data) {
return <p>Loading....</p>;
if (isLoading) {
return (
<>
<CircularProgress />
</>
);
} else {
return (
<div className={classes.root}>
<Container className={classes.container} maxwidth="md">
<Grid className={classes.item} container spacing={0}>
{data.map((data) => {
return (
<Grid item xs="6" sm="6" md="3">
<TodoCard data={data} />
</Grid>
);
})}
<Grid item xs="6" sm="6" md="3">
<Icon style={{ fontSize: 60 }}>add_circle</Icon>
<Container className={classes.container} maxwidth="md">
<Grid className={classes.item} container>
{data.map((data) => {
return (
<Grid item xs={6} sm={6} md={3}>
<TodoCard data={data} id={data.date}/>
</Grid>
);
})}
<hr width="100%" height="19%" color="white" />
<Grid item xs={6} sm={6} md={3}>
<Icon style={{ fontSize: 60 }}>add_circle</Icon>
</Grid>
</Grid>
</Grid>
</Container>
</Container>
</div>
);
}
......
......@@ -42,7 +42,7 @@ export default function TodoCard(props) {
<Card className={classes.root}>
<CardContent>
<Typography className={classes.date} color="textSecondary" gutterBottom>
{data.date} &middot; {data.name} &middot; {data.isPublic}
{data.date} &middot; {data.name}
</Typography>
<Icon className={classes.icon} color="primary">
......
......@@ -8,7 +8,8 @@
},
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.4"
"express": "^4.16.4",
"mysql": "^2.18.1"
},
"devDependencies": {
"concurrently": "^4.0.1"
......
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
//const mysql = require('mysql');
const port = process.env.PORT || 5000;
/*
const data = fs.readFileSync('./database.json');
const conf = JSON.parse(data);
const connection = mysql.createConnection({
host: conf.host,
user: conf.user,
password: conf.password,
port: conf.port,
database: conf.database
});
connection.connect();
*/
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
......@@ -34,147 +52,7 @@ app.get("/api/cards", (req, res) => {
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
{
date: "2020-99-99",
name: "daehwi",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["휴대폰하기", "리액트하기", "옾소과제"],
},
{
date: "2020-99-99",
name: "fuck",
isPublic: true,
title: "열글자까지가능합니다.",
todo: ["헬스", "낮잠", "확랜과제"],
},
{
date: "2020-99-99",
name: "talk",
isPublic: true,
title: "열글자까지가능할걸요.",
todo: ["카톡", "라인", "페메","DM"],
},
{
date: "2020-99-99",
name: "성훈정",
isPublic: true,
title: "하나둘셋넷다섯여섯일.",
todo: ["쌍쌍바ㅏ", "비비빅", "메로나"],
},
}
]);
});
......
......@@ -32,6 +32,11 @@ array-flatten@1.1.1:
resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
bignumber.js@9.0.0:
version "9.0.0"
resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.0.0.tgz#805880f84a329b5eac6e7cb6f8274b6d82bdf075"
integrity sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A==
body-parser@1.19.0, body-parser@^1.18.3:
version "1.19.0"
resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
......@@ -130,6 +135,11 @@ cookie@0.4.0:
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
cross-spawn@^6.0.0:
version "6.0.5"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
......@@ -347,7 +357,7 @@ inherits@2.0.3:
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
inherits@2.0.4:
inherits@2.0.4, inherits@~2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
......@@ -384,6 +394,11 @@ is-stream@^1.1.0:
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
......@@ -477,6 +492,16 @@ ms@2.1.1:
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
mysql@^2.18.1:
version "2.18.1"
resolved "https://registry.yarnpkg.com/mysql/-/mysql-2.18.1.tgz#2254143855c5a8c73825e4522baf2ea021766717"
integrity sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==
dependencies:
bignumber.js "9.0.0"
readable-stream "2.3.7"
safe-buffer "5.1.2"
sqlstring "2.3.1"
negotiator@0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
......@@ -604,6 +629,11 @@ pify@^3.0.0:
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
proxy-addr@~2.0.5:
version "2.0.6"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
......@@ -649,6 +679,19 @@ read-pkg@^4.0.1:
parse-json "^4.0.0"
pify "^3.0.0"
readable-stream@2.3.7:
version "2.3.7"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
dependencies:
core-util-is "~1.0.0"
inherits "~2.0.3"
isarray "~1.0.0"
process-nextick-args "~2.0.0"
safe-buffer "~5.1.1"
string_decoder "~1.1.1"
util-deprecate "~1.0.1"
require-directory@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
......@@ -673,7 +716,7 @@ rxjs@^6.5.2:
dependencies:
tslib "^1.9.0"
safe-buffer@5.1.2:
safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
......@@ -775,6 +818,11 @@ spdx-license-ids@^3.0.0:
resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
sqlstring@2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/sqlstring/-/sqlstring-2.3.1.tgz#475393ff9e91479aea62dcaf0ca3d14983a7fb40"
integrity sha1-R1OT/56RR5rqYtyvDKPRSYOn+0A=
"statuses@>= 1.5.0 < 2", statuses@~1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
......@@ -797,6 +845,13 @@ string-width@^2.0.0, string-width@^2.1.1:
is-fullwidth-code-point "^2.0.0"
strip-ansi "^4.0.0"
string_decoder@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
dependencies:
safe-buffer "~5.1.0"
strip-ansi@^3.0.0, strip-ansi@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
......@@ -858,6 +913,11 @@ unpipe@1.0.0, unpipe@~1.0.0:
resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
utils-merge@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
......