자바스크립트를 사용할 때
자바스크립트로 코드를 짜고 실행되면서 여러가지 의문점을 느끼게 되는데 의문점을 느끼게 되는 코드의 예시로 가장 많이 표현되는 예시는 다음과 같다.
console.log(1+1);
setTimeout(function(){console.log(2+2);},1000);
console.log(3+3);
//결과값 : 2 6 4뭔가 잘못된것 같다. 일반적인 상식으로는 2, 1초 기다렸다가 4 그다음 6 이런식으로 콘솔에 찍혀야 하는데 이 언어는 요상한 방법으로 동작하는듯하다.
누가 자바스크립트를 실행시켜주는가?
자바스크립트가 어떻게 동작하는지 알아보기 전에, 누가 이걸 동작시켜주는지 알아야 할 필요가 있다.
자바스크립트 엔진 <- 이놈이 실행시켜준다.
브라우저안에 장착되어있는 자바스크립트 엔진이 자바스크립트를 실행시켜준다. 크롬은 V8엔진으로 자바스크립트를 실행해준다.
자바스크립트 엔진의 구조
자바스크립트 엔진의 구성요소와 각각의 역할은 다음과 같다.
메모리 힙 - 변수 선언등 메모리 할당이 발생하는 위치
콜 스택(호출스택) - 코드가 실행될 때 스택 프레임이 있는 위치
이벤트 루프 - 콜 스택과 콜백 큐를 모니터링하여 큐에서 첫번째 이벤트를 가져와 콜 스택에 푸시하고, 콜 스택은 효과적으로 이벤트를 실행
콜백 큐 - 비동기 처리가 끝난 후 실행되어야 할 콜백함수가 차례로 할당된다.
WebAPI - 웹에서 사용하는 기능을 제공하며 자바스크립트 엔진과 다른 멀티 스레드를 사용하여 비동기 처리를 담당한다.
밑에 사이트는 자바스크립트 코드를 올리면 각각의 구성요소가 어떻게 동작하는지 보여주는 멋진 사이트이다.
자바스크립트 코드 올리면 동작하는 과정 보여주는 멋진 사이트
왜 이런식으로 동작하는가?
자바스크립트가 싱글스레드 방식 언어이기 때문이다.
싱글스레드 - 한번에 한 작업만 수행한다.
자바스크립트는 왜 싱글 스레드 방식으로 동작할까?
자바스크립트가 처음 나오게 된 이유가 웹 페이지의 보조적인 기능을 수행하려고 만들어진 언어이기 때문에 가벼우면서 빠른실행을 지향한다. 따라서 싱글스레드 방식으로 만들어지게 되었다.
자바스크립트로 복잡한 연산을 하면 안되는 이유
위와 같은 이유들로 자바스크립트로 오랜시간이 걸리는 연산을 짜게 되면, 한번에 여러가지의 작업을 수행할 수 없는 자바스크립트의 특성으로 웹페이지 요청시간이 오래걸리게 되고, 사용자로 하여금 불편함을 초래하게 된다.
동기 작동방식과 비동기 작동방식
자바스크립트는 싱글 스레드 언어이고 위에서 아래로 차례차례 동작한다. 이런 방식을 동기 작동방식이라고 하고
메인스레드가 작업을 다른 곳에 인가하여 처리하고, 그 작업이 완료되면 콜백함수를 받아서 실행하는 방식으로, 작업을 백그라운드에 요청, 처리하여 멀티로 작업을 동시에 처리하는 방식이다.
자바스크립트는 동기방식이지만, 엔진에서 제공하는 비동기 영역 WebAPI와 콜백 큐를 이용하여 비동기 작업이 가능하다.
참고문헌
1. 진짜! 쉽게 알아보는 자바스크립트 동작원리
2. 쌉고수 아저씨가 알려주는 자바스크립트 동작원리1
3. 쌉고수 아저씨가 알려주는 자바스크립트 동작원리2
4. 자바스크립트의 핵심 '비동기' 완벽 이해
5. [JavaScript] 비동기 작업의 원리 (JavaScript 엔진, Web API, Task Queue, Event Loop)
