Express - Home Controller Finished(await, async, try catch) && 비동기 & Promise

앞서 모델들을 만들었고 이제 컨트롤러에서 모델들을 연결시켜줘야 한다.

지금은 가짜 데이터베이스가 삭제되었고 현재 홈화면에 진입하면 에러가 발생한다

이제 비디오 컨트롤러에 모델을 임포트 시켜주고 

컨트롤러를 조정해줘야 하는데 이때 async와 await, throw를 사용한다.

우선 코드 작성부터 하자.

 

models폴더에 Video모델을 임포트 해주고 홈화면에 진입시 async를 작성해주자

그리고 videos라는 변수에 await과 Video.find를 해준다.

이렇게 하면 Video모델에서 데이터들을 찾아와 videos에 담아주는데 현재는 데이터가 없으니

videos는 빈 배열이다.

이렇게 작성해주면 videos를 완료하기 전까지 home 페이지를 렌더링하지 않고 videos를 완료하면 넘어가게 된다.

기본적으로 자바스크립트는 한번에 여러가지를 수행하기때문에 await을 사용하지 않으면 video를 다 불러 오지 않고도

페이지가 랜더링 되어버린다. 꼭 써야하는 연산자인 것이다. 

여기서 주의할 점은 Video.find가 꼭 성공적으로 끝나야 넘어가는게 아닌 에러가 있더라도 완료되면 렌더링으로 넘어가게 된다.

자 그럼 에러를 그냥 넘겨야 하는가 아니다. python처럼  자바스크립트도 try except같은 구문이 있다 

바로 try catch구문이다.

코드를 작성해보자.

비슷하다~! try catch구문 뭔가 애도 직관적이다..

먼저 비디오를 불러오고 랜더링을 시도하고 error가 있다면 catch해서 에러를 뿌려주고

default로 videos는 빈 배열을 담아준다.

 

만약 에러구문을 넣지 않으면 어떻게 될까. 한번 error를 발생시켜 보겠다.

바로 예외처리 구문 throw를 사용해서 에러를 발생시킨다.

throw구문도 이따 다뤄보자 이렇게 try catch구문없이 에러를 발생시키면 아에 랜더링으로 넘어가질 못한다.

python할때도 느꼈지만 예외처리는 정말 중요한 구문이다.

 

이제 async await 예외구문에 대해 간략히 짚어보고 넘어가자.

async mdn을 살펴보면

async function 선언읜 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의한다.

비동기 함수는 이벤트 루플르 통해 비동기적으로 작동하는 함수로, 임시적으로 Promise를 사용하여 결과를 반환한다.

그러나 비동기 함수를 사용하는 코드의 구문과 구조는 표준 동기 함수를 사용하는 것과 많이 비슷하다.

 

promise?  프로미스는 뭔가... 일단 mdn에는 async함수에 의해 반환 된 값으로 해결되거나 async함수 내에서 발생하는 캐치되지 않는

ㅇ예외로 거부되는 값이라는데.

 

promise mdn을 다시 보면 promise는 객체다

promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타낸다.

Promise는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나

실패 이유를 처리하기 위한 처리기를 연결할 수 있도록한다. 프로미스를 사용하면 비동기 메서드에서 마치 동기메서드 처럼 값을

반환할 수 있다. 다만 최종결과를 반환하지 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공한다

 

자 그럼 비동기를 알아보자

비동기적(Asynchronous)이란?

일반적인 프로그램의 코드는 순차적으로 진행된다. one time one thing 한번에 한 가지 사건만 발생.

예를 들어 어떤 함수의 결과가 다른 함수에 영향을 받는다면 그 함수는 다른 함수가 끝나고 값을 산출 할때까지

기다려야 한다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보면 전체적으로 프로그램이 멈춘것으로 보인다.

그럼 보통의 프로그램은 동기적이라는 말이다. 한마디로 request와 response가 동시에 일어난다는 것.

요청이 있으면 시간이 얼마가 걸리든 결과가 이루어져야 한다.

이는 매우 효율적이지 못하다. 내가 요청한것과 다른 작업을 동시에 tasking할 수 있는 것이 비동기 프로그래밍의 기본이다.

 

비동기 기법은 특히 웹프로그래밍에 매우 유용하다. 웹 어플리케이션이 브라우저에서 특정 코드를 실행하느라 브라우저에게

제어권을 돌려주지 않으면 브라우저는 멈춘 상태로 보인다. 이런 현상을 Blocking이라고 부름.

developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Concepts

일반적인 비동기 프로그래밍 개념 - Web 개발 학습하기 | MDN

예제를 읽어보자. 아주 잘 이해가 된다. blocking현상이 생기는 이유는 기본적으로 자바스크립트는 single threㅁded이기 때문이다.

여기서 또 Thread란 무엇인가. cpu에서 많이 들었다 8코어 16스레드...

