[TIL] 엘리스 SW 엔지니어 트랙 Day 018

📖 오늘 배운 내용 - 2021.11.17

• 동기 / 비동기
• 이벤트 루프
• Promise

 

📝 자바스크립트 제어 흐름

• 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리한다.

 

📕 자바스크립트 엔진

• 자바스크립트 엔진은 하나의 메인 스레드로 구성된다.
• 메인 스레드는 코드를 읽어 한 줄씩 실행한다.

 

📕 동기적 제어 흐름

• 동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다.
• 분기문, 반복문, 함수 호출 등이 동기적으로 실행된다. 코드의 흐름과 실제 제어 흐름이 동일하다.
• 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다.

 

📕 비동기적 제어 흐름

• 비동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것을 의미한다.
• 프로미스, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행된다.
• 코드 흐름과 실제 제어 흐름이 다르다.
• 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다.

let a = 10;

setTimeout(() => {
  console.log("a : ", a);
}, 3000);

console.log("끝");
// 끝
// a :  10

 

📝 이벤트 루프

• 자바스크립트 엔진은 비동기 처리를 제공하지 않는다.
  • 이벤트 루프는 JS 엔진 외부에 존재한다.
• 대신 비동기 코드는 정해진 함수를 제공하여 활용할 수 있다. => API
• 비동기 API의 예시로 setTimeout, XMLHttpRequest, fetch 등의 Web API가 있다.
• 이벤트 루프는 콜 스택이 비워질 때 task queue에서 콜백 함수를 꺼내 콜 스택에 넣는다.
• 이벤트 루프는 콜 스택이 비워졌을 때, task queue에서 콜백 함수가 들어온 순서대로 함수를 내보낸다. 단, queue는 여러 개가 존재하며 그중 우선순위가 높은 큐(Job queue 등)에서 나중에 들어온 콜백 함수가 실행될 수 있다.

// 타이머 비동기 처리
setTimeout(() => {
  console.log("타이머 끝");
}, 1000);

setInterval(() => {
  console.log("인터벌 타이머");
}, 1000);

// 네트워크 처리
fetch('https://google.com')
  .then(() => console.log("네트워크 요청 성공!"))
  .catch(() => console.log("네트워크 요청 실패"))

 

📕 비동기 처리 모델

• 비동기 코드를 처리하는 모듈은 자바스크립트 엔진 외부에 있다.
• event loop, task queue, job queue 등으로 구성된다.
• API 모듈은 비동기 요청을 처리 후 task queue에 콜백 함수를 넣는다.
• JS 엔진은 콜 스택이 비워지면 task queue의 콜백 함수를 실행한다.

 

📝 Promise

[JavaScript] 자바스크립트 Promise

 

💡 오늘 깨달은 것

• 비동기, 이벤트 루프를 공부하면서 자바스크립트가 어떻게 동작이 되는지에 대해 알 수 있었던 시간이었다.
• 오늘 분량이랑 문제가 적어서 비교적 여유롭게 공부할 수 있었다. 지난주가 진짜 어렵고 시간 부족했었음 ㅠㅠㅠㅠ 여유 생겼을 때 클로저 다시 복습하러 가야지....!!