자바스크립트 - 동기(Synchronous)? 비동기(asynchronous)?

 

 

들어가기 전에,

필자는 자바스크립트를 처음 접하고, 오로지 문법적인 것에만 집중해서 공부를 했었다.

하지만 개발할 때 더 중요한 것은 자바스크립트가 어떻게 동작하는지를 먼저 알고 개발을 시작해야 한다는 것이다.

안 그러면 왜 오류가 나는지도 모르고 이유를 모르니 해결할 방법을 찾을 수도 없게 되는 상황을 만나게 될 것이다. (저는 직접 겪었기 때문에...)

제목처럼 자바스크립트가 동기인지 비동기인지 그것을 먼저 알아야만 한다.

 

JavaScript는 동기식 언어이다.

자바스크립트는 한 번에 하나의 작업을 수행한다.

한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다.

마치 음식점에 여러 사람들과 갔을 때, 키오스크를 이용하여 한 사람씩 결제하는 것과 유사하다.

이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 부른다.

console.log("hi");
console.log("hello");
console.log("bye");

이렇게 console.log()를 세 개를 입력하고, 출력 결과를 확인해보면

이렇게 순서대로 "hi", "hello", "bye"가 찍히는 것을 확인할 수 있다.

 

그렇다면 왜 이렇게 나오는 것일까?

그것은 바로 Javascript의 Engine(V8)을 까 보면(?) 알 수 있다.

출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

일단 Memory Heap과 Call Stack은 자바스크립트의 엔진의 주요 구성 요소이다.

Memory Heap이란?

변수와 객체의 메모리 할당을 담당하는 곳을 말한다.

Call Stack이란?

함수가 호출이 되면 쌓이는 곳이다. 대신 함수가 쌓이는 순서와는 반대로 실행된다.

자바스크립트에서 함수를 호출하면 Call Stack이라는 곳에 호출 순서대로 차곡차곡 쌓인다.

그러고 나서, Stack은 맨 마지막에 호출된 함수가 맨 먼저 반환한다.

List in Frist Out, 먼저 들어온 것이 먼저 나간다라는 의미로, LIFO 구조라고 부른다.

이렇게 순서대로 처음에 console.log("hi")가 호출되면서 Call Stack에 먼저 쌓이고, hi를 반환하면 console.log("hi")는 Call Stack에서 사라진다.

하지만, hi를 반환하기 전까지 다음 작업은 수행할 수 없다.

이 순서대로 console.log("hi")가 사라지고 hi를 반환한다.

그러고 나서, console.log("hello")가 쌓이고 hello를 반환하면, console.log("hello")가 사라진다.

또, 그러고 나서 console.log("bye")가 쌓이고 bye를 반환하면 console.log("bye")가 마지막으로 사라진다.

이러한 방식으로 진행되기 때문에 콘솔 창에 순서대로 "hi", "hello", "bye"가 찍히는 것이다.

 

그렇다면 비동기는 무엇인가? 

비동기(asynchronous)란?

이전에 말했지만, 자바스크립트는 단일 스레드, 동기식으로 동작한다.

하지만 비동기는 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다.

왜 필요한가?

예를, 웹 페이지가 로딩되거나, 어떠한 동작(Event) 하나가 30초 이상이 걸린다고 상상해보자.

그렇게 되면, 웹 페이지는 이 동작이 끝날 때까지 화면에 나타나지 않거나 다음 동작을 수행하는데 지장을 주게 된다.

또, 요즘 사용자들은 느리고 응답이 없는 웹 사이트를 원하지 않는다.

그렇기 때문에 자바스크립트가 웹 사이트에서 동작할 때, 비동기적으로 동작할 수 있어야 한다.

 

그런데 브라우저에서 Javascript가 어떻게 화면 전환하면서 HTTP 요청이나 여러 이벤트를 동시에 동작을 할 수 있는 것인가?

그것은 바로 자바스크립트의 실행 환경(Runtime)과 관련이 있다.

브라우저에서는 자바스크립트 엔진 만으로 동작하지 않는다.

출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

하지만, 운 좋게도 브라우저에서의 자바스크립트 실행 환경(Runtime)에서는 자바스크립트 엔진 자체가 제공하지 않는 일부 기능인 DOM 조작이나 AJAX 같은 비동기 처리를 위한 web API를 제공한다.

또, 이를 제어하기 위해 이벤트 루프(Event Loop), 이벤트 큐(Callback Queue 혹은 task Queue)가 존재한다.

 

자바스크립트의 비동기 처리 작동 원리는 여기서 확인!

자바스크립트 동작 원리

 

동기(Synchronous)와 비동기(asynchronous) 동작 원리를 정리하자면,

동기(Synchronous) 동작 원리

1. 코드가 실행되면 순서대로 Call Stack에 실행할 함수가 쌓인다.(push)

2. 쌓인 반대 순서로 함수가 실행된다.(LIFO)

3. 실행이 된 함수는 Call Stack에서 제거된다(pop)

 

비동기(asynchronous) 동작 원리

1. Call Stack에서 비동기 함수가 호출되면 Call Stack에 먼저 쌓였다가 Web API(혹은 백그라운드라고도 한다)로 이동한 후 해당 함수가 등록되고 Call Stack에서 사라진다.

    

2. Web API(백그라운드)에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 Callback Queue에 push(이동) 된다.

3. 이제 Call Stack이 비어있는지 이벤트 루프(Event Loop)가 확인을 하는데 만약 비어있으면, Call Stack에 Callback Queue에 있는 콜백 함수를 넘겨준다.(push)

4. Call Stack에 들어온 함수는 실행이 되고 실행이 끝나면 Call Stack에서 사라진다.