비동기

동기적인 상황

손님 1이 아메리카노를 주문한다.
접수를 받은 직원이 아메리카노를 내린다.
직원이 손님 1에게 아메리카노를 전달한다.
손님 2가 카페라떼를 주문한다.
접수를 받은 직원이 카페라떼를 만든다.
직원이 손님 2에게 카페라떼를 전달한다.

---

비동기적 상황

1. 손님 1이 아메리카노를 주문한다.
   1. 접수를 받은 직원이 아메리카노를 내린다.
   2. 아메리카노가 완성되면 직원이 손님 1을 부른다.
   3. 아메리카노를 손님 1에게 전달한다.
2. 손님 2가 카페라떼를 주문한다.
   1. 접수를 받은 직원이 카페라떼를 만든다.
   2. 카페라떼가 완성되면 직원이 손님 2를 부른다.
   3. 카페라떼를 손님 2에게 전달한다.

동기적인 경우에는 손님 1의 커피가 전달되고나서 손님 2의 커피를 주문할 수 있고 비동기적 경우에는 손님 1의 커피가 진행되는 중에도 손님 2의 커피를 주문할 수 있다.

---

비동기의 순서를 제어하고 싶은 경우 Callback , Promise, Async/await

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()

//A
//B
//C

---

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()

//A
//B
//C

Promise를 사용하는 이유는 callback hell 때문!
하지만 promise hell도 존재한다.
.then에 리턴을 사용하면 가독성 좋은 코드가 된다.

---

`Async/await``

const printAllAsyncAwait = async () => {
 let a = await printString("A")
 let b = await printString("B")
 let c = await printString("C")
}

//A
//B
//C

Async를 사용하면 코드가 가장 간편해서 배울때 기분이 좋았다 😅

비동기를 배우면서..
비동기는 이해가 된 것 같으면서도 막상 문제를 해결할땐 사용이 잘 되지않았다.
커피 주문하기만 이해해서 그런가..? 그래도 줌 세션과 페어프로그래밍을 하면서 많은 이해가 된 것 같다. 좀 더 복습해서 이해하면 된다!