📝 오늘 한 것

1. mongoose로 CRUD operation 구현하기 - search video / upload video

2. schema / model / mongoose queries / mongoose validation

📚 배운 것

1. CRUD

CRUD란 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete)를 말한다.
지금부터 video(데이터)를 CRUD 하기 위해 video 모델을 만들고자 한다.

1) 모델(Model)

Mongoose로 데이터 CRUD를 구현하기 위해서는 Mongoose에 애플리케이션의 데이터들이 어떻게 생겼는지(모델) 알려줘야 한다.

ex) '비디오에는 제목이 있는데 그 제목은 문자열이고, 조회수가 있는데 그건 숫자야.'

(1) 스키마 및 모델 생성하기

• src 폴더 안에 models 폴더를 만든 후 그 안에 Video.js 파일을 만든다.
  Video.js 파일에서 mongoose를 import 한 후 videoSchema를 만든다.

💡 Schema(스키마)

모델을 생성하기 전에 데이터의 형식과 형태를 정의해놓은 것을 말한다.
mongoose.Schema({}) 안에 정의해준다.

// Video.js
import mongoose from "mongoose";

const videoSchema = new mongoose.Schema({
  title: String, // String === { type: String }
  description: String,
  createdAt: Date,
  hashtags: [{ type: String }],
});

• videoSchema를 이용해 Video 모델을 생성한 후 이를 export default 한다.

💡 Model(모델)

스키마를 통해 만드는 인스턴스를 말한다.
이를 이용해 실제 데이터베이스에 CRUD 작업을 할 수 있다.
mongoose.model("모델 이름", 스키마 이름); 을 통해 만든다.

// Video.js
const Video = mongoose.model("Video", videoSchema);
export default Video;

• Video 모델을 모두가 사용할 수 있도록 Video.js 파일을 import 해야 한다.
  server.js 파일에서 db.js 파일을 import 하는 코드 바로 뒤에 Video.js 파일을 import 하는 코드를 작성할 수도 있다.
  그러나, import 코드가 점점 많아질 것이므로 이를 분리해서 한꺼번에 모아둘 파일을 따로 만드는 게 좋다.

🔎 server.js와 init.js 분리

① src 폴더 안에 모든 것을 초기화해주는 init.js 파일을 만든다.
init.js 파일이 데이터베이스와 모델들을 import 한 후 최종적으로 애플리케이션(app)을 실행하도록 server.js 파일로부터 관련 코드들을 가져온다.
한편, init.js 파일에는 app에 대한 정보가 없기 때문에 server.js 파일에서 app을 만들고 export default 한 후, 이를 init.js 파일에서 import 해줘야 한다.

// server.js → express와 app을 구성한다
import express from "express";
import morgan from "morgan";
import globalRouter from "./routers/globalRouter";
import userRouter from "./routers/userRouter";
import videoRouter from "./routers/videoRouter";

const PORT = 4000;

const app = express();
const logger = morgan("dev");

app.set("view engine", "pug");
app.set("views", process.cwd() + "/src/views");
app.use(logger);
app.use(express.urlencoded({ extended: true }));
app.use("/", globalRouter);
app.use("/users", userRouter);
app.use("/videos", videoRouter);

export default app; // 추가 ❗

// init.js → database와 models를 import 한 후, 이상이 없다면 app을 실행시킨다
import "./db";
import "./models/Video";
import app from "./server";

const PORT = 4000;

const handleListening = () =>
  console.log(`Server listening on port http://localhost:${PORT} 🎈`);

app.listen(PORT, handleListening);

② 이제 server.js 파일은 app을 구성만 할 뿐 실행할 순 없어서 기존 코드로는 nodemon이 실행되지 않을 것이다.
문제를 해결하기 위해 package.json 파일에서 dev script의 src/server.js를 src/init.js로 수정한다.

// package.json
"scripts": {
  "dev": "nodemon -L --exec babel-node src/init.js"
},

