모던 Deep Dive를 읽는 도중 동기식/비동기식 차이가 너무 헷갈려서 내가 다시 정리하는 글!!
Javascript는 동기식 언어!!
JS는 한 번에 하나의 작업을 수행한다.
한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다.
(마치 음식점에서 키오스크를 이용하여 한 사람씩 결제하는 방식과 유사)
이러한 동작을 단일 스레드(싱글 스레드), 동기라고 부른다.
예시
console.log("jin")
console.log("hyeonguk")이렇게 콘솔을 두 개 입력하고, 출력 결과를 보면
순서대로 "jin" "hyeonguk"가 찍히는 것을 볼 수 있다.
왜 그렇게 나오는거지?
자바스크립트에는 Memory Heap과 Call Stack이 있는데 이 두가지는
자바스크립트의 엔진의 주요 구성 요소이다.
Memory Heap?
변수와 객체의 메모리 할당을 담당하는 곳!
Call Stack?
함수가 호출이 되면 쌓이는 곳! (대신 함수가 쌓이는 순서는 반대로 실행)
JS에서 함수를 호출하면 Call stack이라는 곳에 호출 순서대로 쌓인다
그리고 Stack은 맨 마지막에 호출된 함수가 맨 먼저 반환된다
이 구조를 LIFO(Last-in Frist-Out)이라고 부른다.
이렇게 순서대로 "hello"가 호출되면서 Call Stack에 쌓이고, "hello"를 반환하면서 Call stack에서 사라진다.
이러한 방식으로 계속 진행되기 때문에 콘솔에 순서대로 찍히는것!
그렇다면 비동기 처리 방식은 뭐야?
비동기란 ?
어떠한 요청을 보내면 그 요청이 끝날때까지 기다리는 것이 아닌
응답에 관계없이 바로 다음 동작이 실행되는 방식!!
자바스크립트는 싱글 스레드 프로그래밍 언어이기 때문에 한 번에 한 가지 일만 할 수 있고
즉, 비동기 처리가 필수적.
비동기처리가 왜 필요한데?
예를들어 웹 페이지 로딩되거나, 어떠한 동작(Event)가 하나당 30초 이상이 걸린다고 생각을 하면
이 웹 페이지는 동작이 끝날 때까지 화면에 나타나지 않거나, 다음 동작을 수행하는데 지장을 주게 된다.
또한 사용자들은 느리고, 응답이 없는 웹 사이트를 좋아하지 않는다!!
그렇기 때문에 JS에서 웹 사이트가 동작할 때는, 비동기적으로 동작할 수 있어야 한다!
동기적, 비동기적의 차이를 그림으로 설명!
그런데 브라우저 위에서 JS가 어떻게 화면을 전환하며 HTTP 요청이나 여러 이벤트를 동시에 동작할 수 있는가?
이유는 바로 JS의 실행 환경(Runtime)과 관련이 있다.
브라우저에서는 JS 엔진 만으로 동작을 하지 않는데,
브라우저에서의 JS 실행 환경에서는 JS 엔진 자체가 제공하지 않는 일부 기능인
DOM 조작, AJAX와 같은 비동기 처리를 위한 Web API를 제공!!
또한 이를 제어하기 위한 이벤트 루프, 이벤트 큐(Callback Queue / task Queue)가 존재한다
이벤트 루프란?
Call Stack과 Task Queue를 주시하는 작은 파트를 말한다.
Stack이 비어있으면 task queue의 첫 번째 call back부터 stack에 쌓아 효과적으로 실행할 수 있게 해준다!
요약
동기 동작 원리
-
코드가 실행되면 순서대로 Call Stack에 함수가 쌓인다. (Push)
-
쌓인 반대 순서로 함수가 실행! (LIFO)
-
실행이 된 함수는 Call Stack에서 제거된다 (POP)
비동기 동작 원리
-
Call Stack에서 비동기 함수가 호출 시 Stack에 먼저 쌓였다가
Web API로 이동한 후 해당 함수가 등록이 되고, Call Stack에서 사라짐! -
Web API에서 비동기 함수의 이벤트가 발생 시, 해당 콜백 함수는 Callback Queue에 push(이동) 된다.
-
Call Stack이 비어있는지 이벤트 루프가 확인을 하는데 비어있으면, Call Stack에 Callback Queue에 있는 콜백 함수를 넘겨준다.(push)
-
Call satck에 들어온 함수는 실행이 되고, 실행이 끝나면 Call Stack에서 사라진다.
결론
즉! JS는 싱글 스레드인 동기적인 언어이며,
JS는 브라우저 위에서 별도의 API를 통해 비동기 처리를 한다!
참고자료
자바스크립트 - 동기? 비동기 ? : https://ljtaek2.tistory.com/142
자바스크립트의 동작 원리 : https://ljtaek2.tistory.com/129?category=897337
