brunch

home에 video 만들기(1)

by 이종복

다음은 home 화면에서 video를 만드는 법에 대해서 배워보겠다.

아직 데이터베이스를 만들기 전이므로, 가짜 데이터를 만들어서 보여주겠다.


우선, 이번 글의 목표는 home에서 video의 제목을 띄우는 것이다.


1) 우선, 가짜 데이터를 위한 db.js를 하나 만든다.

hello132.png


2) const videos는 video들을 담기 위한 배열이다.

그리고 하나의 video를 만들어준다.

video는 id, title, description, views, videoFile, create와 같은 변수들을 포함한다.

이 데이터들은 아직 가짜 데이터임에 유의하자.

hello133.png



3) const videos 앞에 export를 추가해준다.

이는 videoController.js에서 videos를 import하기 위함이다.

hello144.png



4) videoControllers.js로 이동해서

import { videos } from "../db"를 추가해준다.

단, 아래의 videos는 중복되므로 제거해줘야 한다.

hello134.png
hello135.png
hello136.png


5) db.js에 새로운 video를 2개 추가해준다.

각각의 video의 id와 title을 수정한다.

hello140.png
hello141.png


7) 여러개의 video가 생겼으므로,

(1) videoControllers.js의 home 상수에 videos를 추가하고

(2) home.pug로 이동해서 코드를 다음과 같이 수정한다.

목표는 home에서 video의 제목을 나타내는 것이다.

hello145.png
hello142.png
hello146.png


8) 다음과 같이 3개의 Video 제목이 나타났다.

hello147.png


"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."


keyword
매거진의 이전글join, login, sociallogin 칸 만들기