2) 모델 사용하기 - search video

• 먼저, videoController.js 파일에서 미리 만들어둔 가짜 데이터베이스 관련 코드들을 전부 삭제했다.

• video 모델을 사용하기 위해 videoController.js에 video 모델을 import 한다.

// videoController.js
import Video from "../models/Video";

• home 컨트롤러(trending 컨트롤러의 이름을 수정함)에서 Mongoose Queries를 이용해 video 모델을 사용할 수 있다.

💡 Mongoose Queries

Mongoose Queries 참고

콜백 함수 혹은 Promise를 이용해 mongoose query object를 반환한다.

여기서는 Model.find()라는 Mongoose Query를 예로 설명해보겠다.

🔎 콜백 함수 이용

Model.find({}, 콜백 함수);

{}란 search terms(검색 조건)를 말한다. 비어 있으면 모든 형식을 찾고 있음을 뜻한다.
콜백 함수는 error와 docs를 가진다. 이 경우에 docs 대신에 videos라고 쓸 수 있다.

Video.find({}, (error, videos) => {} );

mongoose가 모든 형식의 Video를 데이터베이스에서 불러오고 database가 반응하면, mongoose는 콜백 함수를 실행시킨다.
코드를 완성하면 다음과 같다.

// videoController.js
import Video from "../models/Video";

const handleSearch = (error, videos) => {
  console.log("error", error);
  console.log("videos", videos);
}

export const home = (req, res) => {
  Video.find({}, handleSearch);
  return res.render("home", { pageTitle: "Home", videos: [] });
}

이제 localhost:4000에 들어가면, console 창에는 다음과 같은 내용이 출력된다.
데이터베이스가 video를 찾을 때 에러는 없었고 video(즉, 데이터)도 없었다는 뜻이다.
아직 데이터가 없어서 가져온 건 없지만, 어쨌든 자바스크립트 코드를 이용해 데이터베이스와 통신에 성공한 것이다.

error null
videos []

여기서 잠깐 !
콜백 함수에 대해 알아보기 위해 operation(Video.find()) 다음에 console.log()를 추가해봤다.

export const home = (req, res) => {
  Video.find({}, handleSearch);
  console.log("Hello"); // 추가 ❗
  return res.render("home", { pageTitle: "Home", videos: [] });
};

그런데 이처럼 코드는 [ operation, Hello, res.render ] 순으로 작성했는데
console 창에는 [ Hello, res.render, operation ] 순으로 찍힌 것을 확인할 수 있다.

Server listening on port http://localhost:4000 🎈
⭕ Connected to DB
Hello
GET / 304 79.991 ms - -
error null
videos []

즉, 주소 창에 localhost:4000을 입력해 브라우저가 home 페이지를 request 하면 console.log("Hello") 가 실행된다.
request가 완성되어 response를 받으면(즉, home 템플릿이 render 되면) Morgan middleware에 의해 logger가 출력된다.
그 후 데이터베이스와 통신한 결과인 error와 videos가 출력된다.

이는 데이터를 전송받을 때까지 시간이 걸리기 때문이다. handleSearch 콜백 함수는 데이터가 완전히 전송되면 그제서야 실행된다.

이 점을 응용해 home 컨트롤러를 다음과 같이 수정할 수 있다.
데이터를 가져오는 데 성공한 경우와 에러가 뜬 경우를 모두 고려해 코드를 작성한다.

// videoController.js (콜백 함수 이용 - 최종)
import Video from "../models/Video";

export const home = (req, res) => {
  Video.find({}, (error, videos) => {
    if(error) {
      return res.render("server-error");
    }
    return res.render("home", { pageTitle: "Home", videos });
  });
};

이제 home.pug 파일 안의 변수 videos에는, 데이터베이스로부터 전송받은 videos가 할당된다.
브라우저는 해당 작업이 끝날 때까지 기다려준다.
즉, 데이터베이스 search가 끝나야만 render가 시작된다.

