node mysql connection error 해결

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

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

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

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

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

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

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

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

@@ -29,7 +29,25 @@ const connection = mysql.createConnection({
   database: conf.database,
   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.json());
 app.use(bodyParser.urlencoded({ extended: true }));
 app.use(bodyParser.urlencoded({ extended: true }));
@@ -179,8 +197,21 @@ app.get("/api/mypicks", (req, res) => {
   let temp = iconv.decode(dataBuffer, "EUC-KR");
   let temp = iconv.decode(dataBuffer, "EUC-KR");
 
 
   connection.query(`SELECT pick FROM USER WHERE NAME='${username}';`, (err, rows, fileds) => {
   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(',');
     let user_picks = rows[0].pick.split(',');
+      console.log(rows[0].pick);
       temp = JSON.parse(temp);
       temp = JSON.parse(temp);
       user_picks.pop();
       user_picks.pop();
       for(let i=0; i<user_picks.length; i++) {
       for(let i=0; i<user_picks.length; i++) {
@@ -206,8 +237,19 @@ app.post('/api/pick', (req, res) => {
         code: 401,
         code: 401,
         message: 'card exist'
         message: 'card exist'
       });
       });
-      } else {
-        let flag = true;
+    } 
+    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(',');
       let user_picks = rows[0].pick.split(',');
       user_picks.pop();
       user_picks.pop();
       for(let i=0; i<user_picks.length; i++) {
       for(let i=0; i<user_picks.length; i++) {
@@ -224,13 +266,14 @@ app.post('/api/pick', (req, res) => {
             message: 'insertion success',
             message: 'insertion success',
           });
           });
         })
         })
-        } else {
+      }
+      else {
         return res.status(401).json({
         return res.status(401).json({
           code: 401,
           code: 401,
           message: 'card exist'
           message: 'card exist'
         });
         });
       }
       }
-
+      } 
     }
     }
   })
   })
 });
 });
@@ -248,6 +291,12 @@ app.post('/api/delete', (req, res) => {
       });
       });
     } else {
     } else {
       let flag = false;
       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 user_picks = rows[0].pick.split(',');
       let newPick = '';
       let newPick = '';
       user_picks.pop();
       user_picks.pop();