자바스크립트에서 비동기 처리란?

0. Single Thread 언어인 Javascript

 먼저 자바스크립트는 Single Threaded 언어이다. 즉, 하나의 프로세스에서는 하나의 쓰레드만이 존재한다는 것이다.

운영체제를 배웠다면, 프로세스와 쓰레드에 관한 개념을 이해하기 쉬운데, 배우지 않았다면 다음 예시를 살펴보자.

멀티 쓰레딩의 의미는 하나의 프로세스가 여러가지의 작업을 할 수 있다는 의미이다. 사람으로 친다면, 한 손으로는 커피를 마시고 다른 손으로는 신문을 보고 다리로는 걷는 일을 동시에 하는 것처럼 하나의 프로세스가 여러 가지의 일을 할 때 멀티 쓰레딩하다고 한다. 그렇다면 이제 싱글 쓰레딩이 뭔지 이해가 될 것이다. 그렇다. 단 하나의 작업만 수행할 수 있는 것을 의미한다.

 

 그러나 자바스크립트가 Multi Threading 하게 아예 동작할 수 없는 것은 아니다. 실제로 웹 페이지에서 동시에 여러 작업을 할 수 있었던 경험이 있을 것이다. 이 때 이용하게 되는 것이 웹 APIs 이다. 이를 이용하게 되면 자바스크립트도 멀티 쓰레딩한 것처럼 동작이 가능하다.

 

다음은 MDN 사이트에 명시된 Web APIs 이다.

https://developer.mozilla.org/ko/docs/Web/API

Web API | MDN

 

 

 

1. 자바스크립트는 기본적으로는 동기적(synchronous)으로 동작한다 !

"동기적으로 동작한다." 의 의미는 "먼저 수행된 작업이 모두 끝나고 나서야 다음 일을 순차적으로 수행하는 것"이고

"비동기적으로 동작한다." 의 의미는 "요청을 다같이 보내고 작업이 끝나지 않아도 다음 동작을 수행하는 것"이다.

이처럼 자바스크립트는 호이스팅(hoisting)을 이용하여 기본적으로 동기적으로 동작하는 데, 문제는 비동기적으로 처리할 수 있는 방법이 존재하기 때문에 자바스크립트에서 비동기 처리 이슈가 있는 것이다.

 

1.5 호이스팅(hoisting)이란?

자바스크립트는 호이스팅(hoisting)을 이용해서 var 변수나 function 함수를 제일 위로 올려서 선언문들을 차례대로 먼저 수행한다. 이 때 할당은 같이 끌어올려지지 않는다. 즉, 알맹이는 냅두고 겉껍질만 일단 선언해놓는 것이다. 예를 들어, 어떤 모임에 사람들이 모이기 전에 출석체크부터 하는 것과 같은 맥락이라고 보면 된다.

 

 

 

2. 그래서 자바스크립트로 비동기 처리를 어떻게 하는 건데?

크게 세 가지의 방법이 있다.

 

첫 째, 비동기적 Call Back 함수 이용하기

https://jinn-o.tistory.com/25

비동기적 Call Back 함수 이용하기

 

둘 째, Promise 사용하기

https://jinn-o.tistory.com/26

Promise 사용하기 (프로미스가 뭘까?)

 

셋 째, Async & Await

 

 

 

위 비동기 처리에 관한 세 가지의 방법이 담긴 포스팅은 링크로 달아두었다.