brunch

You can make anything
by writing

C.S.Lewis

by 이종복 May 26. 2019

home에 video 만들기(1)

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

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


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


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


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

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

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

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



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

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



4) videoControllers.js로 이동해서

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

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


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

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


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

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

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

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


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


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


매거진의 이전글 join, login, sociallogin 칸 만들기
작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari