동기/비동기

이번 스프린트에 배웠던 동기와 비동기에 대해 알아보자!

위 그림을 보면서 동기와 비동기를 설명해보면 (a)동기는 커피를 주문을 하고 커피가 나올때까지 기다렸다가 커피를 받는다.
그리고 그다음 사람이 다시 주문을 하고 커피가 나올때까지 기다렸다가 커피를 받는 과정인데 이렇게 하면 뒤에서 줄을 기다리고 있는 사람들은 너무 많은 시간을 허비할 것 이다.
그럼 여기서 (b)비동기 그림을 보자
여기선 커피를 주문하고 진동벨을 받은 다음 자리로 돌아가서 진동벨이 울리면 그때 다시 커피를 받으러 온다.
주문을하는 사람들은 주문만 하면 되기 때문에 빨리 주문이 가능하고 줄을 기다리는 시간도 훨씬 줄어들게 될 것 이다.

즉, 동기식 처리는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 되는 것이고
비동기식 처리는 종료되지 않은 상태라 하더라도 대기하지 않고 다음 작업을 실행하는 것이다.

그럼 자바스크립트에서 동기와 비동기를 어떻게 처리하는지 한번 살펴보자

1.콜백함수

콜백 함수를 사용하면 작업이 끝났을 때 원하는 새로운 동작을 할 수 있다.
하지만 콜백함수를 연속적으로 사용하게 되면 콜백지옥이 발생하게 되고 그것으로 코드의 가독성이 떨어지며 유지보수가 힘들어진다.
그래서 이를 극복하기 위해 promise / ascync를 사용한다.

2.promise

비동기적인 방법으로 사용되었던 콜백함수가 콜백지옥으로 가독성이 떨어져 그것을 극복하기 위해 es6에서 새로운 비동기적 패턴인 promise 도입했다.

프로미스는 Promise 생성자 함수를 통해 인스턴스화한다.
promise에는 비동기 작업을 수행할 2가지의 콜백함수를 인자로 받는데 여기엔 resolve랑 reject메소드가 있다.
성공했을땐 resolve메소드가 실행되고 실패했을 시엔 reject 메소드가 실행된다.
그래서 promise는 **pending 상태
성공 시에는 fulfilled 상태
실패 시에는 rejected 상태로 나타낸다.

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행한다.
   settimeout(() => { 
   resolve('성공');
   //reject(new Error('실패'))
   }, 2000)

});

후속 메소드로는 then, catch, finally가 있다.
먼저 then이란 promise가 정상적으로 수행이 되어서 마지막에 최종적으로 resolve라는 콜백함수를 통해서 전달한 값이 then의 파라미터로 들어오는 것이다.
그리고 catch는 rejected상태가 되었을 경우 에러를 잡아주는 역할을 한다.
마지막으로 finally는 성공하든 실패하든 마지막으로 출력되는 메소드이다.

promise.then((value) => {
  console.log(value)
})
.catch((error) => {
  console.log('error')
})
.finally(() => {
  console.log('finally')
})

then(value) =>> 성공
catch(error) =>> 실패
finally() =>> finally

3.async & await

async와 await는 es8에 해당된 문법으로 promise를 조금 더 간편하게 사용할 수 있는 패턴이다.
1.async는 새로운 것이 아니라 promise 코드를 굳이 사용하지 않아도 promise를 사용할 수 있게 해주는 역할을 한다.

// promise
function fetchUser() {
   return new Promise((resolve, reject) => {
    resolve('promise')
    .then(() => console.log('then 완료');
  })
}

// async 
async function fetchUser() {
   return 'async';
}

2.await은 async가 붙은 함수 안에서만 사용 가능하다.
외부에서 사용하면 SyntaxError가 발생한다.
await 는 말그대로 Promise 의 resolve의 상태까지 기다렸다가
다음 코드를 실행한다.
만약 Promise가 reject되면, await 문은 reject된 값을 throw한다.
await는 동기적인 코드를 쓰는 것처럼 보여서 가독성이 더 좋다.
이해하기 쉽도록 MDN에서 예제 코드를 받아왔다.

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();