확인을 위해 아래처럼 코드를 작성하면
코드를 작성한 순서대로 즉, [ search start, search finished, logger ] 순으로 출력되는 것을 확인할 수 있다.
단, 코드에 따라 실행 속도에 차이가 있을 수는 있다.

// videoController.js (콜백 함수 이용 - 확인용)
export const home = (req, res) => {
  console.log("search start"); // 확인을 위해 추가
  Video.find({}, (error, videos) => {
    console.log("search finished"); // 확인을 위해 추가
    return res.render("home", { pageTitle: "Home", videos });
  });
};

🔎 promise 이용

그러나, video 모델을 사용할 때 콜백 함수를 이용하면, 함수 안에 또 다른 함수를 넣어야 해서 번거롭다.
이 문제를 해결하기 위해 콜백 함수 대신 promise를 이용할 수 있다.

// videoController.js (promise 이용 - 확인용)
export const home = async (req, res) => {
  console.log("search start");
  const videos = await Video.find({});
  console.log("search finished");
  console.log(videos);
  return res.render("home", { pageTitle: "Home", videos });
}

Server listening on port http://localhost:4000 🎈
⭕ Connected to DB
search start
search finished
[]
GET / 304 87.183 ms - -

코드를 작성한 순서대로 즉, [ search start, search finished, videos, logger ] 순으로 출력되는 것을 확인할 수 있다.
Video.find() 앞에 await을 적어주면, find()는 인수로 콜백 함수가 들어오지 않으리란 걸 알고 찾아낸 video를 바로 출력해준다.

await은 데이터베이스로부터 결과 값을 받을 때까지 기다려준다.

한편, 콜백 함수를 사용하면 추가 코드 없이 바로 에러를 가져와 출력할 수 있지만, promise를 사용하면 에러를 다루기 위해 try catch 문을 이용해야 한다.
※ catch(error) { }를 통해 error 메시지를 가져올 수도 있지만 여기서는 가져오지 않았다.

// videoController.js (promise 이용 - 최종)
import Video from "../models/Video";

export const home = async (req, res) => {
  try {
    const videos = await Video.find({});
    return res.render("home", { pageTitle: "Home", videos });
  } catch {
    return res.render("server-error");
  }
};

📌 promise는 콜백 함수에 비해 훨씬 직관적이라는 장점이 있다.
📌 콜백 함수도 실행은 기다렸다가 되지만, 자바스크립트는 이 줄 저 줄을 왔다갔다하면서 코드를 실행한다.
📌 반면, promise를 사용하면 await이 있는 부분에서 자바스크립트는 계속 기다렸다가 기다림이 끝나면 순서대로 코드를 실행한다.

여기서 잠깐 !
return과 res.render에 대하여

export const home = (req, res) => {
  Video.find({}, (error, videos) => {
    return res.render("home", { pageTitle: "Home", videos });
  });
};

res.render() 앞의 return은, 함수 안의 또 다른 함수 안에 위치해 있기 때문에 아무런 기능도 하지 않는다.
그럼에도 res.render() 앞에 return을 써주는 이유는, res.render() 함수가 실행된 후에 Video.find()의 콜백 함수가 종료되도록 하기 위함이다.

return이 중요한 게 아니라 응답하기 위해 실행되는 함수가 중요한 것이다.
응답한 후에 또 다시 응답할 수 없다.

예를 들어, res.render() 이후에 res.end() 등을 할 수 없다.
아래와 같이 서버가 응답하는 코드를 하나 더 추가해보자.

export const home = (req, res) => {
  Video.find({}, (error, videos) => {
    return res.render("home", { pageTitle: "Home", videos });
  });
  return res.end();
};

