** 개인적으로 공부한 내용을 정리했습니다. 부족한 점이 있으면 알려주세요.
자바스크립트의 동작 원리와 동기, 비동기를 살짝 찍어먹어보려고 합니다.
1. Synchronous vs Asynchronous
프로그래밍에서 동기(Synchronous) 비동기(Asynchronous) 란 무엇일까요 ?
위 이미지가 동기, 비동기에 대한 표현입니다.
그림으로만 보면,
동기는 1 -> 2 -> 3 -> 4 순서대로 처리가 되는 느낌인 반면에,
비동기는 1, 2, 3, 4 가 동시에 실행되는 느낌입니다.
Synchronous (동기)
동기란 "요청한 작업의 완료에 따라 순차적으로 처리" 하는 것을 의미합니다.
저는 이 뒤에 이어지는 부가적인 설명이 헷갈렸어요.
Syn은 동시에 발생하다 라는 뜻의 약자입니다. 요청과 응답이 동시에 발생하면 동기적이라고 합니다.
... ??
동시에 발생하는건 그림처럼 비동기 아닌가 ? (처음든 내 생각)
알고보니 동기 에서 말하는 동시란, 요청과 응답이 같은 곳에서 이루어진다는 뜻으로 해석합니다.
같은 곳에서 이루어지는만큼 기다려야겠죠? 따라서 순차적으로 실행이 됩니다.
Javascript 는 이러한 동기적인 특징을 가진 언어입니다.
Asynchronous (비동기)
반대의 의미겠죠?
비동기란 "요청한 작업의 완료여부에 관계없이 처리" 하는 것을 의미합니다. 다른 작업의 완료를 고려하지 않고 다른 작업을 같이 진행합니다.
요청 후 응답이 언제 도착할지 예측이 힘든 특징이 있습니다.
2. Javascript engine
자바스크립트는 싱글 쓰레드(Single Thread) 이기 때문에 동기적으로 동작합니다.
Call Stack 영역에서 한번에 하나의 Task만 처리 가능한 것이 Javascript 싱글 쓰레드 엔진입니다.
Memory Heap
- 참조 타입(객체 등) 데이터가 관리됩니다.
- 변수나 상수가 할당되는 메모리 저장 영역입니다.
Call Stack
- 코드가 실행될 때 쌓이는 곳입니다. (
LIFO) - 원시 타입의 데이터가 관리됩니다.
실행 컨텍스트를 통해 함수, 함수의 동작을 제어합니다.
3. Works like Multi-Thread ?
분명히 자바스크립트는 싱글 쓰레드인데, 멀티 쓰레드 처럼 동작하는 것처럼 보입니다.
우리가 사용하는 웹 페이지는 대부분 자바스크립트로 이루어져 있는데, 우리는 모든 페이지에서 하염없이 기다리지는 않습니다.
예를 들어, 페이지 구석에서 실시간 채팅이 오르락 내리락해도 로그인과 로그아웃이 가능한 것처럼요.
위 이미지가 힌트입니다.
자바스크립트가 동작하는 환경(RunTime) 인 브라우저나 Node.js의 내부에 있는 Web APIs라는 멀티 쓰레드와 이들을 도와주는 Event Loop , Callback Queue와 함께 동작하기 때문입니다.
어렵다구요 ? 네 저도 사실 어려워요. 그렇지만 하나씩 살펴봅시다.
- Web APIs: 브라우저에서 제공하는 API,
dom event,setTimeout등 비동기 작업들을 지원합니다. - Callback Queue: 비동기 함수가 완료되면 넘겨받아서,
Call Stack에 보낼 준비를 합니다. - Event Loop:
Callback Queue와Call Stack을 계속 주시하며Call Stack이 비어있을 때Callback Queue에서 작업을 순서대로 넣어주는 작업을 처리합니다.
이렇듯 자바스크립트는 싱글 쓰레드이지만, 위의 요소들(Web APIs, Callback Queue, Event Loop 등)과 함께 런타임에서 동작하여 멀티 쓰레드처럼 동작을 합니다.
간단하게 자바스크립트의 동작원리와 동기, 비동기에 대해 살펴봤습니다.
