JavaScript | 비동기 처리 함수

시작에 앞서 본 포스팅은 velopert님의 강의를 참고하여 학습의 목적으로 정리한 내용입니다. 이점을 참고하여 주시길 바랍니다 : ) 

잘못된 정보혹은 조언등은 댓글을 통하여 언제든 환영합니다. 오늘도 저의 블로그를 들려주셔서 감사합니다 ; )

👨‍💻 자바스크립트 비동기

✅ 목차

• 비동기 함수란?

• Promise란?

•  

  async~await 이란?

   

   

비동기 함수란?

비동기에 대한 설명은 다른 포스팅에서 다루었기 때문에 여기서는 생략하겠습니다.

자바스크립트는 기본적으로 단일 스레드입니다. 이러한 이유로 동시에 여러 작업들을 처리하기 위해서 비동기 작업을 위한 기능을 가지고 있는데요.

 

이러한 작업을 어떻게 구현하는지에 대하여 알아보도록 하겠습니다.

 

 

 

 

이번에는 비동기로 동작하는 setTimeout() 함수를 이용해 비동기 처리 함수를 구현해 보겠습니다.

 

 

 

이러한 상황이 발생한 이유는 비동기적으로 동작한 work함수 때문입니다. 함수의 결과값이 나오기 전에 다음 작업을 수행할 수 있도록 해주었기 때문입니다. 그래서 `console.log('다음작업')`을 먼저 수행하게 된것이죠.

그렇다면 이러한 상황에서 `console.log('다음작업')`을 비동기 작업이 끝난시점에 출력하게 하려면 어떻게 해야할까요?

바로 callBack 함수를 사용하면 됩니다.

자바스크립트는 특정함수에 파라미터로 함수를 전달이 가능합니다. 이 함수를 비동기 처리가 끝나고 실행되도록 하는것이 callBack함수 형태인데요.

 

예제를 통해서 어떤것인지 알아보도록 하겠습니다.

Promise란

CallBack 지옥을 탈출하기 위해 탄생하였습니다.

이전에도 Promise가 외부 라이브러리로서 이미 존재했었습니다. 그런데, ES6 가 표준이 되면서 공식 라이브러리로 채택되었고 별도 install 없이 사용이 가능해졌습니다.

잠깐, 여기서 callBack 지옥이 무엇인지 알아보고 넘어가도록 하겠습니다. 앞서서 특정함수에 파라미터로 함수를 전달이 가능하다 말씀을 드렸었는데, 이 함수를 비동기 처리가 끝나고 실행되도록 하는것이 callBack함수 형태라고 말씀을 드렸습니다.

만약 여기서 우리가 비동기의 처리를 다음 비동기에 사용하고 또 다시 그 결과를 다음 비동기에 처리해야할 때, 이러한 상황을 callBack지옥이라고 합니다.

 

아래 예제를 통해 짚고 넘어가도록 하겠습니다.

 

 

 

위의 예제 소스코드를 보면 알 수 있듯이 연속된 비동기처리를 구현하기 위해서 위와같이 작성하면 가독성도 매우 떨어지게 됩니다.

이러한 콜백지옥을 탈출하기 위해서 Promise를 사용하는데요

Promise를 사용하기 위해서는 일단 Promise 객체를 생성해주어야 합니다.

• `const myPromise = new Promise((resolve, reject) => {//구현})`

• 비동기 성공시 resolve를 호출하고

• 실패시 reject를 호출하여 사용합니다.

예제를 통해 사용법을 알아봅시다.

비동기처리가 성공했을때의 코드

비동기처리가 실패했을때의 코드

Promise 의 장점

• 연속된 비동기 작업이 많아져도 코드의 깊이가 깊어지지 않는다.

Promise 의 단점

• error를 잡을때 어떤 비동기작업에서 발생했는지 찾기 힘들다.

• 특정 조건에 따른 분기를 나누기도 어렵습니다.

• 특정 값을 공유해가면서 작업하기도 번거롭습니다.

• 이러한 이유로 `async~await`을 사용합니다.

async~await 이란?

ES8에서 소개된 문법입니다.

비동기 처리작업이 필요한 함수를 구현할때 특정 비동기 처리가 완료될때 까지 기다릴 수 있게 하는것이 가능합니다.

사용법은 생각보다 간단합니다.

만들고자 하는 함수 앞에 `async`를 붙여주세요. 그리고 함수 구현부({}안)에서 결과를 받아야 하는 비동기 처리함수 앞에 `await`을 붙여주면 됩니다.

아래의 예제를 통해서 이해를 더해보세요 : )

async await 을 사용한 함수는(여기서는 Process) 결과값으로 Promise 객체를 반환하게 됩니다. 그렇기 때문에 아래와 같은 소스코드를 추가로 작성이 가능합니다.

그리고 Promise에서 에러를 발생하고자 할때는 Throw 명령어를 사용합니다

`new Error();`를 통해 에러를 생성하고 `throw new Error()`를 통해 에러를 발생시킵니다.

우리가 특정 비즈니스 로직을 짜다가 에러를 발생시켜야 할때, 사용이 가능할것 같네요!

그리고 이러한 에러처리는 Promise에서 처럼 `.catch`를 사용해 처리도 가능하지만, `async~await` 구문 안에서 `try~catch` 구문을 이용해 처리도 가능합니다.