[D+64] 비동기호출로 순서제어하기

 

D+64

-  비동기호출로 순서 제어하기 -

(비동기 vs 동기 그리고 논블로킹 vs 블로킹,비동기 순서제어)

 

---

 

 

비동기 vs 동기 그리고 논블로킹 vs 블로킹

비동기에 관해 알아보기전에 우리는 동기뿐만 아니라 블로킹에 관해서도 알아야할 필요가 있다.

 

서로 비슷하지만 다른 특징이 있으니 잘 기억해 두어야 한다.

 

• 동기 vs 비동기 : 처리해야할 작업들을 어떠한 흐름으로 처리할 것인가

 

• 블로킹 vs 논블로킹 : 처리되어야하는 작업이 전체적인 작업의 흐름을 막느냐 안막느냐

 

이 두가지에 대해 기억할때 '흐름'에 대해서 이해한다면 좋을 것 같다.

 

 

동기 vs 비동기

각 방식의 업무 처리

동기 (Synchronous)

동기방식은 요청이 들어왔을때 들어온 순서대로 일을 처리하는 방식으로,

위의 사진을 예로 들어본다면 만약 동기 방식으로 커피를 주문받는다면 

한사람이 커피를 주문하면 주문받은 사람이 커피를 바로 만들고 난 후에야 다음 주문을 받을 것이다.

 

즉, 한 손님이 음료를 주문하면 다른 주문을 한꺼번에 받지 못하기 때문에 

순차적일 수는 있으나 일을 처리하는데 꽤나 긴 시간이 걸릴것이다.

 

비동기 (Asynchronous) 

비동기 방식은 요청에 따른 응답을 즉시 처리하지 않아도, 대시기간 동안 또다른 요청에 대한 응답을 처리할 수 있는 방식이다.

 

만약 비동기방식으로 손님이 커피를 주문하면 커피를 주문받는 사람이 커피를 만드는 사람에게 일처리를 맡기고,

다음 손님의 주문을 받을 수 있으며 주문한 손님은 커피를 만드는 점원에게 음료를 받는 형식이라고 할 수 있다.

 

어쩌면 주문을 받고 바로처리하는 동기방식보다 속도가 느릴 수는 있겠지만

여러개의 요청을 동시에 처리할 수 있기 때문에 이 상황에서는 비동기 방식이 효율적일 수 있다.

 

블로킹(Blocking)

블로킹은 호출된 함수가 자신의 작업은 모두 끝낼 때 까지 제어권을 가지고 있기 때문에

해당 업무가 처리될 동안 함수가 대기하도록 만드는 것이다.

 

논블로킹(Non-Blocking)

논블로킹은 호출된 함수가 바로 리턴을 해서 호출한 함수에게 제어권을 주어

다른 업무를 할 수 있게 하는 것이다.

 

 

---

비동기 순서 제어

위에 설명했듯이 비동기는 여러개의 요청을 동시에 처리할 수 있는 능력을 가지고 있기 때문에

실행시간이 각기다른 업무를 요청했을때 순서대로 일을 제어하는 것이 아니라 동시에 일을 처리해

입력한 순서대로 결과값이 나오는 동기적인 값과는 달리 가장 빨리 수행한 값부터 결과값으로 나오게 된다.

 

아래의 이미지처럼 동기는 '1-2-3-4'순으로 값을 리턴한다면,

비동기는 '2-4-3-1'순으로 값을 내보낼 것이다.

 

만약에 우리가 비동기를 동기처럼 입력한 순서대로 값을 내보낼려면 어떻게 해야할까?

 

바로 우리가 이번에 배워나가야할 개념들이다.

 

1 > Callback

const printString = (string, callback) => {
  setTimeout(
    () => {
      console.log(string)
      callback()
    },
    Math.floor(Math.random() * 100) + 1
  )
}

const printAll = () => {
  printString('A', () => {
    printString('B', () => {
      printString('C', () => {})
    })
  })
}
printAll()

만약에 우리가 입력한 값들이 순차적으로 오기를 바란다면 우선 Callback을 사용해서 계속 함수들이 안으로 들어갈 수 있게 하는 방법이다.

 

그런데 이런식으로 코드를 작성하게 되면 약간의 문제가 발생한다.

 

일단 적은 양의 데이터는 괜찮지만 만약 다량의 정보가 들어오게 된다면 콜백함수를 연속적으로 사용하게 되기 때문에

콜백헬이 발생하게 되는데,

콜백헬로 인해 가독성이 떨어질 뿐만아니라 추후에 코드의 복잡성으로 관리하기 어려울 수 있다.

 

이를 보안하기 위해 생긴 방법이 있는데 바로 Promise이다.

 

2-1 > Promise

프로미스는 콜백헬을 벗어나기 위한 기술, 일종의 약속이다.

 

const printString = (string) => {
  return new Promise((resolve, reject) => {
    setTimeout(
      () => {
        console.log(string)
        resolve()
      },
      Math.floor(Math.random() * 100) + 1
    )
  })
}

const printAll = () => {
  printString('A')
  	.then(() => {
      return printString('B')
    })
    .then(() => {
      return printString('C')
    })
}    
printAll()

프로미스는 콜백을 인자로 받는 것이 아니라 새로운 프로미스 (new Promise)를 리턴하게 되는데

이때의 프로미스는 해당 함수를 콜백으로 받는데 resolve, reject를 인자로 받는 콜백을 넣어 실행을 한다.

 

이때의 resolve는 성공한 비동기 요청을 받아서 반환하게 되는 것이고,

reject는 실패한 비동기 에러를 받아서 반환하게 된다.

 

A를 실행하면 콜백함수로 이어나가지 않고 .then()을 사용해 이어나가게 된다.

 

이때의 then은 resolve값을 받아 실행하게 되고

여기서 나오진 않았지만 catch라는 것도 있는데 이는 reject값의 에러를 받게된다.

 

2-2 > Promise의 세가지 상태

• Pendgin(대기) : 비동기 처리 로직이 아직 완료가 되지 않은 상태

 

• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과값을 반환해준 상태

 

• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

3 > Aysnc await

function gotoHome() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve('1. go to my home')}, 100)
    })
}

function sitAndCode() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve('2. sit and code')}, 100)
    })
}

function eatLunch() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve('3. eat lunch')}, 100)
    })
}

function goToBed() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve('4. go to bed')}, 100)
    })
}

const result = async () => { // async라고 꼭 표기하기
	const one = await gotoHome();
    console.log(one)
    
    const two = await sitAndCode();
    console.log(two)
    
    const three = await eatLunch();
    console.log(three)
    
    const four = await goToBed();
    console.log(four)
}

result();

비동기를 동기적인 것처럼 표현할 수 있는 것으로

await를 사용하기 전에 꼭 Async 함수라는 것을 알려줘야한다.