이처럼 작성한 후 localhost:4000으로 들어가면, 흰색 빈 페이지가 뜬다.
앞에서 video를 찾기까지(데이터를 전송받기까지) 시간이 걸리므로 뒤의 코드인 res.end()가 Video.find()의 콜백 함수보다 먼저 실행된다.
비디오 찾기가 끝난 후 콜백 함수를 실행하려고 하면 이미 한번 응답을 했으므로 다시 새로운 응답인 res.render()을 실행할 수 없게 되는 것이다.

3) upload video

(1) video 데이터 생성 후 데이터베이스에 저장하기

사용자는 video를 upload 할 때 video의 title, description, hashtags를 작성해야 한다. (meta 데이터는 자동으로 주어진다.)

• 미리 만들어둔 videoSchema에 따라 사용자가 데이터를 서버로 보낼 수 있도록 upload.pug 파일의 from 태그를 수정한다.

//- upload.pug

form(method="POST")
  input(name="title", placeholder="Title", required)
  input(name="description", placeholder="Description", required) //- 추가 ❗
  input(name="hashtags", placeholder="Hashtags, separated by comma", required) //- 추가 ❗
  input(value="save", type="submit")

• video를 업로드하기 위해서는(만들기 위해서는) document(JavaScript Object)를 만들어야 한다.
  여기서 document란 Video 모델을 이용해 만든, 데이터를 가진 video 인스턴스를 말한다.
  video 인스턴스는 사용자가 form에 입력한 데이터(req.body)를 바탕으로, 미리 만들어둔 videoSchema와 같은 형태를 가지도록 만들어져야 한다.

// Video.js (참고용으로 적어놓음)
import mongoose from "mongoose";

const videoSchema = new mongoose.Schema({
  title: String,
  description: String,
  createdAt: Date,
  hashtags: [{ type: String }],
  mata: {
    views: Number,
    rating: Number,
  },
});

const Video = mongoose.model("Video", videoSchema);
export default Video;

// videoController.js (수정)
import Video from "../models/Video";

export const postUpload = (req, res) => {
  const { title, description, hashtags } = req.body;
  const video = new Video({
    title,
    description,
    createdAt: Date.now(),
    hashtags: hashtags.split(",").map(word => `#${word}`);
    meta: {
      views: 0,
      rating: 0,
    },
  });
  console.log(video); // 생성한 video 인스턴스를 console 창에 출력
  return res.redirect("/");
}

video를 만들었다 ! (아직 데이터를 저장하지는 않은 상태)
console 창에는 다음과 같은 결과가 출력된다.

{
  title: 'video 1',
  description: 'first video',
  createdAt: 2021-11-26T09:24:15.248Z,
  hashtags: [ '#wow', '#amazing', '#boom' ],
  mata: { views: 0, rating: 0 },
  _id: new ObjectId("61a0a7bf1c1dbbe8315b6cdf")
}

※ id는 mongoose가 video document에 자동으로 부여해준 고유 식별 번호이다.

• 이제 video를 데이터베이스에 저장해야 한다.
  아직까지 데이터는 자바스크립트 세계에만 존재할 뿐 database에는 존재하지 않는다.
  Video.save()를 이용해 데이터베이스에 저장한다.

// videoController.js
import Video from "../models/Video";

export const postUpload = async (req, res) => { // 수정 ❗
  const { title, description, hashtags } = req.body;
  const video = new Video({
    title,
    description,
    createdAt: Date.now(),
    hashtags: hashtags.split(",").map(word => `#${word}`);
    meta: {
      views: 0,
      rating: 0,
    },
  });
  await video.save(); // 추가 ❗
  return res.redirect("/");
}

데이터를 데이터베이스에 전송하는 데는 시간이 걸리기 때문에 async & await을 써줘야 한다.
이에 따라 자바스크립트는 video.save()에 의해 데이터가 데이터베이스에 저장되기를 기다린다.
cf. video.save()는 데이터베이스에 저장된 video document를 return 한다.

