[Javascript] 동기 / 비동기

eslim·2020년 11월 28일
0

Javascript

목록 보기
9/12
post-thumbnail

study 01

1. 동기식 처리 모델

(Synchronous processing model)

동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다.

즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기하게 된다.

예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹(blocking, 작업 중단)된다.

2. 비동기식 처리 모델

(Asynchronous processing model 또는 Non-Blocking processing model)

비동기식 처리 모델(Asynchronous processing model 또는 Non-Blocking processing model)은 병렬적으로 태스크를 수행한다.

즉, 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다.

예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때, 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 태스크를 수행한다. 이후 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 태스크를 계속해 수행한다. 자바스크립트의 대부분의 DOM 이벤트와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다.

3. 비동기 처리가 왜 필요할까?

코드가 작성된 순서대로 실행되어야 하는 경우가 있고 그렇지 않은 경우가 있다. 예를 들어, 서버에 데이터를 요청한 후에 데이터가 포함된 화면을 출력하는 코드가 있다고 하자. 그런데 데이터를 불러오는데 오랜 시간이 걸리게 되면 데이터를 불러오는 코드에서 작업이 멈추게 되고 그 다음에 작성된 코드는 실행조차 되지 않는다.

이와 같이 모든 코드가 작성된 순서대로, 즉 동기적으로 처리된다면? 아마 웹 애플리케이션을 수행하는데는 수십 분이 소요될 수도 있을 것이다.

이럴 때 필요한 것이 특정 작업의 처리가 끝날 때 까지 기다려주지 않고, 나머지 코드를 병렬적으로 실행하는 비동기 처리이다.

0개의 댓글