node mysql connection error 해결

@@ -24,6 +24,7 @@ const MealCard = (props) => {
         headers: {
             'Content-Type': 'application/json',
             'authorization': user
+
         }
     }).then(response => response.json())
     .then(result => {

@@ -14,6 +14,7 @@ const UserCards = (props) => {
         headers: {
             'Content-Type': 'application/json',
             'authorization': user
+
         }
       }).then(response => response.json())
       .then( result => {
@@ -47,7 +48,7 @@ const UserCards = (props) => {
             <br/>
             <Container style={{'paddingTop':'1.2rem'}}>
                 <Row xs="2" sm="2" md="4">
-                    {picks.map((data, index) => 
+                    {picks && picks.map((data, index) => 
                     <Col key = {index}>
                     <PickedCard
                         key = {index}

@@ -26,7 +26,7 @@ const LandingPage = (props) => {
     useEffect(() => {
         const fetchData = async () => {
             const result = await axios(
-              '/api/datas',
+              '/api/datas'
             );
             setDatas(result.data);
           };

@@ -27,8 +27,7 @@ const MenuPage = (props) => {
     useEffect(() => {
         const fetchData = async () => {
             const result = await axios(
-              '/api/datas',
-              // localhost로 바꾸기
+              '/api/datas'
             );
             setDatas(result.data);
             setIsLoading(true);
@@ -169,7 +168,7 @@ const MenuPage = (props) => {
                         {filteredDatas.map((data, index) => 
                         <Col>
                         <MealCard
-                            key = {index}
+                            key = {data.id}
                             id = {data.id}
                             name = {data.name}
                             address = {data.address}

@@ -14,6 +14,7 @@ const MypickPage = () => {
             headers: {
                 'Content-Type': 'application/json',
                 'authorization': user
+
             }
         }).then(response => response.json())
         .then(result => {

@@ -13,8 +13,10 @@ const SigninPage = (props) => {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
+
             },
-            body: JSON.stringify(user)
+            body: JSON.stringify(user),
+            
         }).then(response => response.json())
     }
 

@@ -30,11 +30,12 @@ const SigninPage = (props) => {
             body: JSON.stringify(signupInfo),
             headers: {
               "Content-Type": "application/json"
+
             }
           };
 
         if( username && password ) {
-            fetch("http://localhost:3000/api/signup", signup_info)
+            fetch("/api/signup", signup_info)
             .then(response => response.json())
             .then(json => {
                 if(json.message === 'success') {

@@ -4,7 +4,7 @@ module.exports = function(app) {
   app.use(
     '/api',
     createProxyMiddleware({
-      target: 'http://localhost:5000',
+      target: 'http://localhost:5000/',
       changeOrigin: true,
     })
   );

@@ -15,7 +15,7 @@
   "author": "SeongHoon",
   "license": "ISC",
   "dependencies": {
-    "bcrypt": "^4.0.1",
+    "bcrypt": "^4.0.1",    
     "body-parser": "^1.19.0",
     "concurrently": "^5.2.0",
     "express": "^4.17.1",
@@ -24,4 +24,4 @@
     "jwt-decode": "^2.2.0",
     "mysql": "^2.18.1"
   }
-}
+}
\ No newline at end of file

@@ -29,7 +29,25 @@ const connection = mysql.createConnection({
   database: conf.database,
 });
 
-connection.connect();
+function handleDisconnect() {
+  connection.connect(function(err) {            
+    if(err) {                            
+      console.log('error when connecting to connection:', err);
+      setTimeout(handleDisconnect, 2000); 
+    }                                   
+  });                                 
+                                         
+  connection.on('error', function(err) {
+    console.log('connection error', err);
+    if(err.code === 'PROTOCOL_CONNECTION_LOST') { 
+      return handleDisconnect();                      
+    } else {                                    
+      throw err;                              
+    }
+  });
+}
+
+handleDisconnect();
 
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));
@@ -179,8 +197,21 @@ app.get("/api/mypicks", (req, res) => {
   let temp = iconv.decode(dataBuffer, "EUC-KR");
 
   connection.query(`SELECT pick FROM USER WHERE NAME='${username}';`, (err, rows, fileds) => {
+    if(rows.length === 0) {
+      return res.status(401).json({
+        code: 401,
+        message: 'card 0'
+      });
+    }
+    if(rows[0].pick === null) {
+      return res.status(401).json({
+        code: 401,
+        message: 'card 0'
+      });
+    }
     
     let user_picks = rows[0].pick.split(',');
+      console.log(rows[0].pick);
       temp = JSON.parse(temp);
       user_picks.pop();
       for(let i=0; i<user_picks.length; i++) {
@@ -196,43 +227,55 @@ app.get("/api/mypicks", (req, res) => {
 
 app.post('/api/pick', (req, res) => {
    
-    const user = jwt_decode(req.headers.authorization);
-    const username = user.name;
-    const cardid = req.body.cardid;
+  const user = jwt_decode(req.headers.authorization);
+  const username = user.name;
+  const cardid = req.body.cardid;
 
-    connection.query(`SELECT pick FROM USER WHERE NAME='${username}';`, (err, rows, fileds)=> {
-      if(rows.length === 0) {
+  connection.query(`SELECT pick FROM USER WHERE NAME='${username}';`, (err, rows, fileds)=> {
+    if(rows.length === 0) {
+      return res.status(401).json({
+        code: 401,
+        message: 'card exist'
+      });
+    } 
+    else {
+      if(rows[0].pick === null || rows[0].pick === '') {
+        const newPick = cardid.toString() + ',';
+        connection.query(`UPDATE USER SET pick='${newPick}' WHERE NAME='${username}';`, (err, rows, fields) => {
+          return res.status(200).json({
+            code: 200,
+            message: 'insertion success',
+          });
+        })
+      }
+      else {
+      var flag = true;
+      let user_picks = rows[0].pick.split(',');
+      user_picks.pop();
+      for(let i=0; i<user_picks.length; i++) {
+        user_picks[i] = parseInt(user_picks[i]);
+        if(user_picks[i] == cardid) {
+          flag = false;
+        }
+      }
+      if(flag) {
+        const newPick = rows[0].pick + cardid.toString() + ',';
+        connection.query(`UPDATE USER SET pick='${newPick}' WHERE NAME='${username}';`, (err, rows, fields) => {
+          return res.status(200).json({
+            code: 200,
+            message: 'insertion success',
+          });
+        })
+      }
+      else {
         return res.status(401).json({
           code: 401,
           message: 'card exist'
         });
-      } else {
-        let flag = true;
-        let user_picks = rows[0].pick.split(',');
-        user_picks.pop();
-        for(let i=0; i<user_picks.length; i++) {
-          user_picks[i] = parseInt(user_picks[i]);
-          if(user_picks[i] == cardid) {
-            flag = false;
-          }
-        }
-        if(flag) {
-          const newPick = rows[0].pick + cardid.toString() + ',';
-          connection.query(`UPDATE USER SET pick='${newPick}' WHERE NAME='${username}';`, (err, rows, fields) => {
-            return res.status(200).json({
-              code: 200,
-              message: 'insertion success',
-            });
-          })
-        } else {
-          return res.status(401).json({
-            code: 401,
-            message: 'card exist'
-          });
-        }
-
       }
-    })
+      } 
+    }
+  })
 });
 
 app.post('/api/delete', (req, res) => {
@@ -248,6 +291,12 @@ app.post('/api/delete', (req, res) => {
       });
     } else {
       let flag = false;
+      if(rows[0].pick === null) {
+        return res.status(401).json({
+          code: 401,
+          message: 'card 0'
+        });
+      }
       let user_picks = rows[0].pick.split(',');
       let newPick = '';
       user_picks.pop();