[유튜브 클론코딩] 2.21 Home Controller

2.21 Home Controller

**userRouter랑 videoRouter에서 각각 users부분이랑 videos부분 지우고 userController랑 videoController에서도 users랑 videos 지운다. 당연히 users.pug랑 videos.pug도 지운다. (필요없어져서 지우는 거임)

 

db.js 만들기(진짜 데이터베이스 전에 임시로 만드는 파일)

이제 form 화면은 다 만들었고, 데이터베이스를 연동하기 전에 가짜로 전체 어플리케이션의 흐름을 만들어보겠다.

우선 home 화면을 보자. 여기에서 video 목록을 보여줘야 한다. 이것을 위해 (가짜 정보를 위한) db.js 파일을 하나 만든다. videos는 video의 배열이다.

 

export const videos = [

    {

        id: 324393,

        title: 'Video awesome',

        description: 'This is something I love',

        views: 24,

        videoFile: "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",

        creator: {

            id: 121212,

            name: "nyang",

            email: "zz@naver.com",

        }

    },

    {

        id: 3121213,

        title: 'Video super',

        description: 'This is something I love',

        views: 24,

        videoFile: "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",

        creator: {

            id: 121212,

            name: "nyangin",

            email: "zz@naver.com",

        }

    },

    {

        id: 9393921,

        title: 'Video nice',

        description: 'This is something I love',

        views: 24,

        videoFile: "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",

        creator: {

            id: 121212,

            name: "nyangin",

            email: "zz@naver.com",

        }

    },

    {

        id: 324393,

        title: 'Video perfect',

        description: 'This is something I love',

        views: 24,

        videoFile: "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4",

        creator: {

            id: 121212,

            name: "nyangin",

            email: "zz@naver.com",

        }

    }

]

↑ db.js

 

이렇게 가짜 데이터 파일을 만들었다. 다른 파일에서 사용할 수 있게 export도 해준다.

 

videoControllers.js에서 db.js 전달하기

이제, videoControllers의 home에서 video 목록을 받아서 render 함수에 전달한다.

videoControllers.js에서 db를 import한다. videos: videos << 이렇게 같으면 videos로 줄일 수 있다.

 

import {videos} from "../db"

export const home = (req, res) => {

    res.render("home", {pageTitle: "Home", videos});

};

↑ videoController.js

홈 화면에 접속하면 videos 데이터를 받아오겠다는 의미이다.

 

home.pug에서 값 불러오기

extends layouts/main

block content 

    .videos 

        each video in videos 

            h1=video.title

↑ home.pug

 

이렇게 작성한다. each video in videos << 이게 배열에서 하나씩 video를 처리하는 방법이다.

(pug에서 반복문을 쓰는 방법)

 

홈 화면에서 이렇게 잘 뜨는 것을 볼 수가 있다.

home controller에서 home 화면에 videos 배열을 전달한 것이다.

 

extends layouts/main

block content 

    .videos 

        each video in videos 

            h1=video.title

            p=item.description

↑ home.pug

이렇게까지 하면 description까지 나온다.