react express 연동

박선진
Commit c607dcf22ed29639bad18ce3b379c1f4ddd0c4b9 c607dcf2 1 parent f6a5bbf3
Showing 5 changed files with 46 additions and 29 deletions
Back-end/apiRouter.js
Back-end/package-lock.json
Back-end/server.js
Front-end/src/pages/subject/Subject.js
Front-end/src/pages/videoAnalysis/VideoAnalysis.js
--- a/Back-end/apiRouter.js
View file @c607dcf
+++ b/Back-end/apiRouter.js
View file @c607dcf
-const express = require('express');
+const express = require('express');
-
+const router = express.Router();
-const router = express.Router();
+const bodyParser = require('body-parser');
-
+
-
+
-
+router.get('/data', function(req,res) {
-router.get('/', function(req,res) {
+    return res.json({data:'myData'});
-
+});
-  res.send({greeting: 'Hello React x Node.js'});
+
-
+
-});
+
-
-
-
 module.exports = router;
\ No newline at end of file
--- a/Back-end/package-lock.json
View file @c607dcf
+++ b/Back-end/package-lock.json
View file @c607dcf
@@ -61,6 +61,15 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -233,6 +242,11 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
--- a/Back-end/server.js
View file @c607dcf
+++ b/Back-end/server.js
View file @c607dcf
-
+
-const express = require('express');
+const express = require('express');
-const app = express();
+const app = express();
-const api = require('./apiRouter');
+const api = require('./apiRouter');
-
+const cors = require('cors');
-app.use('/api', api);
+
-
+app.use(cors());
-const port = 3002;
+app.use('/api', api);
-app.listen(port, () => console.log(`노드서버 시작 : ${port}`));
+
+const port = 3001;
+app.listen(port, () => console.log(`노드서버 시작 : ${port}`));
--- a/Front-end/src/pages/subject/Subject.js
View file @c607dcf
+++ b/Front-end/src/pages/subject/Subject.js
View file @c607dcf
@@ -58,9 +58,6 @@ class Subject extends PureComponent {
                 </blockquote>
                 <FormGroup style={{margin:'10px 0px 0px 0px'}}>
-                  <Label md="3" className="text-md-right">
-                    Image upload
-                  </Label>
                   <Col md="8">
                     <input
                       accept="image/*" onChange={this.onChangeInputImage}
@@ -75,7 +72,7 @@ class Subject extends PureComponent {
                           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTEiIGhlaWdodD0iMTQxIj48cmVjdCB3aWR0aD0iMTkxIiBoZWlnaHQ9IjE0MSIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1LjUiIHk9IjcwLjUiIHN0eWxlPSJmaWxsOiNhYWE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xOTF4MTQxPC90ZXh0Pjwvc3ZnPg=="
                         />}
                     <div>
-                      <Button type="button" color="default" onClick={this.onClickSaveImage} style={{margin:'10px 0px 0px 0px'}}>Select image</Button>
+                      <Button type="button" color="default" onClick={this.onClickSaveImage} style={{margin:'10px 0px 0px 0px'}}>Upload Image</Button>
                     </div>
                   </Col>
                 </FormGroup>
--- a/Front-end/src/pages/videoAnalysis/VideoAnalysis.js
View file @c607dcf
+++ b/Front-end/src/pages/videoAnalysis/VideoAnalysis.js
View file @c607dcf
@@ -18,6 +18,7 @@ class Dashboard extends React.Component {
     this.onClickSaveVideo = this.onClickSaveVideo.bind(this);
     this.state = {
       videoFiles: [],
+      videoAnalysisResult:null
     };
   }
@@ -39,10 +40,16 @@ class Dashboard extends React.Component {
     e.preventDefault();
     console.log(this.state.videoFiles);
     console.log("upload video");
+    // post request
+    fetch('http://localhost:3001/api/data')
+    .then(res=>res.json())
+    .then(data=>this.setState({videoAnalysisResult:data}))
+    
+    console.log(this.state.videoAnalysisResult);
     this.setState({
       videoFiles:[],
     });
-    // post request
+
   }
   static propTypes = {
@@ -68,7 +75,7 @@ class Dashboard extends React.Component {
                       type="file" name="file" className="display-none"
                     />
                     <div>
-                      <Button type="button" color="default" onClick={this.onClickSaveVideo} style={{margin:'10px 0px 0px 0px'}}>Select video</Button>
+                      <Button type="button" color="default" onClick={this.onClickSaveVideo} style={{margin:'10px 0px 0px 0px'}}>Analysis Video</Button>
                     </div>
                   </Col>
                 </FormGroup>