Database에 들어가기전 back end에 data를 어떻게 보내는지 알아본다.
왜냐하면 back end에 data를 저장하는게 요점이기 때문이다.
지금 데이터를 받기만 하고 있다. 이걸 저장할수 있게 해본다.
videoRouter.js를 보면 하고 있는건 get 밖에 없다.
import express from "express";
import { see, edit, upload, deleteVideo } from "../controllers/videoController";
const videoRouter = express.Router();
videoRouter.get("/upload", upload);
videoRouter.get("/:id(\\d+)", see);
videoRouter.get("/:id(\\d+)/edit", edit);
videoRouter.get("/:id(\\d+)/delete", deleteVideo);
export default videoRouter;post 하는 법을 알아 보겠다.
먼저 array로 된 database를 가지고 시작해 보겠다.
videoController.js
let videos = [
{
title: "First Video",
rating: 5,
comments: 10,
createdAt: "2 hours ago ",
views: 100,
id: 1,
},
{
title: "Second Video",
rating: 3,
comments: 5,
createdAt: "25 minutes ago ",
views: 20,
id: 1,
},
{
title: "Third Video",
rating: 4,
comments: 8,
createdAt: "2 minutes ago ",
views: 80,
id: 1,
},
];
export const trending = (req, res) => {
return res.render("home", { pageTitle: "Home", videos });
};
export const see = (req, res) =>
res.render("watch", { pageTitle: "Watch Videos" });
export const edit = (req, res) =>
res.render("Edit", { pageTitle: "Edit Videos" });
export const search = (req, res) => res.send("Search");
export const upload = (req, res) => res.send("Upload");
export const deleteVideo = (req, res) => res.send("Delete Video");수정해 준다.
trending 안에 있는 array에 있는 비디오를 바꿔 준다.
trending 밖에다가 빼준다.
이제 비디오 array는 모든 controller에 사용 가능해 진다.
첫번째로 필요한건 array database에 있는 모든 비디오들을 나열하게 하는거다.
(이것은 이미 완료가 되었다.)
두번째 유저가 하나의 비디오를 볼 수 있게 한다.
그러기 위해 see controller를 바꿔줄 필요가 있다.
videoRouter.get("/:id(\\d+)", see);이 url이 영상을 하나 볼수 있게 작동해야 한다.
그리고 세번째 비디오를 업로드 할수 있어야 한다.
영상을 업로드 하고, 그 영상(게시물)을 어떻게 수정하는지 보여준다.
videoRouter.get("/:id(\\d+)/edit", edit);이것들을 전부 array datavbase에서 해준다.
그런 다음 실제 database에 적용해 본다.
시작하기 전에 videoController.js에서 id들을 값을 주겠다.
let videos = [
{
title: "First Video",
rating: 5,
comments: 10,
createdAt: "2 hours ago ",
views: 100,
id: 1,
},
{
title: "Second Video",
rating: 3,
comments: 5,
createdAt: "25 minutes ago ",
views: 20,
id: 2,
},
{
title: "Third Video",
rating: 4,
comments: 8,
createdAt: "2 minutes ago ",
views: 80,
id: 3,
},
];(나중에는 id를 database가 알아서 붙여준다.)
이제 홈페이지상 Title을 클릭 할수 있게 해준다.
클릭시 /video/id 넘버로 이동하도록 해준다.
지금 해야할 건 이것을 위한 html은 누가 만든건지 찾아야 한다.
그건은 바로 mixin이다.
video.pug파일에서 부터 정보가 넘어 오는거다.
title 부분을 수정해 본다.
div
h4
a(href="")=info.titletitle 안에 anchor을 넣고 anchor 안에 href를 쓴다.
그 값은 아직 모르기에 비워 놓는다.
그리고 info.title이라고 해준다.
새로고침 해보면 링크가 생겼지만 아직 url을 정하지 않았기에 이동하지는 않는다.
이제 각각의 href에 /videos/(id 넘버) 경로로 이동하게 해준다.
그리고 video 객체를 이 video mixin으로 보내고 있다.
mixin video(info)
+video(view)일단 info를 video로 수정해준다.
mixin video(video)
div
h4
a(href="/videos/")=video.title
ul
li #{video.rating}/5.
li #{video.comments} comments.
li Posted #{video.createdAt}.
li #{video.views} views.video 객체를 video mixin에 보내주고 있기 때문에
videoController.js로 가서 확인해 보면
각각 비디오에 id가 있는걸 확인 할수 있다.
url을 적어주는데 variable을 텍스트랑 같이 섞어서 써 준다.
a(href="/videos/#{video.id}")=video.title이제 새로고침을 해준 다음 title을 클릭해보면 에러가 난다.
주소창을 보면 http://localhost:4000/videos/#{video.id}
이런식으로 나오는걸 확인 할수 있다.
pug가 JavaScript를 실행하지 않았다.
코드를 작성한 대로 그대로 내보내 졌다.
원하던건 이렇게 아니였다.
video의 id 였다.
a(href="/videos/" + video.id)=video.title이렇게 수정해 볼수 있겠다.
새로고침 해보면 title클릭 시 id값으로 잘 넘어 간다.
첫번째 방법으로 이렇게 해볼수가 있다.
다른 방법으로는 JavaScript template string을 사용하는 거다.
a(href=`/videos/${video.id}`)=video.title이 방식으로 인해 pug에서는 attribute에는 사용 할수가 없다는걸 알게 되었다.
href , class , id 같은 경우이다.
그래서 방금 위해서 사용했던 두가지 방법으로 가능했던거다.
이번엔 see controller를 수정해 본다.
export const see = (req, res) => {
return res.render("watch", { pageTitle: "Watch Videos" });
};return을 해주고 render를 해준다.
url에 id를 가지고 있으니 req.params을 출력 할수 있다.
이제 새로고침을 해주면 id값이 나온걸 확인 할수 있다.
{ id: '1' }
GET /videos/1 304 11.174 ms - -
export const see = (req, res) => {
const id = req.params.id;
return res.render("watch", { pageTitle: "Watch Videos" });
};이렇게 해줄 수도 있다.
아니면 ES6를 이용하여
export const see = (req, res) => {
const { id } = req.params;
return res.render("watch", { pageTitle: "Watch Videos" });
};이렇게 작성 할수도 있다.
두가지다 결과 는 같다.
하지만 ES6로 사용하는게 보기에도 괜찮으니 ES6로 하자.
(현재 ES6에 대해서 잘 모르기에 대략적으로 internet 검색으로 기본적으로 어떤한 쓰임새로 쓰는지만 넘어가겠다.)
export const see = (req, res) => {
const { id } = req.params;
console.log("Show video", id);
return res.render("watch", { pageTitle: "Watch Videos" });
};잘 작동하는지 확인하기 위해서
console.log를 이용해서 확인해 본다.
Show video 1
GET /videos/1 304 122.968 ms - -새로고침 한 다음 터미널에 확인해 보면 작동이 잘 되는걸 확인 할수 있다.
/Users/j.mercury/Documents/wetube
그리고 또 다른 console.log 가 있는걸 확인 할수 있다.
server.js로 가서
const PORT = 4000;
console.log(process.cwd());
const app = express();
const logger = morgan("dev");지워 준다.
const PORT = 4000;
const app = express();
const logger = morgan("dev");그리고 새로고침을 해보면 해당 console.log는 더 이상 안 뜬다.
이제 video의 id를 얻었다.
video를 얻어 보겠다.
지금 하는건 가짜 database이다. 그냥 array일 뿐이다.
예를 들어서 id가 2인 비디오를 얻는다고 하자.
그럼 그 id를 이 비디오 array에서 찾는다.
let videos = [
{
title: "First Video",
rating: 5,
comments: 10,
createdAt: "2 hours ago ",
views: 100,
id: 1,
},
{
title: "Second Video",
rating: 3,
comments: 5,
createdAt: "25 minutes ago ",
views: 20,
id: 2,
},
{
title: "Third Video",
rating: 4,
comments: 8,
createdAt: "2 minutes ago ",
views: 80,
id: 3,
},
];이 해당 video array에서 찾게 된다.
그건 index를 사용해서 찾을수 있다.
그러니까 videos 대괄호 2라고 작성해 준다.
export const see = (req, res) => {
const { id } = req.params;
const video = videos[id-1]
return res.render("watch", { pageTitle: `Watching ${video.title}` });
};computer는 숫자를 0부터 세기 때문에
id-1이라고 적어준다.
req.params에서 id를 받았다.
이 id를 이용해서 비디오를 찾을 거다.
그 다음 watch라는 template을 render 해준다.
그리고 몇가지 variable들을 보낸다.
pageTitle이라는 variable을 보내준다.
왜냐하면 watch.pug를 살펴 보면 base.pug를 extend를 하고 있다.
base.pug를 보면 pageTitle이 필요하다.
그래서 pageTitle을 보내준다.
{ pageTitle: `Watching ${video.title}` }그래서 이런식으로 작성이 되었다.
새로고침 해서 확인해 본다.
title 부분이 watching ~ 으로 나오는 걸 알수 있다.
나중에 진짜 database로 교체해 준다.
