[JavaScript, Node.js] 유튜브 클론 정리 6장 (4) - Query, Async, Await

머리글

이번 시간에는 쿼리를 검색해 보자.

Query

우선 비디오 컨트롤러에 비디오 모델을 import 해주자.

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

그리고 mongoose의 공식 문서에서 Query와 관련된 자료를 한 번 보자.

https://mongoosejs.com/docs/queries.html

Mongoose v7.0.3: Queries

 

그리고 홈페이지에서 비디오를 찾는 함수를 만들어보자.

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

이런 식으로 callback 함수를 이용해서 동작을 시킬 수 있다.

특이하게도 find의 경우 자바스크립트 밖에서 동작하므로,
위의 코드를 실행시키면 콘솔에 먼저 로그가 찍히고 callback 함수가 실행됨을 알 수 있다.

callback의 장점은 에러를 바로 확인이 가능하다는 점이다.

그리고 이러한 callback 방식 외에도 promise 방식을 사용할 수 있는데,
다음과 같다.

Async, Await

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

이렇게 하면 callback 함수와 달리 모든 함수가 순차적으로 실행된다.

await을 사용하게 되면 find 함수는 사용자가 callback을 필요로 하지 않는다는 것을 알게 된다.
즉 await는 DB를 기다려준다.
DB가 응답을 할 때까지 코드가 실행되지 않고 그 코드에서 대기한다.

그리고 await 함수는 async 안에서만 작동이 가능하다.
async를 붙인 함수는 자동으로 promise 객체로 인식된다.

여기서는 try-catch 문을 이용해서 에러를 핸들링해야 한다.

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

우선 try 문에 있는 코드를 실행하고,
실행하다 에러를 만나게 되면 catch에 있는 코드를 실행한다.

자바스크립트는 동기적인 방식으로 한 번에 하나의 일만 처리하기 때문에 대기를 해야 하는 일이 있으면 건너뛰고 다음 코드부터 실행하고,
async를 사용하게 되면 비동기적인 방식으로 코드를 처리하기 때문에 대기가 가능하다고 한다.

아래 블로그를 참고했다.

https://ynzu-dev.tistory.com/entry/Web-%EB%8F%99%EA%B8%B0-%EB%B0%A9%EC%8B%9D%EA%B3%BC-%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%B0%A9%EC%8B%9D%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

[Web] 동기 방식과 비동기 방식의 차이점

마무리

이번 시간에는 쿼리에 접근하는 방법과 비동기적인 처리를 위한 함수인 async, await를 배웠다.

다음 시간에는 쿼리를 생성하는 방법에 대해서 알아보자.