개요

기능 구현은 잠시 묻어두고, 원론적인 부분을 점검하고자 포스팅합니다.

일반적인(?) 언어의 경우

저의 맨 처음 학습한 언어는 C였습니다.

가장 처음 마주한 코드는 역시나,

#include <stdio.h>

int main(){
	printf('hello world!')
    	printf('안녕하세요!')
}

너무나도 흔한... '안녕 세상!' 입니다.

위의 코드는

hello world!
안녕하세요!

이렇게, 터미널에 출력됩니다.

가령, printf문의 중간에

printf('hello world!') // 1
setTimeout(function(){},1000) // 2
printf('안녕!') // 3

여기에서 setTimeout은 c에서 이미 정의된 함수가 있다고 가정합니다.

timeout을 넣으면 1 출력 후, 1초 쉰 뒤 3이 출력될 겁니다.

그러나 JavaScript는 그렇지 않습니다.

console.log('hello world!') // 1
setTimeout(function(){},1000) // 2
console.log('안녕!') // 3

위의 코드는 1->3->2의 순서로 진행됩니다.

그 이유는 브라우저의 동작 원리에 있습니다.

---

How JavaScript works?

크게 나눠 JS가 동작할 때 Heap, Stack, Web API, Queue가 사용됩니다.

---

Memory Heap

예를 들어

const var1 = 'd'
const arr = ['a','b','c']

두 개의 변수가 생성되면

Heap 영역에서 각 객체를 위한 공간을 할당합니다.

그림에서는 그대로 가져다 썼지만, 실제로는

해당 객체의 주소와 값이 저장됩니다.

Stack

console.log('hello world!') // 1
setTimeout(function(){},1000) // 2
console.log('안녕!') // 3

위의 코드를 실행하면,

이러한 형태로 쌓여 위에서부터 아래의 방향으로 실행되는데,

먼저 console.log('hello')가 실행된 이후,

JavaScript는 setTimeout을 바로 실행하지 않고

해당 작업을 Web API에게 요청해 넘긴 뒤, 다음 console.log를 실행합니다.

여기에서 헷갈리지 않아야되는 것은, 이 Stack 공간은 하나 뿐입니다.

즉, 동시에 작업이 수행되는 것처럼 보인다고 하더라도

JavaScript는 기본적으로 동기적이며, Single Threaded로 수행됩니다.

Web API

Web API는 Stack으로부터 전달받은 작업이 없다면 당연히 동작 원리에 포함되지 않지만

위와 같은 경우와 같이 전달받은 작업이 있다면

해당 작업을 마무리한 뒤, Callback Queue에 내려보내게 됩니다.

Callback Queue

Callback Queue는 Web API에서 완료된 작업을 잠깐 보관하는 용도입니다.

Stack이 비어있는지 확인 후, 비어있다면 작업을 순서대로 Stack에 올립니다.

위의 경우엔 Stack에 아직 작업이 남아있기에 올려보내지 않습니다.

따라서,

console.log('hello world!') // 1
setTimeout(function(){},1000) // 2
console.log('안녕!') // 3

이 코드는 1->3->2로 진행되는 것을 알 수 있습니다.

아래는 Web API가 지원하는 메서드들의 목록 링크입니다.
참고 링크 : https://developer.mozilla.org/ko/docs/Web/API

---

주의사항

앞서 서술했듯, Stack 공간은 하나 뿐입니다.

따라서 끝이 없는 재귀 호출이나

너무 큰 크기의 loop가 호출되면...

loop가 끝나지 않아 setTimeout 함수가 실행되지 않고..

한정된 Stack에 작업들이 쌓여 Stack overflow 오류가 발생하며

브라우저 프리징 현상의 주원인이 될 수 있고

웹 서비스가 위와 같은 방식으로 설계된 경우

불편한 사용자 경험이 발생합니다.

---

마무리

왠만큼 브라우저들이 최적화됐기에 속도의 극적인 변화는 없다곤 하지만

위의 원리를 알고 코딩하는 것은 또 다른 이야기가 될 것 같습니다.

언젠가 웹 서비스를 만들었을 때, 동작 원리에 기반하여

좋은 퍼포먼스가 나왔으면 좋겠다는 기대와 함께 참고 링크를 남깁니다.

참고링크
1. 개발자 90%가 모르는 자바스크립트 동작원리 (Stack, Queue, event loop) / 코딩애플
https://www.youtube.com/watch?v=v67LloZ1ieI&t=513s
2. JavaScript 동작원리를 살펴봅시다 / 권주희님
https://medium.com/humanscape-tech/javascript-%EB%8F%99%EC%9E%91%EC%9B%90%EB%A6%AC%EB%A5%BC-%EC%82%B4%ED%8E%B4%EB%B4%85%EC%8B%9C%EB%8B%A4-aef465c9c43