2022-07-27
자바스크립트를 공부하다보니 자바스크립트와 다른언어들간의 특징들을 몇가지가 발견되어 그 중 구성동작원리에 대하여 간단히 정리해볼려고 한다
🚩다른 언어와 다르게 싱글스레드 비동기 처리를하는 JS
사실 지금까지 다른 언어들을 대체로 사용하여서 프로그래밍을 할때 우리는 흔히 위에서부터 아래로 동기적으로 코드가 처리되는 형태를 많이 상상하고 주로 그렇게 작동이 되어왔다.
하지만 자바스크립트는
비동기적!
따라서 순서대로 동작하지 않는다
대표적으로 우리는 setTimeout() 동작원리만 봐두 쉽게 알 수 있다.
<결과>
원래 그냥 동기적으로 생각할 경우 분명 콘솔에 찍히는 값이
어라?순서대로 찍혀야 하는데 싶을거다
하지만 앞서 알다시피 자바스크립트는 비동기적 처리를 한다는 것을 알고 있었으니 뭐 대충 결과는 예상하고 있었다.
원리는 모른체로..?
🔑그럼 대체 자바스크립트 엔진원리가 어떻게 돼?
자바스크립트엔진은 단일 호출 스택이 1개인 단일 스레드이다.
여기서 단일 스레드라는 의미는 쉽게 생각하면
한 번에 단 한개의 함수만 처리한다는 뜻!!
즉 그 뜻인 즉슨 setTimeOut에 걸리더라두 그 사이에 1초라는 시간동안 그 밑에 코드를 스택에 넣고 작동시킨다는 원리이다,,,
이 뜻이 무엇인가 자세히 설명을 하기 전에
🙋♂️Event Loop에 대하여 잠깐 설명!
앞서 말한 것처럼 자바스크립트 엔진은 단일 호출 스택이지만 실제로 이 자바스크립트를 구동하는 브라우저,Node.js 등에서는 여러 스레드를 사용하여 보여지게 된다.
근데 그 때 Js엔진과 이러한 브라우저 사이 환경을 상호작용하게 해주는게
바로
Event Loop!
그럼 다시 돌아와서 setTimeout()의 작동원리를 자세히 봐보자
위에 그림과 같이 자바스크립트엔진에서는
1.변수들을 할당해주는 Memory Heap
2.각 코드들을 담아서 실행해주는 Call Stack
이라는 부분으로 구성이 된다
예를 들자면
Memory Heap에는 마치 이와 같은 형태?
call stack에는 마치 이와 같은 형태?
그럼 저 위에 코드를 기준으로 설명해보겠다.
1.첫 번 째 console.log()코드는 call stack에 들어가고 나서 실행이 될것이다.
2. 두 번째 setTimeout()은 JS에서 엔진에서 처리되는 것이 아니기에 스택에서 제거되고 JS엔진에 외부인 Wep Api로 넘기게 된다.
3.콜백함수인 ()=>{}인 화살표함수 또한 Wep Api에게 넘기게 된다.
4.1000ms후 콜백으로 받았던 함수를 이제는 Task Queue로 넘겨 이제 Call Stack이 다 빌 때까지 기다린다
- Call stack이 비게 되면 Event Loop는 그걸 체크하고 다시 Call Stack에 해당 코드를 넣어주게 되므로써 실행이 되는 거다.
🙋♂️핵심
-비동기처리라는 점-즉 순서대로 실행된다는 보장이 없다
-단일스레드-콜스택이 하나라는 점
🔑교훈
따라서 만약에 연산이 10초이상 걸리는 한다면 우리의 비동기처리를 하거나 예를 들어
Event Listener 같은 것들은 대기를 하고 있을텐데
만약 버튼을 눌렀을지언정 Call stack이 10초이상수준의 연산을 하고 있으므로 버튼을 눌러도 바로 응답할 수가 없을 것이다,,,,
<이런게 바로 프리징현상의 원인>
따라서
너무 Stack을 쌓는 연산이 너무 고도로 복잡한 반복문을 넣거나
Queue가 복잡해지는 예를 하나 EventListener에서
버튼 하나에 이벤트 100개 10000개 이런식으로 달아버려도 큐에서 너무 많이 대기를 해버리므로 이 또한도,,, 좋지 않음을
깨닫자
