[JavaScript, Node.js] 유튜브 클론 정리 6장 (5) - Database 생성, 저장

머리글

이번 시간에는 데이터베이스를 생성해 보자.

DataBase

우선 기존에 작성했던 form을 조금 수정해서 비디오 스키마에 맞는 정보를 입력받을 수 있게 해 보자.

...
block content
    form(method="POST")
        input(placeholder="Title", required, type="text", name="title")
        input(placeholder="Description", required, type="text", name="description")
        input(placeholder="Hashtags", required, type="text", name="hashtags")
        input(type="submit", value="Upload 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}`),
        views: 0,
    });
	return res.redirect("/");
};

req.body를 이용하여 form에서 입력한 정보를 받았다.

그리고 video를 생성하는데 'new Video'라고 되어있다.
Video 스키마의 모양을 한 객체를 하나 생성하겠다는 의미다.

title과 description의 경우 body에서 온 이름과 동일하게 설정했으므로 ES6의 문법으로 그대로 작성해 주고,
createdAt의 경우 Date.now()를 사용하여 현재 시간을 자동으로 지정해 주었다.
hashtags의 경우 쉼표를 기준으로 단어를 분리하고 단어의 앞에 '#'을 붙어주어 리턴한다.

이렇게 작성하고 video를 콘솔에 찍어보면 id도 생성되어 있는 것을 볼 수 있는데,
시스템에서 자체적으로 id를 랜덤 하게 부여한다.

생성 과정에서 스키마에 맞지 않는 정보가 있다면 그 부분을 제외하고 객체를 생성한다.
예를 들어, views 부분에 숫자가 아닌 문자열이 들어간다면 views는 객체에서 제외되고 생성된다.

스키마를 미리 생성해 놓으면 이러한 장점을 가진다.

이제 객체를 데이터베이스에 저장해 보자.

DB Save

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}`),
        views: 0,
    });
    await video.save();
	return res.redirect("/");
};

video.save()를 이용해서 비디오를 저장할 수 있다.
이는 mongoose를 이용했기 때문에 사용이 가능한 기능인데,
save는 promise를 return 해준다.

즉, save를 위해선 async와 await을 이용해서 기다려줘야 한다.

이제 form을 제출해 보면 비디오가 정상적으로 데이터베이스에 저장됨을 볼 수 있다.
터미널을 통해서 mongo를 해서 확인할 수 있지만,
MongoDB Compass를 이용해도 편리하게 확인할 수 있었다.

MongoDB Compass를 통해 확인한 모습

이렇게 save를 활용한 방식이 있고,
create를 이용한 방식도 있다.

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

 

create 과정에서 문제가 생길 수 있기에 try-catch를 통해 에러를 핸들링해줘야 한다.

이렇게 하고 watch 페이지에 들어가려고 하면 오류가 나는데,
기존에 라우터에 정규 표현식을 숫자만 인식할 수 있게 해 놨는데
id에 영문이 들어가서 생기는 문제이다.

정규표현식을 수정해 주자.

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

이제 오류 없이 작동한다.

 

마무리

이번 시간에는 데이터를 생성하고 데이터베이스에 저장하는 과정에 대해서 알아보았다.

다음 시간에는 저장되어 있는 데이터를 수정하는 방법을 알아보자.