이제 localhost:4000으로 들어가서 upload video를 클릭해 form을 작성한 후 save 버튼을 누르면
(데이터베이스에 video 데이터가 저장된 후) home으로 redirect 되는데
(home 컨트롤러에 의해) 이때 home에는 데이터베이스에 저장된 video 데이터가 표시된다.

데이터베이스에 video 데이터가 저장되었다! ( 즉, video가 upload 되었다! )

💡 MongoDB shell에서 데이터베이스 확인하기

show dbs → wetube 데이터베이스가 생성된 것을 확인할 수 있다.
admin   0.000GB
config  0.000GB
local   0.000GB
wetube  0.000GB

use wetube → wetube 데이터베이스로 이동한다
switched to db wetube

show collections → documents 묶음을 보여준다.
videos → 지금은 document 종류가 video밖에 없다.

help를 입력하면 여러 명령어들이 안내되어 데이터베이스 안을 살펴볼 수 있다.

ex)
db.mycoll.find() → 해당 collection 안의 object들을 확인할 수 있다.

db.videos.find()
{ "_id" : ObjectId("61a0b09e66a8f06d2a0ad89b"), "title" : "video 1", "description" : "first video", "createdAt" : ISODate("2021-11-26T10:02:06.719Z"), "hashtags" : [ "#wow", "#first", "#video" ], "mata" : { "views" : 0, "rating" : 0 }, "__v" : 0 }

💡 한편, 데이터를 만들고 저장하는 데 Video.create({ }) 를 사용할 수 있다.

// videoController.js
import Video from "../models/Video";

export const postUpload = async (req, res) => {
  const { title, description, hashtags } = req.body;
  await Video.create({ // 수정 ❗
    title,
    description,
    createdAt: Date.now(),
    hashtags: hashtags.split(",").map(word => `#${word}`);
    meta: {
      views: 0,
      rating: 0,
    },
  });
  return res.redirect("/");
}

(2) Mongoose Validation (Mongoose 유효성 검사)

Mongoose는 미리 알려준 데이터 타입을 바탕으로 데이터 타입의 유효성 검사를 도와준다.

• 스키마에 정의된 데이터 타입과 실제 데이터의 데이터 타입이 다르면, 에러가 발생한다.

  ex. postUpload 컨트롤러에서 createdAt의 속성 값으로 문자열을 적어주면, console 창에 해당 에러가 찍히면서 브라우저가 '무한 로딩'을 한다.
  → await으로 인해 데이터 생성 및 저장이 끝난 후에야 res.redirect() 즉, 응답을 할 수 있는데 데이터 생성 자체가 되지 않기 때문에 자바스크립트는 다음 단계로 넘어가지 않으므로 브라우저가 무한 로딩하게 되는 것이다.

• 스키마에 정의된 데이터의 구성 요소가 실제 데이터 구성 시 누락되면, 에러가 발생한다.

  그러나, 지금의 경우에는 postUpload 컨트롤러에서 새로운 video를 생성할 때 createdAt의 값이 누락되었더라도 에러는 발생하지 않는다. 이는 videoSchema에서 createdAt이 필수 요소(required)가 아니기 때문이다.
  따라서, Video.js 파일에서 videoSchema를 수정해 createAt을 필수 요소로 설정해주어야 한다.

// Video.js
import mongoose from "mongoose";

const videoSchema = new mongoose.Schema({
  title: String,
  description: String,
  createdAt: { type: Date, required: true }, // 수정 ❗
  hashtags: [{ type: String }],
  mata: {
    views: Number,
    rating: Number,
  },
});

const Video = mongoose.model("Video", videoSchema);
export default Video;

이제 postUpload 컨트롤러에서 새로운 video를 생성할 때 createdAt의 값이 누락되면, console 창에 해당 에러가 찍히면서 역시 브라우저가 무한 로딩을 하게 된다.

---

• 이를 해결하기 위해 try catch 구문을 추가하여 에러 발생 시 사용자에게 직접 에러 내용을 보여주고자 한다.

