[자바스크립트] 콜 스택(Call stack), 블로킹(Blocking) 개념 이해

 

 

이벤트 루프에 대해 어려움을 겪던 중 이 영상을 보게 되었다.

​

우선, 자바스크립트는 싱글 스레드(single threaded) 프로그래밍 언어이다.

싱글 스레드라는 건, 한 번에 하나의 call stack을 갖고 있고,

그 말은 다시 말해 한 번에 하나씩만 일 처리를 할 수 있다는 말

---

​

Call stack

A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

https://developer.mozilla.org/en-US/docs/Glossary/Call_stack

즉 콜 스택은 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지,

다음에 어떤 함수가 호출되어야 하는지 등을 제어한다.

​

예시_

 

function foo() {
      throw new Error("Oops!");
    }
    function bar() {
      foo();
    }
    function baz() {
      bar();
    }
    baz();

​

1. 우선 main에 존재하는 baz() 함수에 도달할 때까지, 모든 함수를 무시한다.

2. baz()를 호출한다.

3. baz()를 콜 스택 리스트에 추가한다.

​

4. baz() 함수 내부의 코드를 실행한다.

5. bar() 함수를 얻는다.

6. bar()를 콜 스택 리스트에 추가한다.

​

7. bar() 함수 내부의 코드를 실행한다.

8. foo() 함수를 얻는다.

9. foo()를 콜 스택 리스트에 추가한다.

​

10. foo() 함수 내부의 코드를 실행한다.

​

11. foo()가 호출된 라인으로 돌아온다.

12. 콜 스택 리스트에서 foo()를 제거한다.

​

bar()와 barz() 도 11,12 번을 수행한다.

​

마지막에 콜 스택 리스트는 빈(EMPTY) 상태가 된다.

​

정리하자면,

빈 호출 스택으로 시작하며, 함수를 호출할 때마다 자동으로 호출 스택에 추가되고,

해당 코드가 모두 실행된 후, 호출 스택에서 자동으로 제거된다.

결국, 마찬가지로 빈 호출 스택으로 끝난다.​

https://developer.mozilla.org/ko/docs/Glossary/Call_stack

만약 이렇게 간단한 동작이 아닌

시간이 오래 걸리는 동작을 한다면 콜 스택은 어떻게 될까?

​

콜 스택이 멈추게 되고 이 상황을 블로킹(blocking)이라고 한다.

코드가 종료될 때까지 사용자가 클릭을 해도 반응이 없다.

​

---

​

Blocking

​

예시_ (하단 mdn 링크 참고)

 

 

function expensiveOperation() {
  for(let i = 0; i < 1000000; i++) {
    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
    ctx.beginPath();
    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
    ctx.fill()
  }
}

fillBtn.addEventListener('click', expensiveOperation);

alertBtn.addEventListener('click', () =>
  alert('You clicked me!')
);

Fill canvas 버튼을 클릭하게 되면 백만 개의 파란색 원이 채워진다.

하지만 너무 많으니 원이 아니라 배경이 파란색으로 채워지는 걸 볼 수 있다.

Click me for alert을 클릭하면 You clicked me!라는 메시지를 출력한다.

​

첫 번째 버튼을 클릭한 후 곧바로 두 번째 버튼을 클릭하면

경고 팝업이 바로 뜨지 않는 걸 확인할 수 있다.

​

즉. 첫 번째 버튼이 이벤트가 끝나기 전까지 다음 작동을 막아버리는 것이다!!!!

다시 처음으로 돌아가서

​

자바스크립트는 싱글 스레드(single threaded) 프로그래밍 언어이다.

싱글 스레드라는 건, 한 번에 하나의 call stack을 갖고 있고,

그 말은 다시 말해 한 번에 하나씩만 일 처리를 할 수 있다는 말

​

---

참고:

일반적인 비동기 프로그래밍 개념

이 문서에서는 비동기적 프로그래밍과 관련된 몇개의 개념들을 살펴볼 것입니다. 그리고 이것들이 웹브라우저와 자바스크립트에서 어떻게 보이는지도 살펴볼 것입니다. 이 모듈의 다른 문서들을 공부하기 전에, 이 문서에 나와있는 개념들을 먼저 학습하십시오.

developer.mozilla.org

​