[JavaScript] 자바스크립트 비동기 프로그래밍 [#1 동기 vs 비동기]

[자바스크립트 비동기 프로그래밍] 글은 총 4 개의 파트로 구성되어 있습니다.

1. 동기 vs 비동기

2. Callback 비동기

3. Promise

4. Async & Await

 

그중 이번 글은 '#1 동기 vs 비동기'에 관한 글입니다.

1. 동기 vs 비동기

비동기 프로그래밍에 대해 살펴보기 앞서, 그의 반대인 동기 프로그래밍에 대해 먼저 알아보려 한다.

1) 동기적 수행이란?

여러 작업이 있을 때, 동기적으로 수행한다는 것은 한 번에 하나씩, 순서대로 수행하는 것

• 한 번에 하나씩
• 순서대로

2) 동기 프로그래밍이란?

 코드를 순서대로 작동시켜 이전 코드의 실행이 끝나고 다음 코드가 실행되는 것

 

자바스크립트 엔진은 기본적으로 한 번에 한 가지 일만 할 수 있기 때문에 동기적으로 동작한다. 

 

<동기 프로그래밍 예시>

아래는 코드는 콘솔에 문자열을 찍어내는 코드이다. 당연히 동기적으로 수행하여 코드를 위에서 아래로, 한 번에 하나씩 실행시킬 것이다.

console.log("작업 1");
console.log("작업 2");
console.log("작업 3");

 

콘솔: 

작업 1
작업 2
작업 3

 

3) 동기 프로그래밍의 문제점!

콘솔에 찍어내는 간단한 작업이 아닌 무거운 작업을 맡긴다면, 작업이 오래 걸리고, 뒤에 있는 작업들도 오랫동안 대기해야 하는 "블록킹 현상"이 발생한다. 따라서, 블로킹 현상을 해결하기 위해 비동기 프로그래밍을 사용해야 한다.

---

4) 비동기 프로그래밍이란?

코드가 끝날때 까지 기다리지 않고, 다음 코드를 먼저 실행하는 것

 

<비동기 프로그래밍 예시>

아래 코드는 브라우저에서 제공하는 비동기 함수인 setTimeout 함수를 활용한다. setTimeout 함수는 두 개의 인자를 전달받으며, 첫 번째 인자는 콜백 함수이고, 두 번째 인자는 지연 시간을 나타내는 밀리세컨드 단위 숫자이다. 

setTimeout(() => {
  console.log("작업 1");
}, 3000);

console.log("작업 2");

 

콘솔:

작업 2
작업 1

 

분명 코드 상으로는 "작업 1"가 먼저 오는데, 왜 "작업 2"가 먼저 출력될까?

setTimeout은 비동기 함수이므로 다음 작업인 console.log("작업 2")의 실행을 블로킹하지 않았기 때문이다.

 

📌 결론

지난 포스트에서 이야기 했듯, 자바스크립트 엔진은 싱글스레드어서 한 번에 한 가지 일만 가능하지만, 브라우저의 Web API(setTimeout, fetch, DOM API등)를 사용하여 여러 일을 동시에 할 수 있다. Web API는 자바스크립트 엔진이 아닌, 별도의 브라우저 환경에서 실행되며 이 브라우저 환경은 멀티쓰레드 환경이기 때문에 큰 작업이 끝날 때까지 기다리지 않고도 그다음 작업 수행이 가능하다!