[유튜브 클론코딩] 3.5 Home Controller Finished

3.5 Home Controller Finished

이렇게 만든 model들을 어떻게 사용할 수 있을까? 믿지 못할 정도로 간단할 것이다.

현재 상태에서 videoController에서 누군가가 home으로 가면 여기 videos는 undefined일 것이다.

일단 videoController에서 Video를 import 해준다.

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

 

videoController에 async/await 사용하기

videoController에 async를 추가해준다.

async는 비동기이다. (즉 순서대로 실행하느라 기다리지 않고 바로 에러를 보내는 동기적 방식이랑 다른 것이다)

지금 이 상태에서 video를 살펴보라는 조건을 달면 자바스크립트는 default로 너를 기다리게 프로그래밍 되어있지 않다.

자바스크립트는 default로 video를 살펴보기 시작하지만 끝나기를 기다리지 않고 다음으로 넘어가서 video가 없는 페이지를 render한다.

우리는 자바스크립트가 우릴 기다리게 해야한다. 그렇게 하려면 async라는 keyword를 추가해야한다.

async는 '자바스크립트야 이 function의 어떤 부분은 꼭 기다려야 해 ' 라고 이야기하는 것과 같다. (비동기 프로그래밍)

await는 다음 과정이 끝날 때까지 잠시 기다려 달라는 의미야

이렇게 하면 Database에 있는 모든 Video를 가져올 것이다.

 

이렇게 작성한 후 실행하면 현재 데이터베이스에 videos가 비어있으므로 콘솔에 그걸 찍으면 [] 라고 뜬다.

그리고 localhost:4000은 비록 videos가 없지만 다른 부분은 잘 보인다.

 

try-catch 사용하기

• 위처럼 작성하면 await 부분이 끝나기 전까지는 render 부분을 실행하지 않을 것이란 것을 확실하게 보여준다.
• 해당 과정이 성공적으로 끝나야 하는건 아니고 그냥 끝날 때까지 기다린다
• 예를 들면 error가 생겨도 다음 render 부분을 실행한다. 왜냐면 끝났기 때문에. 성공적으로 끝난게 아니라 그냥 끝난거
• 이렇게 짜는 건 좋지 않아 발생할 수 있는 모든 error를 잡아야한다.
• 그래서 try catch를 사용한다.
• try는 우리가 해야할 것들. 그리고 만약 실패한다면 해당 error를 잡아낼 것이다. 그래야 우리가 무슨 error인지 볼 수 있음

export const home = async(req, res) => {

    try{

        const videos = await Video.find({});

        res.render("home", {pageTitle: "Home", videos});

    } catch(error){

        console.log(error);

        res.render("home", {pageTitle: "Home", videos: []});

    }

    

};

error가 생기면 video는 없을거고 default로 videos는 빈 array가 되겠지

만약 에러가 있는데 catch하지 않았다면?

export const home = async(req, res) => {

    

    const videos = await Video.find({});

    throw Error("lalala");

    res.render("home", {pageTitle: "Home", videos});

        

};

error가 생겼는데 그 에러를 catch하지 않으면 이렇게 에러가 난다.

그래서 try catch를 쓰는거야

 

결론

1) async와 await

await는 해당 과정이 끝날 때까지 기다리게 하는거고 . 성공이나 실패여부가 중요한게 아니라 끝났다는게 중요해

2) try와 catch

error가 생기면 default로 우린 잡아내지 못해 이건 nodeJS의 문제야 엄청 중요한 error가 있고 우리가 잡아내지 못한다면 nodeJS는 불편할거고 모든게 망가지겠지