# 6.0 - 6.4 Array Database

이원규·2022년 6월 9일
0

Itube

목록 보기
19/46
post-custom-banner

How to post videos in database

사용법:

가짜(?) array Database를 이용하여 database에 video를 post할 것임.
우선 다음과 같이 home컨트롤러의 video array를 밖으로 빼준다.

let videos = [
    {
        title:"First Video",
        rating:5,
        comment:2,
        createdAt:"2 minutes ago",
        views:59,
        id:1,
    },
    {
         title:"Second Video",
         rating:5,
         comment:2,
         createdAt:"2 minutes ago",
         views:59,
         id:2,
     },
     {
         title:"Third Video",
         rating:5,
         comment:2,
         createdAt:"2 minutes ago",
         views:59,
         id:3,
     },
     ];
export const trending = (req,res) => {
    return res.render("home",{pageTitle : "Home", videos});
}

-> video array를 이제 모든 컨트롤러(물론 비디오 컨틀롤러에서만)에서 쓸 수 있음.
-> 나중에는 진짜 database에서 하면 (id는) 내 database가 알아서 만들어 줄 것임.

조건 만들기:

  1. 모든 비디오를 나열해서 보여주고 싶음. -> home.pug에서 이미 나열함.
  2. 유저가 하나의 비디오를 보았으면 좋겠음
  3. 비디오 업로드 및 수정

시작하기:

(1,2 -> 조건 2 만족)

    1. 우선 home.pug에서 타이틀을 누르면 videos/id(각 비디오 id) 이런 식으로 url로 이동하고 싶음.
      -> mixin의 video.pug( -> home.pug를 구성하는 mixin임)로 ㄱ ㄱ한 뒤, 다음과 같이 url로 이동할 수 있도록 html수정. 
mixin video(video)
    div
        h4 
            a(href=`/videos/${video.id}`)=video.title
        ul 
            li #{video.rating}/5
            li #{video.comment} comments
            li Posted #{video.createdAt}
            li #{video.views} views
    1. 비디오 컨트롤러에서 see 컨트롤러로 온 뒤, 다음과 같이 수정하여 req.params를 알아낸다. req.params: req의 매개변수. 여기서 매개변수는 :id 이므로(<참고> 참조) 1에서 설정해준 매개변수(/:id)인 id를 반환함.(1번에서 id를 이용하여 url로 간다. -> 이 url로 보는 페이지는 see페이지임. 그리고 이 때 see의 req.params는 1번에서 url에 넣어주었던 id가 됨.(참고 코드 참조))

<다음>

export const see = (req,res) => {
    console.log(req.params);// {id: "1"}
    return res.render("watch",{pageTitle : "Watch"});
}

<참고> (비디오 루터의 see로 가는 코드)

videoRouter.get("/:id(\\d+)", see);

-> 이후 코드를 아래와 같이 수정한다.

export const see = (req,res) => {
    const id = req.params.id;// ES6를 이용한 방법: const {id} = req.params;
  	const video = videos[id-1];//videos 내에서 id를 이용해 video구하기.
    return res.render("watch",{pageTitle : `Watch ${video.title}`});
}

그럼 pageTitle이 각 해당 video의 title로 바뀔 것임 -> 이런 원리가 각각의 비디오를 하나씩 볼 수 있도록 해줌.

    1. 이 모든 비디오들을 우리의 템플릿(see router로)으로 보낼것임. = 각각의 비디오를 이제 url/id에 맞게 넣어줄 것임.
export const watch = (req,res) => {
    const id = req.params.id;
    const video = videos[id-1];
    return res.render("watch",{pageTitle : `Watching ${video.title}`,video});
} // video를 see url로 보내줌.

see컨트롤러의 이름을 watch로 바꾸고 위의 코드처럼 해준 뒤,

videoRouter에서도 import해주는 함수와 get해주는 callback 함수의 이름을 see-> watch로 바꿔준다.

import {watch, edit, upload, deleteVideo} from "../controllers/videoController";

videoRouter.get("/:id(\\d+)", watch);

그런 뒤, watch.pug로 가서 block을 바꿔준다.

block content 
    h3 #{video.views} #{video.views === 1 ? "view":"views"}

ternary operator

-> if문을 한 줄에 쓴것임!

예시):

#{video.views === 1 ? "view":"views"}

만약 video.views가 1이라면 "view"를 return하고, 아니라면 "views"를 return하라.

(비디오 수정하는 페이지를 만들것임 4)

    1. 비디오 수정 페이지 만들기.
      watch.pug에 만들어 줄 것임. -> 수정 페이지 링크로 들어가는 anchor를 만들어줌.
block content 
    h3 #{video.views} #{video.views === 1 ? "view":"views"}
    a(href=`${video.id}/edit`) Edit Video &rarr;

absolute/relative url

/를 붙일 경우(absolute url):

-> 내가 어디에 있든, root경로 + url
ex): a(href="/edit") Edit Video → -> http://localhost:4000/edit

/를 안 붙일 경우(relative url):

-> 내가 현재 있는 페이지의 마지막 /~~를 지우고 / 뒤를 채움
ex): http://localhost:4000/videos/1 -> http://localhost:4000/videos/edit

    1. 비디오 수정 페이지에 비디오 넣기

