박선진

react express 연동

const express = require('express');
const router = express.Router();
const bodyParser = require('body-parser');
router.get('/', function(req,res) {
res.send({greeting: 'Hello React x Node.js'});
router.get('/data', function(req,res) {
return res.json({data:'myData'});
});
......
......@@ -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",
......
......@@ -2,8 +2,10 @@
const express = require('express');
const app = express();
const api = require('./apiRouter');
const cors = require('cors');
app.use(cors());
app.use('/api', api);
const port = 3002;
const port = 3001;
app.listen(port, () => console.log(`노드서버 시작 : ${port}`));
......
......@@ -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>
......
......@@ -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>
......