JS 심화_01 (Asynchronous JS, 비동기 처리)

Asynchronous JS

 

동기(Synchronous)와 비동기(Asynchronous)

• 동기식

  • 순차적, 직렬적 테스트 수행
  • 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐 (blocking)

• 비동기식

  • 병렬적 태스크 수행

  • 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐 (non-blocking)

    • 즉, 요청을 보내놓고 다음 태스크로 진행

 

왜 비동기(Asynchronous)를 사용하는가?

• 사용자 경험

  • 예를 들어 데이터를 구동하고 실행되는 앱이 있으며 이 데이터의 크기가 굉장히 크다고 가정
  • 동기식 코드라면 데이터를 모두 로드한 뒤에야 앱이 실행되기 때문에, 로드되는 동안 우리는 앱을 사용할 수 없는 상태로 얼마나 걸릴지 모르는 로딩 시간을 기다려야함
  • 즉, 앱이 멈춘 것처럼 보임
  • 이처럼 동기식 요청은 코드 실행을 차단하여 화면이 멈추고 응답하지 않는 사용자 경험을 만듦
  • 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행

 

Threads

• JavaScript는 단일 스레드이기때문에 기본적으로는 동기식 처리

• 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스

• 각 스레드는 한번에 하나의 작업만 수행할 수 있음

• 예시) Task A -> Task B -> Task C

  • 다음 작업을 시작하려면 반드시 앞의 작업이 완료되어야 함
  • 컴퓨터 CPU는 여러 코어를 가지고 있기 때문에 한번에 여러가지 일을 처리할 수 있음

 

• JS는 single threaded!! 이다

  • 즉 , 이벤트를 처리하는 Call Stack이 하나인 언어라는 의미
  • 해당 문제를 해결하기 위해, 즉시 처리하지 못하는 이벤트들을 다른 곳 (Web API)으로 보내서 처리
  • 처리된 이벤트들은 처리된 순서대로 대기실(Task queue)에 줄을 세워 놓음
  • Call Stack이 비면 담당자(Event Loop)가 대기 줄에서 가장 오래된(제일 앞의) 이벤트를 Call Stack으로 보냄

 

Cocurrency model

Event Loop를 기반으로 하는 동시성 모델

Cocurrency != Synchronous

1. Call Stack
2. Web API (Browser API)
3. Task Queue (Event Queue, Message Queue)
4. Event Loop

 

Call Stack

• 요청이 들어올 때마다 해당 요청을 순차적으로 처리하는 Stack(LIFO) 형태의 자료 구조

 

Web API (Browser API)

• JavaScript 엔진이 아닌 브라우저 영역에서 제공하는 API
• setTimeout(), DOM events 그리고 AJAX로 데이터를 가져오는 시간이 소요되는 일들을 처리

 

Task Queue (Event Queue, Message Queue)

• 콜백 함수가 대기하는 Queue(FIFO) 형태의 자료 구조
• main thread가 끝난 후 실행되어 후속 JavaScript 코드가 차단되는 것을 방지

 

Event Loop

• Call Stack이 비어 있는지 여부를 확인
• 비어있는 경우 Task Queue에서 실행 대기중인 콜백이 있는지 확인
• Task Queue에 대기중인 콜백이 있다면 가장 앞에 있는 콜백을 Call Stack으로 push

 

순차적인 비동기 처리하기

• Web API로 들어오는 순서는 중요하지 않고, 어떤 이벤트가 먼저 처리 되느냐가 중요 (실행 순서 불명확)
• 이를 해결하기 위해 순차적인 비동기 처리를 위한 2가지 작성 방식

아래의 비동기 처리방법은 다음 포스트에 게시

 

1. Async callbacks

• 백그라운드에서 실행을 시작할 함수를 호출할 때 인자로 지정된 함수
• 예시) addEventListner()의 두번째 인자

 

2. promise-style

• Modern Web APIs에서의 새로운 코드 스타일
• XMLHttpRequest 보다 조금 더 현대적인 버전