📝 오늘 한 것

1. 복습 - node.js / express / routers / templates / MongoDB와 Mongoose / CRUD

📚 배운 것

user 파트 들어가기 전에 여태까지 배운 내용(node.js ~ video 파트) 다시 복습함
헷갈리거나 다시 봤으면 좋을 것 같은 부분은 상세하게, 나머지 부분은 전체 흐름을 익히기 위해 간략하게 정리하는 식으로 작성함

1. node.js

• git init / npm init

• 터미널에서 package.json 파일이 들어 있는 폴더로 간 후 npm i express을 입력한다.

• npm i (package.json 파일 반드시 저장 후 닫고)

• babel / nodemon 설치 [TIL] 211113 참고

2. express

1) 서버 만들기

• express import
• app 만들기
• 서버 열기

import express from "express";

const PORT = 4000;

const app = express();

const handleListening = () => console.log("서버가 열렸다");

app.listin(PORT, handleListening);

2) GET request & response

'app 만들기'와 '서버 열기' 사이에 위치한다.
app을 만든 후 '준비가 완료되면' 서버를 여는 것이다.

app.get("route", handler 함수);

3) 미들웨어(middleware)

(1) next()

request와 response 사이에서 request를 지속시키는 함수이다.
express가 request를 확인하면 순서대로 handler 함수를 호출하는데
본문에 next()가 있으면 그 함수는 handler이자 middleware이다.

const middleware = (req, res, next) => {
  console.log("이건 미들웨어다");
  next();
};

const handleHome  = (req, res, next) => {
  return res.end();
};

app.get("route", middleare, handleHome);

(2) app.use()

global middleware를 만들어준다.
app.use()는 app.get()보다 이전에 위치해야 한다.

const middleware = (req, res, next) => {
  console.log("이건 모든 요청에 대해 서버가 응답하기 전에 실행되는 글로벌 미들웨어다");
  next();
};

const handleHome = (req, res, next) => {
  return res.end();
};

app.use(globalMiddleware);
app.get("/", handleHome);

(3) protectionMiddleware

보호된 페이지에 접근할 수 없게끔 해준다.

const privateMiddleware = (req, res, next) => {
  const url = req.url;
  if (url === '/protected') {
    return res.send("<h1>보호된 페이지라 접근할 수 없음.</h1>");
  }
  next();
};

const handleProtected = (req, res, next) => {
  return res.send("여기는 보호된 페이지 입니다. 환영합니다.");
};

app.use(privateMiddleware);
app.get("/protected", handleProtected);

(4) morgan 미들웨어

콘솔 창에 logger를 보여줌

import morgan from "morgan"; // morgan import

const logger = morgan("dev"); // 설정이 "dev"인 morgan 미들웨어를 return 함

app.use(logger); // 글로벌 미들웨어로 사용 설정

3. 라우터(routers)

router는 url을 그룹화 한다.

1) 어떤 종류의 데이터를 사용할 것인가

이를 기준으로 도메인을 생각해본다.

globalRouter /으로 시작
videoRouter /videos로 시작
userRouter /users로 시작

2) routers & conrollters 생성 및 사용

일단은 server.js 파일에 만들었다.
(아래 route들은 일부분일 뿐, 전부가 아님)

import express from "express";

// (중략)

// 라우터 만들기
const globalRouter = express.Router();
const videoRouter = express.Router();
const userRouter = express.Router();

// 라우터 사용하기
app.use("/", globalRouter);
app.use("/videos", videoRouter);
app.use("/users", userRouter);

// 페이지 만들기
globalRouter.get("/", home);
globalRouter.get("/join", join);
globalRouter.get("/login" login);
globalRouter.get("/search", search);

videoRouter.get("/:id", watch);
videoRouter.get("/id/edit", edit);
videoRotuer.get("/:id/upload", upload);
videoRotuer.get("/:id/delete", deleteVideo);

userRouter.get("/:id", edit);
userRouter.get("/:id/delete", deleteUser);

// 컨트롤러 만들기
const home = (req, res) => {
  return res.send("Home");
}
// ( ...이하 생략 )

3) 모듈화

routers 폴더와 controllers 폴더를 만들어 각 파일에 라우터와 컨트롤러를 나눠준다.
라우터와 컨트롤러를 export (default) & import 한다.
+express도 각 파일마다 import 해줘야 한다.

4) url 파라미터

url 파라미터를 이용해 url에 변수를 사용할 수 있다.

req.params: { 파라미터 이름: "파라미터 값" }

req.params는 url 파라미터 이름과 그 값을 담은 object이다.

// videoRouter.js
videoRouter("/:id([0-9a-f]{24})", watch);