videocontroller의 edit 컨트롤러에서 다음과 params를 따와 id를 가져오고 이를 이용하여 비디오를 edit.pug에 전달해주기 -> 밑에와 같이 코드 수정하기.

export const edit = (req,res) => {
    const id = req.params.id;
    const video = videos[id-1];
    return res.render("edit",{pageTitle:`Editing: ${video.title}`,video});
}
    1. edit화면 만들기(edit.pug)
      edit.pug에서 해줌.
extends base.pug

block content 
    h4 Change Title of Video
    form(action="")
        input(placeholder="Video Title", value=video.title,required)
        input(type="submit",value="save")

-------여태까지는 back end로 비디오를 얻음-------

    1. back end로 video보내기!
      6번 form의 action은 우리가 적은 데이터가 어디로 갈지 정해주는 것임. 그리고 그 값은 내 서버가 가져야 할 url이 될 것임.(action: 해당 url로 이동함)

그런데 우리가 보내야 할 url이 현재 작업중인 url과 동일하기 때문에 action은 지워줄 것임. 그래도 한 가지 차이점은 바로 method임. 이전에는 get을 이용했지만 이번에는 POST를 이용할 것임.(즉 post는 back end로 데이터를 보내줌.) -> 같은 url에서 method만 바꿈.

method(#과 back-end사이의 정보 전송) get/post 차이

  • get: database에서 검색해서 데이터를 가져올 때, 데이터를 받는게 목적일 때.
  • post: database에 파일을 보내거나 삭제하거나 뭔가를 수정하여 보낼 때 사용, 로그인 할 때도 post사용

form이 POST할 수 있도록 다음과 같이 코드 수정

form(method="POST")
        input(name="title", placeholder="Video Title", value=video.title,required)
        input(type="submit",value="save")

하지만 우리 서버는 이 POST를 아직 이해 못하므로 이해하도록 해줘야 함.

  • videoRouter에 post router 생성해야 되는데 이 때, edit의 get router와 route가 같고 callback 함수가 다르므로 다음과 같이 써줄 수 있음.(postEdit callback함수는 아직 정의되지 않음.)
videoRouter.route("/:id(\\d+)/edit").get(getEdit).post(postEdit);

  • videocontroller에서 edit컨트롤러 이름을 getEdit으로 변경 -> 라우터에서도 getEdit으로 변경해줌.

  • callback함수가 없으므로 videocontroller에서 callback함수 생성. 이 때 return으로 edit.pug에서 수정한 것을 받아와야함.(form으로부터 정보를 받아와야함.)

const postEdit = (req,res) => {
  	const {id} = req.params
	return res.redirect(`/videos/${id}`); //redirect: 브라우저가 url로 자동으로 이동하도록 하는 것임.
}

form으로부터 정보를 얻어오기

-> req.body를 사용할 것임(input에 name이 반드시 필요함!). 이를 사용하기 위해서는 express가 폼을 다룰 수 있도록 해줘야함. 그러기 위해서는 우리는 express fn의 method를 사용할 것임. -> express.urlencoded 사용!
urlencode 사용법

  • express.urlencoded 역할: form의 body를 이해할 것임. 이 urlencode에서 우리가 사용할 것은 extend인데, 이것은 body에 있는 정보들을 보기 좋게 형식을 갖춰주는 일을 함. 이 녀석이 form의 데이터를 줄 것임(JS object 형식으로).

express.urlencoded 설치

  • server.js로 ㄱ ㄱ. 우리는 해당 route로 가기 전에 이 middleware를 사용해야함. 그래야 그 middleware가 form을 이해하고, 그것들을 JS로 변형시켜줘서 우리가 사용할 수 있도록 만들기 때문임.즉, req.body를 생성해줌 -> 각 라우터가 정의되기 전에 urlencoded설치 ㄱ ㄱ
app.use(express.urlencoded({extende:true}));

app.use("/",globalRouter);
app.use("/videos",videoRouter);
app.use("/users",userRouter);

여기서 중요한 점! Edit할 것을 적는 input에다가 name을 주지 않으면 req.body가 return되지 않으므로 name을 반드시 줘야함 ! input name = "title"로 줬음 아까.

-> 이제 form으로부터 정보를 받아올 수 있으므로 postEdit에 return값을 줄 수 있음. 

export const postEdit = (req, res) => {
    const {id} = req.params;
	const {title} = req.body;
    return res.redirect(`/videos/${id}`);
}

비디오를 수정할 준비가 완료됨. 하지만 가짜 database를 사용해서 내용을 변경할 수는 있지만 실전에선 쓰지 않음. 그래도 바꾸고 싶다면 다음 코드를 추가해주셈. 

videos[id-1].title = title;

-> 실제 database는 videos array가 아닌데서 불러오는 것이라 나중에 이 코드만 수정해주면 됨.

const video = videos[id-1];

-> 실제 database는 mongoDB와 mongoose(mongoDB와 JS를 상호작용 하도록 도와줌)를 이용할 것임.
-----end!-----

profile
이원규
github: https://github.com/WKlee0607
이전 포스트

#5.9 Mixins

post-custom-banner

0개의 댓글