날짜 : 21.07.02 - 21.07.03
참고 강의
1. [server] 폴더 정리
index.js를 보다 간단히 하고 테마에 맞도록 routes 파일들을 생성하기 위함
1) root에서 cors 설치(CORS에러 방지)
npm install cors --save2) [server] - [index.js] 수정
const express = require("express");
const app = express();
const path = require("path");
const cors = require('cors')
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const config = require("./config/key");
// const mongoose = require("mongoose");
// mongoose
// .connect(config.mongoURI, { useNewUrlParser: true })
// .then(() => console.log("DB connected"))
// .catch(err => console.error(err));
const mongoose = require("mongoose");
const connect = mongoose.connect(config.mongoURI,
{
useNewUrlParser: true, useUnifiedTopology: true,
useCreateIndex: true, useFindAndModify: false
})
.then(() => console.log('MongoDB Connected...'))
.catch(err => console.log(err));
app.use(cors())
//to not get any deprecation warning or error
//support parsing of application/x-www-form-urlencoded post data
app.use(bodyParser.urlencoded({ extended: true }));
//to get json data
// support parsing of application/json type post data
app.use(bodyParser.json());
app.use(cookieParser());
app.use('/api/users', require('./routes/users'));
//use this to show the image you have in node js server to client (react js)
//https://stackoverflow.com/questions/48914987/send-image-path-from-node-js-express-server-to-react-client
app.use('/uploads', express.static('uploads'));
// Serve static assets if in production
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("client/build"));
// index.html for all page routes
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "../client", "build", "index.html"));
});
}
const port = process.env.PORT || 5000
app.listen(port, () => {
console.log(`Server Running at ${port}`)
}); 2) [server] - [routes] - [user.js] 파일 생성
const express = require('express');
const router = express.Router();
const { User } = require("../models/User");
const { auth } = require("../middleware/auth");
//=================================
// User
//=================================
router.get("/auth", auth, (req, res) => {
res.status(200).json({
_id: req.user._id,
isAdmin: req.user.role === 0 ? false : true,
isAuth: true,
email: req.user.email,
name: req.user.name,
lastname: req.user.lastname,
role: req.user.role,
image: req.user.image,
});
});
router.post("/register", (req, res) => {
const user = new User(req.body);
user.save((err, doc) => {
if (err) return res.json({ success: false, err });
return res.status(200).json({
success: true
});
});
});
router.post("/login", (req, res) => {
User.findOne({ email: req.body.email }, (err, user) => {
if (!user)
return res.json({
loginSuccess: false,
message: "Auth failed, email not found"
});
user.comparePassword(req.body.password, (err, isMatch) => {
if (!isMatch)
return res.json({ loginSuccess: false, message: "Wrong password" });
user.generateToken((err, user) => {
if (err) return res.status(400).send(err);
res.cookie("w_authExp", user.tokenExp);
res
.cookie("w_auth", user.token)
.status(200)
.json({
loginSuccess: true, userId: user._id
});
});
});
});
});
router.get("/logout", auth, (req, res) => {
User.findOneAndUpdate({ _id: req.user._id }, { token: "", tokenExp: "" }, (err, doc) => {
if (err) return res.json({ success: false, err });
return res.status(200).send({
success: true
});
});
});
module.exports = router;2. Favorite 버튼
1) [server] - [models] - [Favorite.js] 파일 생성
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const favoriteSchema = mongoose.Schema({
userFrom: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User'
},
movieId: {
type: String,
},
movieTitle: {
type: String
},
moviePost: {
type: String
},
movieRunTime: {
type: String
}
}, { timestamps: true });
const Favorite = mongoose.model('Favorite', favoriteSchema);
module.exports = { Favorite }2) [client] - [MovieDetail] - [Section] - [Favorite.js] 파일 생성
import React, { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import axios from 'axios';
function Favorite(props) {
useEffect(()=> {
let variables = {
userFrom,
movieId,
}
axios.post('/api/favorite/favoriteNumber', variables)
.then(response => {
if(response.data.success){
}else{
alert('숫자 정보를 가져오는데 실패하였습니다.');
}
})
},[])
return (
<div>
<button>Favorite</button>
</div>
)
}
export default withRouter(Favorite);
3) [MovieDetail] - [MovieDetail.js]의 return Body에 코드 추가
<div style={{display:'flex', justifyContent:'flex-end'}}>
<Favorite movieInfo={Movie} movieId={movieId} userFrom={localStorage.getItem('userId')}/>
</div>4) [Section] - [Favorite.js]에서 prop 가져오기
function Favorite(props) {
const movieId = props.movieId;
const userFrom = props.userFrom;
const movieTitle = props.movieInfo.title;
const moviePost = props.movieInfo.backdrop_path;
const movieRunTime = props.movieInfo.runtime
...
...
}5) [server] - [routes] - [favorite.js] 파일 생성
const express = require('express');
const router = express.Router();
const { Favorite } = require('../models/Favorite');
router.post('/favoriteNumber', (req, res) => {
// mongoDB에서 favorite 숫자 가져오기
Favorite.find({ "movieId": req.body.movieId })
.exec((err, info) => {
if (err) return res.status(400).send(err)
// front에 숫자 정보 전송
res.status(200).json({ success: true, favoriteNumber: info.length })
})
});
module.exports = router;6) [server] - [index.js]에 app.use 추가
app.use('/api/favorite', require('./routes/favorite'));7)[MovieDetail] - [Section] - [Favorite.js]
console.log로 server에서 데이터가 정상적으로 전송중인지 확인
useEffect(()=> {
let variables = {
userFrom,
movieId,
}
axios.post('/api/favorite/favoriteNumber', variables)
.then(response => {
console.log(response.data)
if(response.data.success){
}else{
alert('숫자 정보를 가져오는데 실패하였습니다.');
}
})
},[])- console.log 결과
success: true 와 favoriteNumber가 정상적으로 뜨는 것을 볼 수 있다.
Full Code
Walang Github
Walang Notion
나의 색으로 가득하게