[클론코딩] 무비앱 시리즈 #10 ~ #11

#10 Favorite 버튼 만들기 (2)

 

 

#9에서는 영화를 좋아하는 사람 수를 가져오다가 끝이 났다

이어서 진행할 것이다

 

server 폴더 안에있는 routes 폴더에 favorite.js 파일을 생성해준다 

기본적인 틀은 user.js을 가져와 복사, 붙여넣기 한다

 

그리고 맞게 수정해준다

const express = require('express');
const router = express.Router();
const { Favorite } = require('../models/Favorite')

router.post('/favoriteNumber', (req, res) => {
  //req.body.movieId // 좋아요 숫자가 얼마나 되는지, body : index.js에서 bodyParser있음. 그래서 body를 이용하여 movieId를 받아내는거임


  // mongoDB에서 favorite 숫자를 가져오기
  Favorite.find({"movieId" : req.body.movieId})
  .exec(( err, info ) => {
    if(err) return res.status(400).send(err) // error의 정보를 클라이언트에 보냄
    
    // 그 다음 프론트에 다시 숫자 정보를 보내주기    
    res.status(200).json({ success:true, favoriteNumber : info.length })
  })
}) // Favorite.js에서 post request를 하기 때문에

module.exports = router;

 

router.post를 할 때 좀 더 간편하게 하기 위해 index.js에 코드 하나를 추가한다

app.use('/api/favorite', require('./routes/favorite')); // 이거 안하면 모든 서비스 api 서비스를 index에 넣어줘야
// endpoint의 주소가 parameter1과 같은 주소로 시작이 된다

 

 

 

#11 Favorite 버튼 만들기 (3)

 

FavoriteNumber를 만들었으니 Favorite 리스트까지 만들어야한다

#10과 굉장히 유사하므로 생략하겠다

 

최종 완성된 코드는 다음과 같다

 

client - <Favorite.js>

import React, { useEffect, useState } from 'react'
import Axios from 'axios'


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.movieRunTime

  const [FavoriteNumber, setFavoriteNumber] = useState(0)
  const [Favorited, setFavorited] = useState(false)

  useEffect(() =>{
    // fetch, Axios

    let variables = {
      userFrom,
      movieId
    }

    Axios.post('/api/favorite/favoriteNumber', variables) // 서버에게 요청
      .then(response => {
        console.log(response.data)
        setFavoriteNumber(response.data.favoriteNumber)
        if(response.data.success){

        }
        else{
          alert('숫자 정보를 가져오는데 실패했습니다.')
        }
      })

      Axios.post('/api/favorite/favorited', variables) // 서버에게 요청
      .then(response => {
        setFavorited(response.data.favorited)
        if(response.data.success){


        }
        else{
          alert('정보를 가져오는데 실패했습니다.')
        }
      })
  }, [])

  return (
    <div>
      <button >{Favorited ? " Not Favorite " : "Add to Favorite "} {FavoriteNumber}</button>
    </div>
  )
}

export default Favorite

 

server - favorite.js

const express = require('express');
const router = express.Router();
const { Favorite } = require('../models/Favorite')

router.post('/favoriteNumber', (req, res) => {
  //req.body.movieId // 좋아요 숫자가 얼마나 되는지, body : index.js에서 bodyParser있음. 그래서 body를 이용하여 movieId를 받아내는거임


  // mongoDB에서 favorite 숫자를 가져오기
  Favorite.find({"movieId" : req.body.movieId})
  .exec(( err, info ) => {
    if(err) return res.status(400).send(err) // error의 정보를 클라이언트에 보냄
    
    // 그 다음 프론트에 다시 숫자 정보를 보내주기    
    res.status(200).json({ success:true, favoriteNumber : info.length })
  })
}) // Favorite.js에서 post request를 하기 때문에

router.post('/favorited', (req, res) => {
 
  // 내가 이 영화를 Favorite 리스트에 넣었는지 정보를 DB에서 가져오기
  Favorite.find({"movieId" : req.body.movieId, "userFrom" : req.body.userFrom})
  .exec(( err, info ) => {
    if(err) return res.status(400).send(err) // error의 정보를 클라이언트에 보냄
    
    let result = false;
    if(info.length !== 0){
      result = true
    }
    
    res.status(200).json({ success:true, favorited : result })
  })
})

module.exports = router;

 

결과창

 

 

---

사실 console.log가 안찍혀서 정보가 안가져와졌나 싶은데 다음주에 확인해봐야겠다

 

npm run dev를 하면 나타나는 문제였다

 

https://www.inflearn.com/questions/29435

[참고] Error : MongooseServerSelectionError - 인프런 | 질문 & 답변

해결했다

mongoDB의 서버 문제였다

mongoDB 사이트로 가서

Network Access - ADD IP ADDRESS로 간다

거기서 모든 서버를 사용한다고 했더니 됐다

휴..