[Javascript] 비동기 프로그래밍

 

1. 비동기 프로그래밍

 

동기 냐 비동기냐 하는 구분은 두 개 이상의 작업의 처리 방식에 따라 나누는 구분 방식이다.

즉, 호출한 함수가 있고 호출되는 함수가 있을 때 이 두 가지를 어떻게 처리할 것이냐 하는 것인데,

동기 처리 방식을 따르면 호출된 함수의 수행 결과를 호출한 함수에서 동시에 계속 신경 쓰고 있다.

비동기 처리 방식에서는 호출된 함수의 수행 결과를 호출된 함수 혼자 신경 쓰고 처리한다.

따라서 비동기 프로그래밍 방식은 호출된 함수의 실행 및 완료와 별개로 다른 태스크를 계속 수행할 수 있다.

 

2. 비동기 프로그래밍의 필요성

비동기 프로그래밍을 하면 한 작업이 완료되기를 기다리지 않고도 다른 작업을 수행할 수 있다.

서버에서 사용자 정보를 받아오거나 동영상을 로드하는 등 오래 걸리는 작업을 수행해야 하는 경우 특히 비동기 처리 방식이 유용하다.

 

3. 비동기 프로그래밍의 구현

setTimeout

const timerId = setTimeout(callback, time(ms));
clearTimeout(timerId);

타이머 함수로, 설정한 시간이 됐을 때 콜백 함수를 한 번 실행한다.

clearTimeout으로 타이머를 취소할 수 있다.

 

콜백 패턴

비동기 함수의 처리 결과에 따라 콜백 함수를 호출해 후속 처리를 하는 패턴을 만들 수 있다.

그러나 만약 후속 처리 결과에 따라 또 다시 비동기 함수를 호출해야 한다면 콜백 함수가 중첩돼 콜백 헬이 만들어질 수 있다.

 

프로미스

프로미스는 콜백 헬의 대안으로 도입되었다.

프로미스를 생성하는 생성자 함수와 만들어진 프로미스를 후속 처리하는 메서드를 나누어 살펴볼 수 있다.

const promise = new Promise((resolve, reject) => {
  if(/* 성공 */) resolve('result');
  else reject/* 실패 */('error')
}

프로미스 생성자 함수는 위와 같이 만든다.

비동기 처리 결과가 성공했을 경우 resolve함수를 호출하고, 실패했을 경우 reject 함수를 호출한다.

resolve와 reject를 통해서 전달된 결과값은 후속 처리를 담당하는 .then과 .catch를 통해 받을 수 있다.

new Promise(resolve => resolve('fufilled'))
  .then(x => console.log(x)) //'fulfilled'

new Promise((resolve, reject) => reject(new Error('rejected')))
  .catch(x => console.log(x)) //'rejected'

.then과 .catch는 언제나 프로미스를 반환한다.

그래서 .then과 .catch를 연달아 사용하는 프로미스 체이닝이 가능하다.

 

acync/await

async는 평범한 함수를 프로미스를 리턴하는 비동기적 함수로 만들어준다.

async 함수 내에서 사용하는 키워드 await는 프로미스 실행을 기다렸다 그 결과값을 얻을 수 있게 해준다.

여러 프로미스들을 await 키워드들에 넣어 변수에 할당해 주면 결과값을 훨씬 직관적으로 사용할 수 있다.

async function runAsync() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("fulfilled"), 1000)
  });

  let result = await promise;
  console.log(result) //'fulfilled'
}

 

race, all

Promise.all은 모든 프로미스가 실행되기를 기다렸다가 그 결과값을 담은 배열을 반환한다.

Promise.race는 제일 먼저 처리된 프로미스의 실행 결과를 담은 프로미스를 반환한다.

Promise.all과 Promise.race 안에는 요소 전체가 프로미스인 배열을 넣어줘야 한다는 것을 기억하자!

그리고 Promise.all에서는 여러 프로미스 중 하나라도 에러가 나면 전체에서 에러가 발생한다.

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)),
  new Promise(resolve => setTimeout(() => resolve(2), 2000)),
  new Promise(resolve => setTimeout(() => resolve(3), 1000))
]).then(console.log) //[1, 2, 3]

Promise.race([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)),
  new Promise(resolve => setTimeout(() => resolve(2), 2000)),
  new Promise(resolve => setTimeout(() => resolve(3), 1000))
]).then(console.log) //1

 

---

(내가 보려고 정리하는) 참고 자료

 

Blocking-NonBlocking-Synchronous-Asynchronous

https://homoefficio.github.io/2017/02/19/Blocking-NonBlocking-Synchronous-Asynchronous/#about

 

 동기 & 비동기 / 블로킹 & 논블로킹 💯 완벽 이해하기

https://inpa.tistory.com/entry/%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-%EB%8F%99%EA%B8%B0%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%B8%94%EB%A1%9C%ED%82%B9%EB%85%BC%EB%B8%94%EB%A1%9C%ED%82%B9-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC