mysql DB연결

김대휘
Commit 5f64c2f34f0826b489ab6e9c486b74f173593cca 5f64c2f3 1 parent 99f7ecc7
Showing 9 changed files with 131 additions and 191 deletions
.gitignore
client/public/index.css
client/public/index.html
client/src/App.js
client/src/components/BodyLayout.js
client/src/components/TodoCard.js
package.json
server.js
yarn.lock
--- a/.gitignore
View file @5f64c2f
+++ b/.gitignore
View file @5f64c2f
@@ -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
--- a/client/public/index.css
View file @5f64c2f
+++ b/client/public/index.css
View file @5f64c2f
@@ -47,8 +47,6 @@ table {
 html, body{
 	height:100%;
 }
-#root{
-}
 body{
 	width:100%;
 	background-attachment:fixed;
--- a/client/public/index.html
View file @5f64c2f
+++ b/client/public/index.html
View file @5f64c2f
@@ -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>
--- a/client/src/App.js
View file @5f64c2f
+++ b/client/src/App.js
View file @5f64c2f
-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>
+    </>
   );
 }
--- a/client/src/components/BodyLayout.js
View file @5f64c2f
+++ b/client/src/components/BodyLayout.js
View file @5f64c2f
@@ -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:{
+  root: {
-    backgroundColor:"rgba(0,0,0,0.5)"
+    backgroundColor: "rgba(1,0,0,0.5)"
   },
   container: {
     flexGrow: 1,
-    paddingTop:"4rem",
+    paddingTop: "4rem",
-    paddingBottom:"1rem",
+    paddingBottom: "1rem",
     marginLeft: "auto",
-    marginRight: "auto"
+    marginRight: "auto",
-  },
-  item: {
   },
+  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) {
+  if (isLoading) {
-    return <p>Loading....</p>;
+    return (
+      <>
+        <CircularProgress />
+      </>
+    );
   } else {
     return (
       <div className={classes.root}>
-      <Container className={classes.container} maxwidth="md">
+        <Container className={classes.container} maxwidth="md">
-        <Grid className={classes.item} container spacing={0}>
+          <Grid className={classes.item} container>
-          {data.map((data) => {
+            {data.map((data) => {
-            return (
+              return (
-              <Grid item xs="6" sm="6" md="3">
+                <Grid item xs={6} sm={6} md={3}>
-                <TodoCard data={data} />
+                  <TodoCard data={data} id={data.date}/>
-              </Grid>
+                </Grid>
-            );
+              );
-          })}
+            })}
-          <Grid item xs="6" sm="6" md="3">
+            <hr width="100%" height="19%" color="white" />
-            <Icon style={{ fontSize: 60 }}>add_circle</Icon>
+            <Grid item xs={6} sm={6} md={3}>
+              <Icon style={{ fontSize: 60 }}>add_circle</Icon>
+            </Grid>
           </Grid>
-        </Grid>
+        </Container>
-      </Container>
       </div>
     );
   }
--- a/client/src/components/TodoCard.js
View file @5f64c2f
+++ b/client/src/components/TodoCard.js
View file @5f64c2f
@@ -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">
--- a/package.json
View file @5f64c2f
+++ b/package.json
View file @5f64c2f
@@ -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"
--- a/server.js
View file @5f64c2f
+++ b/server.js
View file @5f64c2f
 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: ["쌍쌍바ㅏ", "비비빅", "메로나"],
-    },
   ]);
 });
--- a/yarn.lock
View file @5f64c2f
+++ b/yarn.lock
View file @5f64c2f
@@ -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"