맞다 thread는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스이다. 각 스레드는 한번에 하나의

작업만 수행 할 수 있다. 자바스크립트가 싱글이라니... 현재 우리들 컴퓨터는 기본 4스레드 이상을 가지신 분이 대부분 일 것이다.

그러나 자바스크립트는 main thread라 불리는 단일 thread에서만 작업을 실행할 수 있다.

 

자바스크립트는 이러하느 문제를 해결하기 위해 몇가지 툴을 도입했다.

바로 worker라고 불리는 별도의 스레드로 보낼 수 있다. 시간이 오래 걸리는 처리는 worker를 사용해 처리하면 blocking 발생읠 막을 수 있다.

이러한 worker는 유용하지만 .. 엄청난 문제가 있다.. DOM에 접근할 수 없다..

UI를 계선하도록 worker에게 어떠한 지시도 직접 할 수가 없다는것.. 단순히 프로그래밍 적인 부분만 다루게 된다.

두번째 문제는 worker에서 실행되는 코드는 차단되지 않지만 동기적으로 실행되는것. 

무슨말인즉슨 함수사용시 어떤 함수가 일의 처리를 위해 이전의 여러 프로세스의 결과를 return받아야 할 경우.

동기적으로 실행되면 함수 실행에 필요한 매개변수를 받아올 수 없는 경우가 생기므로 함수는 원하는 기능을 제대로 실행할 수 없다.

 

예를 들어 함수 b와 c의 결과를 d가 사용해야 한다고 생각해보자. b,c가 매우 빠르게 연산되어 동시에 결과를 반환하면

괜찮겠지만 현실은... 이때 둘중 하나만 입력되면 에러가 발생하는 것이다.

 

이런 문제를 해결하기 위해 브라우저를 통해 특정 작업을 비동기적으로 실행할 수 있다. 바로 위에서 언급한 Promises의 사용이다.

현재 소프트웨어 설계는 프로그램이 한번에 두가지 이상의 일을 할 수 있도록 비동기프로그래밍을 중심으로 돌아가고 있다.

 

자 비동기를 알아봤으니 다시 promise로 돌아와서

promise는 어떤 객체냐~ 비동기 작업의 최종완료 또는 실패를 나타내는 객체이다. 대부분 이미 만들어진 promise를 사용했었기 떄문에 

promise의 사용법에 대해서 한번 알아보자

기본적으로 promise는 함수에 콜백을 전달하는 대신 콜백을 첨부하는 방식의 객체이다.

비동기로 음성파일을 생성해주는 createAudioFileAsync라는 함수가 있다고 생각해보고 해당 함수는 음성 설정에 대한 정보를 받고

두가지 콜백 함수를 받는다 . 하나는 음성파일이 성공적으로 생성되었을때 실행되는 콜백과 다른 하나는 에러가 발생했을때 실행되는 콜백이다.

대부분 모던한 함수는 위와 같이 콜백을 전달하지 않고 콜백을 붙여 사용할 수 있게 Promise를 반환해 준다.

만약 함수가 Promise를 반환해주도록 수정해본다면.

const promise = createAudioFileAsync(audioSettings);

promise.then(successCallback, failureCallback);

이렇게 간단하기 쓸 수 있다. 이와같은 것을 비동기 함수 호출이라고 부른다.

 

어우 머리아파진다.. 일단 여기까지 알아보자 비동기 async 시간내서 더 깊게 파보자.

 

developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises

Using promises - JavaScript | MDN

자 다시 async로 돌아와서 ~~

async함수에는 await식이 포함될 수 있는데 이 연산자는 async함수의 실행을 일시 중지하고 전달된 promise의 해결을 기다린 다음 async함수의 실행을 다시 시작하고 완료후 값을 반환한다.

await은 async에서만 유효하다. 다른 곳에서 사용하면 구문오류가 발생한다.

async/await함수의 목적은 사용하는 여러 promise의 동작을 동기스럽게 할수 있고 어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하게 하는 것이다. promise가 구조화된 callback과 유사한 것처럼 async/await또한 generator와 프로메스를 묶는것과 유사하다.

 

요기까지!!! 

간단히 정리해보자

Promise: 자바스크립트 비동기 처리에 사용되는 객체이며 자바스크립트의 비동기처리란 (특정 코드의 실행이 완료될 때 까지 기다리지 않고 다음코드를 먼저 수행하는 자바스크립트의 특성)

promise는 주로 서버에서 받아온 데이터를 화면에 표시할때 사용한다.

 

async & await은 잘 정리된 블로그가 있어 링크걸고 끝!!! 와웅

joshua1988.github.io/web-development/javascript/js-async-await/#async--await%EB%8A%94-%EB%AD%94%EA%B0%80%EC%9A%94

자바스크립트 async와 await

이블로그 좋다...