videoRouter.js 파일에서 url 파라미터 이름을 id로 지정했다.
req.params.id를 출력하면 url의 :id 부분이 출력된다.

//- video.pug

mixins video(video)
  div
    h4
      a(href=`/videos/${video.id}`)=video.title

//- home.pug

extends base
include mixins/video

block content
  each video in videos 
    +video(video)
  else
    li sorry nothing found

한편, video.pug 파일의 video mixins에 작성한 코드에 따르면,
Home에 나열된 각 video들의 title을 클릭하면, 각 video의 video.id가 포함된 url로 이동하게 된다.

이때 video.pug 파일에서 id 파라미터(:id) 자리에 video.id가 위치해 있기 때문에
id 파라미터(:id)는 곧 video.id 가 된다.

즉, req.params.id === id 파라미터의 값 === video.id 이 된다.

🔥 mongoose - Schema 中 option: id & Mongoose - 모르는 것 채워놓기 참고

그런데 나는 videoSchema에도 video document를 만들 때도 id 필드를 만든 적이 없다.
하지만 가짜 데이터베이스로 테스트할 때 사용했던 이 코드를 그대로 사용해도 에러는 발생하지 않는다.
이게 어떻게 된 걸까?

→ MongoDB는 기본적으로 각각의 video에 고유 식별 번호로써 _id라는 필드와 값을 추가해준다.
이 _id 필드의 값은 .id 의 형식으로 불러서 사용할 수 있다.

4. 템플릿(templates)

1) pug

이제 url에 들어갔을 때 원하는 페이지를 보여주도록 컨트롤러를 수정해야 한다.
pug는 이러한 뷰를 만드는 것을 돕는 템플릿이다.

(1) view engine 설정

• pug를 view engine으로 설정한다.
  이제 express는 HTML을 리턴하기 위해 pug를 사용한다.

// server.js
app.set("view engine", "pug");

(2) view 폴더 경로 설정

• src 폴더 안에 views 폴더를 만든 후, express가 pug 파일을 탐색할 views 폴더의 위치를 설정한다. (기본값이 cwd이기 때문에 바꿔줘야 에러가 안 뜬다.)

// server.js
app.set("views", process.cwd() + "/src/views");

(3) pug 파일 작성

• =변수 / #{변수}

• include(partials) / extends / block

• 조건문(conditionals)

• 반복문(iteration)

ul
  each video in videos
    li=video

(4) 믹스인(mixins)

다른 데이터를 가진 같은 형태의 HTML을 return 한다.
include와 함께 사용해야 한다.

5. MongoDB와 Mongoose

1) 가짜 데이터베이스

watch video / edit video / upload video 를 다룸

(1) 삼항 조건 연산자

pug 파일에서 자바스크립트 삼항 조건 연산자 사용하기

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

(2) req.body

req.body: { input의 name: "input의 value" }

req.body를 이용해 form(method="POST")에서 전송한 값을 받을 수 있다.

express가 form의 body를 이해한 후 위와 같은 자바스크립트 object로 바꿔주도록 하기 위해서는 middleware를 사용해야 한다.

※ 주의! 모든 middleware는 router 이전에 작성되어야 한다.
이 경우를 예로 들자면, router 이전에 해당 middleware가 위치해야만 request가 videoRouter에 도착했을 때 이미 req.body가 준비되어 있을 수 있기 때문이다.

// server.js
app.use(express.urlencoded({ extended: true }));

2) MongoDB & Mongoose 설치 및 연결

[TIL] 211125 참고

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

mongoose.connect("mongodb://127.0.0.1:27017/wetube");

Mongoose를 데이터베이스(MongoDB)와 연결시켜 서버와 데이터베이스를 연결한다.

// server.js
import "./db";

server.js 파일에 db.js 파일을 import 한다.
db.js 파일에서 어떤 것도 export 해주지 않았지만, db.js 파일을 import 하는 것만으로 서버는 데이터베이스에 연결된다.

3) 모델(Model)

(1) 스키마 및 모델 만들고 사용하기

// 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;

model 폴더를 만든 후 그 안에 Video.js 파일을 만든다.
Video.js 파일에 videoSchema와 Video 모델을 만든 후 이를 export default 한다.
Video 모델을 모두가 사용할 수 있도록 server.js 파일에 import 한다.

// server.js
import "./db";
import "./models/Video";

서버와 데이터베이스가 연결된 후, 연결에 성공했다면 데이터베이스는 Video 모델을 인지하게 된다.
server.js 파일에서 당장 Video 모델을 사용하지는 않을 것이므로 변수에 받아오지는 않았지만, 이렇게 작성해줘야 미리 Video 모델을 complie 함으로써 우리가 원할 때 불러올 수 있다.

(2) server.js와 init.js 파일로 나누기

