동기 vs 비동기 : 처리해야 할 작업들을 어떠한 '흐름'으로 처리 할 것인가에 대한 관점
블로킹 vs 논블로킹 : 처리되어야 하는 (하나의) 작업이, 전체적인 작업 '흐름'을 막느냐 안막느냐에 대한 관점

동기(Synchronous)

작업이 실행될 때, 해당 작업이 완료될 때까지 기다린다. 즉, 해당 작업이 끝나기 전까지는 다른 작업을 수행하지 않는다. 호출하는 함수가 호출된 함수의 작업이 완료되었는지를 계속 신경쓰고 있다.

비동기(Asynchronous)

반대로, 비동기는 호출하는 함수가 호출된 함수의 작업 완료 여부를 신경쓰지 않는다. 호출하는 함수는 함수를 호출할 때 callback 함수를 같이 전달하고, 작업이 완료되면 callback 함수가 실행된다.

블로킹(Blocking)

자신의 일이 끝날 때 까지 전체적인 흐름을 막는다.

논블로킹(Non-Blocking)

자신의 일이 끝날 때 까지 전체적인 흐름을 막지 않는다.

결론

비동기 + 논블로킹 시나리오

1. 개발팀장이 사원1에게 업무A를, 사원2에게 업무B를, 사원3에게 업무C를 지시하였다. (비동기적 작업 지시)
2. (그리고 바쁜 개발팀장은 개발팀 업무 이외에도 다른 업무를 보기 시작한다.)
3. 사원들은 각자 본인의 맡은 작업을 끝내는대로 개발팀장에게 보고한다. (논블로킹 방식의 작업 처리)

동기 + 블로킹 시나리오

1. 개발팀장이 사원1에게 업무A를 지시한다.
2. 개발팀장은 사원1이 업무A를 끝맞칠때 까지 사원1 모니터 뒤에서 기다린다.. .. 끝날 때 까지.. (동기적 작업 지시)
3. 사원1이 업무A를 끝내면 개발팀장이 확인한다.
4. 개발팀장이 사원2에게 업무B를 지시한다.
5. 개발팀장은 사원2가 업무B를 끝맞칠때 까지 사원2 모니터 뒤에서 기다린다.. .. 끝날 때 까지.. (동기적 작업 지시)
6. 사원2가 업무B를 끝내면 개발팀장이 확인한다.
7. ....(사원3은 생략)...

JavaScript에서

async를 함수 앞에 붙이면, “이 함수는 비동기적인 함수이고 Promise를 반환한다”라고 선언하는 것이다. 반환 값이 Promise 생성 함수가 아니어도 반환되는 값을 Promise 객체에 넣는다.

await는 async함수 안에서만 동작한다.
await 키워드를 만나면 Promise가 처리될 때까지 기다린다.

Promise는 비동기 함수가 반환하는 객체