[클론코딩] 무비앱 시리즈 #13

 #13 Favorite 페이지 만들기 (1)

 

 

Favorite 리스트에 넣은 영화들을 한 눈에 확인할 수 있는 페이지를 만들 것이다

 

1. FavoritePage 템플릿 만들기

일단 페이지를 하나 만드는 것이므로 views 폴더 안에 FavoritePage 폴더를 생성하고, 그 안에 FavoritePage.js 파일을 생생성한다

 

그 다음 App.js에 연결해준다

import FavoritePage from './views/FavoritePage/FavoritePage';

<Route exact path="/favorite" component={Auth(FavoritePage, true)} />

Auth(FavoritePage, true)는 로그인한 사람만 볼 수 있다는 뜻이다

 

그 다음 views - NavBar - Sections 안에 있는 LeftMenu.js에 들어가서 favorite 탭을 만들어준다

기존에 있던 쓸데 없는 메뉴를 지우고 새로 작성한다

import React from 'react';
import { Menu } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

function LeftMenu(props) {
  return (
    <Menu mode={props.mode}>
      <Menu.Item key="mail">
        <a href="/">Home</a>
      </Menu.Item>
      <Menu.Item key="favorite">
        <a href="/favorite">Favorite</a>
      </Menu.Item>
    
  </Menu>
  )
}

export default LeftMenu

 

그런 다음 메인 화면을 보면 Favorite 탭이 생긴 것을 확인할 수 있다

눌러보면 아래와 같은 화면이 뜬다

로그인한 사람만 볼 수 있게 해놨으니까!

그래서 후다닥 회원가입했음

 

그 다음 FavoritePage을 꾸미자

간단한 표를 작성한다

일단 FavoritePage 폴더 안에 favorite.css 파일을 하나 생성한다

 

그리고 아래와 같이 작성한다

table{
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th{
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){
  background-color: #dddddd;
}

 

다시 FavoritePage.js로 돌아와서 아래와 같이 작성한다

import React from 'react'
import './favorite.css';

function FavoritePage() {
  return (
    <div style ={{width: '85%', margin: '3rem auto'}}>
      <h2> Favorite Movies </h2>
      <hr />

      <table>
        <thead>
          <tr>
            <th>Movie Title</th>
            <th>Movie Runtime</th>
            <td>Remove from Favorite</td>
          </tr>
        </thead>
      </table>
    </div>
  )
}

export default FavoritePage

 

저장하고 웹 페이지로 가보면

이렇게 떠있다

 

 

2. MongoDB에서 Favorite 영화 정보 가져오기

Favorite 영화 리스트를 알려면 mongoDB에서 영화 정보를 가져와야 한다

이 때 useEffect를 쓴다

 

<FavoritePage.js>

  useEffect(() => {

    Axios.post('/api/favorite/getFavoriteMovie', {userFrom: localStorage.getItem('userId')})
    .then(response => {
      if(response.data.success){}
      else{
        alert('영화 정보를 가져오는데 실패했습니다.')
      }
    })
  })

 

그 다음 server에 있는 favorite.js로 간다

연결해줘야지 ,,

router.post('/getFavoriteMovie', (req, res) => {

  Favorite.find({'userFrom': req.body.userFrom})
  .exec((err, favorites) => {
    if(err) return res.status(400).send(err)
    return res.status(200).json({success:true, favorites})
  })
})

 

그럼 영화 정보가 잘 가져와졌는지 console로 찍어보자

console.log(response.data)

를 useEffect 안에 넣어주고 콘솔창을 보면

 

없다

당연함 리스트에 암것도 추가 안함

 

그럼 아무 영화나 추가해보고 다시 들어가보자

미니언즈를 추가해 보았뜸

 

하나 추가 됨

잘 되네요

 

 

3. 가져온 정보를 화면에 보여주기

FavoritePage.js에서 데이터가 성공적으로 받아와졌을 경우 이것을 useState를 이용하여 저장한다

 

일단 useState를 이용하여 아래의 코드를 작성한다

const [Favorites, setFavorites] = useState([]) // array 형식으로 가져옴

 

useState를 이용했으므로 import도 해줘야함

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

 

그리고 Axios.post 안에 코드를 추가한다

  useEffect(() => {

    Axios.post('/api/favorite/getFavoriteMovie', {userFrom: localStorage.getItem('userId')})
    .then(response => {
      if(response.data.success){
        console.log(response.data)
        setFavorites(response.data.favorites)
      }
      else{
        alert('영화 정보를 가져오는데 실패했습니다.')
      }
    })
  })

 

그리고 가져온 정보를 화면에 띄워야하므로 표도 작성해준다

 

영화 정보들이 여러 개일 수도 있으므로 map형식으로 받는다

  return (
    <div style ={{width: '85%', margin: '3rem auto'}}>
      <h2> Favorite Movies </h2>
      <hr />

      <table>
        <thead>
          <tr>
            <th>Movie Title</th>
            <th>Movie Runtime</th>
            <td>Remove from Favorite</td>
          </tr>
        </thead>

        <tbody>
          {Favorites.map((favorite, index) => (
            <tr key={index}>
              <td>{favorite.movieTitle}</td>
              <td>{favorite.movieRunTime} mins</td>
              <td><button>Remove</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )

 

 

결과창

엥

엥 runtime이 안뜬다

 

그래서 Favorite.js에서 console.log(props.movieInfo)를 출력해보니

아래에서 9번째

movieRunTime이 아니라 runtime으로 돼있었다

 

그래서 Favorite.js에 있는 movieRunTime 코드를 수정해주었다

const movieRunTime = props.movieInfo.runtime // 원래는 props.movieInfo.MovieRunTime이었음 ㅜㅜ

수정하고 다시 해봤더니

 

결과창

휴

다시 runtime이 잘 떴다