//- upload.pug 수정

block content
  if errorMessage
    span=errorMessage

// videoController.js 수정
try {
  await Video.create({
    title,
    description,
    createdAt: Date.now(),
    hashtags: hashtags.split(",").map(word => `#${word}`);
    meta: {
    views: 0,
    rating: 0,
  },
});
  return res.redirect("/");
} catch(error) { // 에러 발견 시
  return res.render("upload", { pageTitle: "Upload Video", errorMessage: error._message });
  // upload 하는 페이지를 보여주면서 사용자에게 에러 메시지를 함께 보여준다.
  // error._message는 콘솔 창에 뜬 error를 참고해 작성한 것
}

---

• 한편, videoController.js 파일에서 video를 생성할 때 반복을 줄이기 위해 애초에 videoSchema에 default 값을 설정할 수 있다.
  (default 값을 설정하면 에러가 뜰 일이 없으니 required는 조금 쓸모없어지지만 그래도 적어주었다.)

// Video.js
const videoSchema = new mongoose.Schema({
  title: String,
  description: String,
  createAt: { type: Date, required: true, default: Date.now }, // 수정 ❗
  // 이때 Date.now() 라고 작성하면 함수를 당장 실행시킨다. Date.now 라고 작성해야 한다.
  hashtags: [{ type: String }],
  mata: { // 수정 ❗
    views: { type: Number, required: true, default: 0 },
    rating: { type: Number, required: true, default: 0 },
  },
});

이제 이렇게 설정해놓으면 video 데이터를 만들 때 createdAt과 meta 데이터를 굳이 적어주지 않아도 에러가 뜨지 않는다!

---

• 최종 Video.js 파일 & videoController.js 파일의 postUpload 컨트롤러

// Video.js
import mongoose from "mongoose";

const videoSchema = new mongoose.Schema({
  title: { type: String, required: true },
  description: { type: String, required: true },
  createdAt: { type: Date, required: true, default: Date.now },
  hashtags: [{ type: String }],
  mata: {
    views: { type: Number, required: true, default: 0 },
    rating: { type: Number, required: true, default: 0 },
  },
});

const Video = mongoose.model("Video", videoSchema);
export default Video;

// videoController.js
export const postUpload = async (req, res) => {
  const { title, description, hashtags } = req.body;
  try {
    await Video.create({
      title,
      description,
      hashtags: hashtags.split(",").map((word) => `#${word}`),
    });
  } catch (error) {
    return res.render("upload", {
      pageTitle: "Upload Video",
      errorMessage: error._message,
    });
  }
  return res.redirect("/");
};

(3) 그 외 스키마(Schema)의 다양한 옵션들

Mongoose - SchemaTypes 참고

// Video.js
const videoSchema = new mongoose.Schema({
  title: { type: String, required: true, trim: true, maxLength: 80 },
  description: { type: String, required: true, trim: true, minLength: 20 },
  createdAt: { type: Date, required: true, default: Date.now },
  hashtags: [{ type: String, trim: true }],
  mata: {
    views: { type: Number, required: true, default: 0 },
    rating: { type: Number, required: true, default: 0 },
  },
});

• trim

  텍스트 양 옆의 space를 삭제해준다.

• maxLength, minLength

  최대, 최소 글자 수는 form의 input 속성으로도 설정할 수 있지만, 이는 페이지의 HTML 코드를 통해 쉽게 변경이 가능하므로 시스템적 보호를 위해 데이터베이스에도 똑같이 설정해줘야 한다.

(4) Home의 video 관련 코드 수정 및 에러 해결

• video.pug 파일에서 video mixin을 수정했다.
  이제 Home에서는 upload 된 video들의 title, description, createdAt 정보만을 볼 수 있다.

//- video.pug

mixin video(video)
  div 
    h4
      a(href=`/videos/${video.id}`)=video.title
    p=video.description
    small=video.createdAt
    hr

---

