[Youtube 클론코딩] DB 데이터 불러오기와 비동기

으.. 갑자기 교통사고가 나는 바람에 약 2주동안 병원에 입원해있었다..

이제 다시 시작해보려 한다.

DB에 저장된 데이터 불러오기

우리는 앞서 데이터의 스키마를 제작했고, 그것을 mongoose.model() 함수를 통해 데이터베이스에 저장했다.

이제 홈페이지에서 데이터베이스에 저장한 비디오들을 불러와 표시를 해보자.

mongoose는 db객체.find()에 첫번째 매개변수로 찾는 데이터의 정보를, 두번째 매개변수로 데이터를 가져온 뒤 실행할 콜백 함수를 받는다.

콜백함수

콜백함수란, 어떠한 함수에 매개변수로 주어지는 함수로, 콜백 함수를 감싸는 함수의 실행이 마무리 된 뒤에 실행되는 특징을 가진다.

예를 들어 다음처럼 함수를 작성해보면,

보는 것 처럼 first와 second, render함수가 실행된 다음에 콜백함수가 실행되는 것을 볼 수 있다.

왜냐하면 find는 데이터베이스와 통신을 하므로 시간이 걸리는데 그것을 기다려주지 않고 render함수까지 실행되었고

이후 find 함수의 실행이 완료되자 콜백함수가 실행되기 때문이다.

따라서 render에 비디오 정보를 넘겨주기 위해서는 render 함수의 실행을 find 함수의 종료시점 뒤로 미뤄야 하는 필요가 존재한다.

그러므로 render 함수를 콜백함수 안에 넣어주면 된다.

이처럼 find 함수의 실행이 종료되고난 뒤에 render 함수가 실행되는 것을 볼 수 있다.

콜백 지옥

콜백 지옥이라는 단어를 들어본 적 있는가?

콜백 지옥

인터넷에서 유명한 짤처럼, 콜백이 계속된다면 함수의 모양이 마치 쐐기처럼 엄청난 수의 공백을 가지게 될 것이다.

이처럼 수많은 콜백 함수들이 엉켜있는 모습을 '콜백 지옥'이라고 한다.

 

콜백 지옥이 만들어진다면 코드의 가독성이 급격히 떨어지게 된다.

이를 해결하기 위한 방법은 크게 두가지가 존재한다.

하나는 Promise 이며 다른 하나는 async await 이다.

Promise는 배워야 할 게 많아서 다음에 따로 다루기로 하고 오늘은 async await를 사용해보자.

async, await

async/await 문법은 ES2017에 추가됐는데, 

비동기 작업을 수행하고자 하는 함수 앞에 async 키워드를 붙이고

비동기 작업이 필요한 부분에 await을 표기하여 뒤의 내용을 Promise로 자동 전환하고, 해당 내용이 resolve 돼야 다음으로 진행한다.

 

훨씬 가독성이 올라간 것을 볼 수 있다.

그런데 콜백함수를 사용할 때는 error를 매개변수로 넣어서 처리해주었는데 여기선 오류제어를 어떻게 해야 할까?

바로 try-catch 문을 이용하는 것이다.

이렇게 하면 Video.find()를 실행하다 에러가 발생하면 자동으로 catch문으로 빠지게 된다.

 

여기서 한가지 알아둬야할 점은, return은 단순히 함수를 종료하기 위한 수단이지, 중요한 부분은 render()의 실행이다.

무슨 말이냐면, return을 해주지 않아도 res.render()문만 제대로 실행된다면 웹 페이지는 잘 동작하게 된다는 의미다.

다만 한 실행문 안에 render()를 두번 이상 사용하게 된다면 에러가 발생하게 되므로, 이를 방지하기 위해 return을 사용하는 것이다.

한번에 여러개의 render()를 실행했을 때의 오류메세지

return을 넣어주면 그 뒤에 오는 실행문들이 실행이 되지 않으면서 실수를 줄일 수 있다.