server.js 파일은 express 등 서버 구성과 관련된 것들만을 다루고,
init.js 파일은 데이터베이스와 관련된 것들을 import 한 후 이상이 없으면 서버를 여는 역할을 한다.

※ 이제 app을 실행하는 파일은 init.js 파일이므로 package.json 파일에서 dev script를 src/init.js 로 수정해야 한다.

4) home video

(1) promise: async & await

이를 사용하면 자바스크립트가 데이터베이스로부터 데이터를 받아올 동안 그 코드에서 멈춰서 기다려준다.
작성한 순서대로 코드가 실행되어 콜백 함수보다 훨씬 읽기가 편하다.

// home 컨트롤러
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");
  }
};

5) upload video

(1) getUpload 컨트롤러

export const getUpload = async (req, res) => {
  return res.render("upload", { pageTitle: "Upload Video" });
};

(2) postUpload 컨트롤러

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

(3) videoSchema 수정

schema options
required / default / trim / maxLength / minLength

해시태그 포맷하는 방법 (이건 원래 edit video 파트에 나오는데 그냥 여기서 같이 수정함)
선택 1 ~ 3

[ Video.js ]

import mongoose from "mongoose";

// 선택2. export formatHashtags & import in videoController.js
export const formatHashtags = (hashtags) => hashtags.split(",").map(word => word.startsWith("#") ? word : `#${word}`);

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

// 선택1. mongoose middleware (pre hook) → 한계: "save"에만 사용 가능
videoSchema.pre("save", async function() {
  this.hashtags = this.hashtags[0].split(",").map(word => word.startsWith("#") ? word : `#${word}`);
});

// 선택3. static 메서드 만들기
videoSchema.static("formatHashtags", function (hashtags) {
  return hashtags.split(",").map(word => word.startsWith("#") ? word : `#${word}`);
});

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

(4) watch 컨트롤러

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

6) edit video

(1) getEdit 컨트롤러

export const getEdit = async (req, res) => {
  const { id } = req.params;
  const video = await Video.finById(id);
  if (!video) {
    return res.render("404", { pageTitle: "Video not found" });
  }
  return res.render("edit", { pageTitle: `Editing: ${video.title}`, video });
};

(2) edit.pug 수정

video를 새롭게 만드는 게 아니라 수정하는 것이므로 기존의 값이 input에 들어가 있도록 value 속성을 추가한다.

extends base

block content
  h4 Update Video
  form(method="POST")
    input(name="title", placeholder="title", value=video.title, required, maxlength=80)
    input(name="description", placeholder="description", value=video.description, required, minlength=20)
    input(name="hashtags", placeholder="hashtags separated by comma", value=video.hashtags.join(), required)
    input(value="edit video", type="submit")

(3) postEdit 컨트롤러

Model.exists()는 인자로 id가 아니라 필터({ _id: id })를 받는다

export const postEdit = async (req, res) => {
  const { id } = req.params;
  const { title, description, hashtags } = req.body;
  const video = await Video.exists({ _id: id });
  if (!video) {
    return res.render("404", { pageTitle: "Video not found" });
  }
  await Video.findByIdAndUpdate(id, {
    title,
    description,
    hashtags: Video.formatHashtags(hashtags),
  });
  return res.redirect(`/videos/${id}`);
};

7) delete video

(1) videoRouter에 route 추가

보통 데이터를 삭제할 때는 post request는 일어나지 않는다.
url을 방문하면 바로 video가 삭제되도록 한다.

videoRouter.get("/:id([0-9a-f]{24})/delete", deleteVideo);

(2) deleteVideo 컨트롤러

export const deleteVideo = async (req, res) => {
  const { id } = req.params;
  await Video.findByIdAndDelete(id);
  return res.render("/");
};

8) search video

(1) search.pug 생성

form(method="GET")을 만든다

extends base

block content
  form(method="GET")
    input(name="keyword", placeholder="search by keyword", required, maxlength=80)
    input(value="search", type="submit")

(2) search 컨트롤러

videos 배열을 빈 배열로 만든다.
keyword가 입력되었으면 이를 이용해 조건과 일치하는 video를 찾아 videos 배열을 업데이트한다.
조건에 맞는 video가 있으면 search 페이지에 이를 보여주고, 없으면 search 페이지만 보여준다.

※ search 페이지에 처음 왔을 때 req.query는 undefined 값을 가진다. if (keyword) {}

export const search = async (req, res) => {
  const { keyword } = req.query;
  let videos = [];
  if (keyword) {
    videos = await Video.find({
      title: {
        $regex: new RegExp(keyword, "i");
      }
    }); 
  }
  return res.render("search", { pageTitle: "Search", videos });
};

✨ 내일 할 것

1. user 파트 시작!