동기 vs 비동기

위의 사진이 sync 즉 동기적
아래의 사진이 async 즉 비동기적

동기 : synchronous ⇒ sync

1. 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식
2. CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드
3. 계산이 복잡해서 CPU가 계산하는 데에 오래 걸리는 코드 역시도 동기적 코드

비동기 : a + synchronous ⇒ async

1. 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
2. setTimeout, addEventListner 등
3. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
4. 서버-클라이언트, 웹통신등 통신이 들어가는것은 대부분 비동기적 통신

복잡도가 올라갈수록 비동기적 코드의 비중이 늘어난다.

그리고 콜백지옥을 벗어나기 위해선 비동기 작업의 동기적 표현이 필요하다

• promise, Generator(ES6), async/await(ES7) 를 통해 비동기를 동기적인거처럼 보이게 처리해 줄 수 있다.

Promise

• 비동기 처리에 대해, 처리가 끝나면 알려달라는 약속이다.
• new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행된다.
• 그 내부의 resolve(또는 reject)함수를 호출하는 구문이 있을 경우 resolve(또는 reject) 둘 중하나가 실행되기 전까지 다음(then), 오류(catch)로 넘어가지 않는다.
• 따라서 비동기 작업이 완료될 때 비로소 resolve, rejcet를 호출한다.

Generator

• *가 붙은 함수가 제너레이터 함수
• 제너레이터 함수는 실행하면 반복할 수 있는 Iterator 객체가 반환된다.
• iterator 객체는 next를 가지고 있다.
• iterator 객체는 next 메서드로 순환 할 수있는 객체
• next메서드 호출시 제너레이터 함수 내부에서 가장 먼저 등장하는 yield(양보하다)에서 stop이후 다시 next 메서드를 호출하면 멈췄던 부분 부터 그 다음의 yield까지 실행후 stop 한다.
• 즉 비동기 작업이 완료되는 시점마다 next메소드를 호출해주면 Generator함수 내부소스가 위아래 순차적으로 진행된다.