docs: 스터디 42

docs/42_비동기 프로그래밍/고세종.md

@@ -0,0 +1,64 @@
+## 📕 오늘 공부한 내용 . ✒
+
+**오늘 읽은 범위** : 42장
+
+### 42. 비동기 프로그래밍
+
+자바스크립트는 코드의 실행시 스코프에 해당하는 실행 컨텍스트를 생성하고 푸쉬, 팝의 동작을 수행한다.<br>
+실행 컨텍스트 스택에 푸시 되는것을 함수의 실행으로 팝이 되는것을 실행의 종료로 동작한다.
+
+자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는데, 이는 함수를 실행할 수 있는 창구가 하나이며 동시에 2개 이상의 함수를 동시에 실행할 수 없다는 의미이다.<br>
+이처럼 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작하며, 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단)을 발생 시킨다.
+
+이렇게 블로킹 처리가 되어 다음 태스크가 대기하는 방식을 동기 처리라고 한다.
+
+반대로 현재 실행 중인 태스크가 종료 되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 한다.
+비동기 처리를 수행하는 비동기 함수는 전통적으로 콜백 패턴을 사용하지만, 이를 위한 콜백 패턴은 콜백 헬을 발생시켜 가독성을 저하시키고<br>
+비동기 처리중 발생한 에러의 예외 처리가 어렵다.
+
+비동기 처리 방식의 대표적인 예제는 타이머 함수인 `setTimeout, setInterval, HTTP 요청, 이벤트 핸들러` 가 있다.
+
+---
+
+## 이벤트 루프와 태스크 큐
+
+자바스크립트는 싱글 스레드로 한가지 태스크씩 처리하지만, 브라우저가 동작하는 것을 살펴보면 많은 태스크가 동시에 처리되는 것처럼 느껴진다.<br>
+이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프이다.
+
+이벤트 루프는 브라우저에 내장되어 있는 기능 중 하나이다.
+
+자바스크립트 엔진은 2개의 영역으로 구분이 가능하다.
+
+1. **콜스택**
+
+소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택이다.<br>
+함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다.<br>
+자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다.
+
+2. **힙**
+
+힙은 객체가 저장되는 메모리 공간이다.<br>
+콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.<br>
+메모리에 값을 저장하려면 먼저 값을 저장할 메모리 공간의 크기를 결정해야 한다. 객ㄱ체는 원시 값과는 달리 크기가 정해져 있지 않으므로 할당해야 할 메모리 공간의 크기를 런타임에 결정해야 한다.<br>
+따라서 객체가 저장되는 메모리 공간인 힙은 구조화 되어 있지 않다는 특징이 있다.
+
+**따라서 자바스크립트는 요청된 작업을 순차적으로 진행할 뿐이며, 비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Node.js가 담당한다.**
+
+이를 위해 브라우저 환경은 태스크 큐와 이벤트 루프를 제공한다.
+
+1. **태스크 큐**
+
+`setTimeout, setInterval`과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.<br>
+태스크 큐와는 별도로 프로미스의 후속 처리 메서드의 콜백함수가 일시적으로 보관되는 마이크로태스크 큐도 존재한다.
+
+2. **이벤트 루프**
+
+이벤트 루프는 콜 스택에 현재 실행중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기중인 함수가 있는지 반복해서 확인한다.<br>
+만약 콜 스택이 비어있고 태스크 큐에 대기중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기중인 함수를 콜 스택으로 이동 시킨다.<br>
+이때 콜 스택으로 이동한 함수는 실행된다. 즉, 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작한다.
+
+비동기 함수는 태스크 큐에 푸시되어 대기하다가 콜 스택이 비게 되면, 다시 말해 전역 코드 및 명시적으로 호출된 함수가 모두 종료되면 비로소 콜 스택에 푸시되어 실행 된다.<br>
+자바스크립트는 싱글 스레드 방식으로 동작한다. 이때 싱글스레드 방식으로 동작하는 것은 브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진이다.
+
+만약 모든 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로 동작한다면 자바스크립트는 비동기로 동작할 수 없다.<br>
+즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다.