JavaScript Sec02_7 동기&비동기

동기

---

• 동기 방식은 스레드를 이용하여 코드가 작성된 순서대로 작업을 처리한다.

⇒ 문제점 : 하나의 작업이 오래 걸리면, 모든 작업이 끝나는 데 걸리는 전반적인 시간이 늘어난다.

ex) 웹사이트에서 버튼 하나하나마다 30초 씩 걸린다고 생각해보자

멀티스레드

• 자바스크립트에서는 멀티스레드 기능이 없고 싱글스레드로만 동작한다.

비동기

---

• 비동기 방식은 작업이 끝나든말든 여러 개의 작업을 동시에 실행시키는 것이다.

⇒ 동시에 다 실행시키면 각 작업들이 정상적으로 끝났는지 어떻게 아는가?

: 각각의 작업들에게 콜백함수를 붙인다.

콜백함수

⇒ 동기적 방식

• 동기적 방식으로 바꾸면

• setTimeout함수의 매개변수는 콜백함수와 delaytime
  • 2000ms 뒤에 첫번째 인자인 콜백함수를 실행시킨다.

• 비동기적으로 실행되어 “코드 끝”이 먼저 실행되고 “A task END”가 실행된다.

예시 01)

• 비동기처리의 결과값을 이와같이 콜백함수를 이용하여 전달할 수 있다.

예시 02)

• 작업이 작성된 순서대로 수행되는 것이 아니라 비동기적으로 수행되는 것을 볼 수 있다.

예시 03)

• 위의 예제와 마찬가지로 delay time이 작은 순서대로 수행된다.

자바스크립트 엔진은 어떻게 동기적인 코드와 비동기적인 코드를 구분할까?

• 자바스크립트 코드들은 웹브라우저에 탑재된 JS Engine을 이용해 해석되고 실행된다.
• JS Engine : Heap과 Call Stack으로 구성됨
  • Heap : 메모리 할당
  • Call Stack : 코드 실행
• Main Context가 들어오는 순간이 프로그램이 시작되는 순간이고, Main Context가 나가는 순간이 프로그램이 종료되는 순간이다.
• 스레드는 Call Stack 하나만을 담당한다. (그림에서 보이는 것과 같이 Call Stack이 하나이므로 자바스크립트가 싱글스레드로 작동하는 것이다.)

동기적 코드의 실행 흐름

동기적 코드의 실행 흐름

• Event Loop는 Call Stack에 Main Context를 제외한 다른 함수가 남아있는지 아닌지를 계속 확인한다.
  • 만약 다른 함수가 남아있지 않다면 콜백함수를 수행할 수 있으므로 콜백함수 cb를 Callback Queue로부터 넘겨서 Call stack에 놓는다.

예시 04)

비동기처리의 결과를 또다른 비동기처리의 값으로 전달할 수 있다.