JS 동기, 비동기 그리고 블로킹과 논블로킹에 대해 간단 정리

목적

기초 강의를 들으며, 핵심적인 내용인 비동기와 관련된 내용을 잘 이해하고 싶어서 별도로 여러 개의 포스팅으로 정리해보려고 한다.

동기, 비동기란?

단순하게, 동기(Synchronous) 방식은 프로그래밍 언어에서 코드를 실행하는 일반적인 방식을 떠올리면 좋다. 자바스크립트는 싱글 스레드 언어로, 한 번에 하나의 작업만 수행할 수 있기에 동기 방식으로 진행한다.

console.log("this");
console.log("is");
console.log("synchronous");

이렇게 코드 실행의 순서가 정해져 있는 것이다.

선행 코드가 실행되고 나서 다음 코드가 실행될 수 있다는 말이다.

반면에 비동기(Asynchronous) 방식은 코드의 실행 순서가 보장되어 있지 않은 것이다.

사진에서 보이는 것 처럼, 두 방식은 각각 작업(Task 1-4)들이 순차적으로 실행되느냐 무작위 순서로 실행되느냐의 차이다.

setTimeout(callback, time);
fetch(url);

위 두 가지는 가장 접하기 쉬운 비동기 함수다. 이런 비동기 함수들은, 함수의 실행 순서가 코드 순서와 같다는 보장이 없다는 것이다.

블로킹, 논블로킹

위에 있던 그림도 그렇지만, 대부분 비동기에 대해 그림이나 말로 설명할 때 병렬처리 를 생각하는데(사실 나도 그랬다) 병렬 처리는 엄밀히 비동기와는 다르게 봐야하는 것이다. 코드가 실행되는 동안, 다른 작업이 가능하도록 하는게 논 블로킹이다.

실행 순서의 보장이 되지 않는다고 해서 갑자기 2개 3개의 작업을 병렬처리 하는 건 아니지 않은가?? 일단 아래의 예시를 보자.

console.log("시작");

setTimeout(() => {
  console.log("1초 뒤 실행");
}, 1000);

console.log("끝");
// 시작
// 끝
// 1초 뒤 실행

그렇다면 이건 뭐임???? 백그라운드에서 1초 대기하는 동안 다른 작업이 실행 됐는데??????

그것은 setTimeout() 이 비동기면서 논블로킹이기 때문이다.

1초 대기하는 동안, setTimeout() 백그라운드에서 따로 실행이 되고 메인 스레드에서 나머지 2개의 console.log() 를 순차적으로 실행한 것이 된다.

그러나 대부분 JS 의 비동기 함수나 메소드는 비동기이면서 논블로킹으로 동작하기 때문에 혼동하는 경우가 있다고 한다.

이번에는 동기와 비동기, 그리고 블로킹과 논블로킹에 대해 개념만 간단히 다루었다.

포스팅 마다 읽기 쉽도록 분리하기 위해 여기서 마친다.

다음 포스팅은 Promise 객체에 대해 다루고 추후 비동기의 원리를 좀 더 파헤쳐볼 것이다.

참고

링크