• Home에 나열된 video의 title을 클릭하면, 화면에 Cannot GET ~~~ 이 뜬다.

에러 원인

upload 된 video의 title을 클릭해 들어간 페이지의 url을 살펴보면
videos/ 뒤에 오는 id 파라미터에 숫자와 문자가 섞여있는 것을 확인할 수 있다.
그러나 videoRouter.js 파일에 따르면 id 파라미터가 숫자일 경우에만 watch 컨트롤러가 실행되므로 페이지를 가져올 수 없어 에러가 뜬 것이다.

에러 해결 방법 1

id 파라미터에 숫자만 올 수 있도록 추가해준 정규표현식(\\d+)을 삭제한다.
다만, 이렇게 수정하면 /upload에서 upload도 id 파라미터로 인식되는 에러가 발생하기 때문에 /upload 페이지를 얻는 코드를 /:id 페이지를 얻는 코드보다 위쪽에 작성해야 한다.

// VideoRouter.js
videoRouter.route("/upload").get(getUpload).post(postUpload);
videoRouter.get("/:id", watch);
videoRouter.route("/:id/edit").get(getEdit).post(postEdit);

에러 해결 방법 2

MongoDB documentation에서 id에 대해 조사해 이를 참고하여 정규표현식을 만든다.

MongoDB가 제공하는 id는 24바이트 16진수 문자열로 이루어져 있다.
16진수 문자열이란 0부터 9까지의 10개의 숫자와 A부터 F까지의 6개의 문자로 이루어진 문자열을 말한다.

이를 정규표현식을 이용해 나타내면 [0-9a-f]{24}이 된다.
이는 0부터 9 그리고 a부터 f까지의 24자짜리 문자열을 의미한다.

이를 id 파라미터 뒤에 추가해야 한다.

// videoRouter.js
videoRouter.get("/:id([0-9a-f]{24})", watch);
videoRouter.route("/:id([0-9a-f]{24})/edit").get(getEdit).post(postEdit);
videoRouter.route("/upload").get(getUpload).post(postUpload);

---

• 그러나 이렇게 작성하면 Home에서 video의 title을 클릭했을 때, watch 컨트롤러가 작동은 하지만, video.pug 파일의 video 변수가 undefined라서 에러가 발생한다.

  이를 해결하기 위해 videoController.js 파일의 watch 컨트롤러에서 데이터베이스로부터 video 데이터를 받아와 이를 watch.pug 파일로 렌더링 해야 한다.

Model.findOne()
입력한 모든 조건을 만족하는 데이터를 찾아준다.

Model.findById()
해당 id를 가지는 데이터를 찾아준다.

// videoController.js
export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id);
  // const video = await Video.findById(id).exec();
  // .exec()을 뒤에 덧붙이면, mongoose 내부적으로 promise를 return 한다
  // 여기서는 async & await을 사용했으므로 안 써줘도 된다.
  return res.render("watch", { pageTitle: video.title, video });
};

이걸로 user는 Home에서 모든 video들을 볼 수 있게 되었고, 각각의 video의 상세 페이지에도 접속할 수 있게 되었다.

---

• 사용자가 존재하지 않는 24바이트 16진수 문자열 id를 입력해 video 페이지를 방문하면 에러가 발생하면서 브라우저는 무한 로딩하게 된다.

  이를 해결하기 위해 위와 같은 에러 발생 시 404 페이지를 렌더링하도록 한다.
  views 폴더 안에 404.pug 파일을 만든 후 base.pug 파일을 extends 한다.

// videoController.js
export const watch = async (req, res) => {
  const { id } = req.params;
  const video = await Video.findById(id);
  if (video) {
    return res.render("watch", { pageTitle: video.title, video });
  }
  return res.render("404", { pageTitle: "Video not found" }); // 에러
};

+base.pug 파일에 Home으로 가는 링크를 추가했다.

✨ 내일 할 것

1. 강의 계속 듣기