4주차 학습 내용 정리

2022.02.08 - 2022.02.12
몰랐던 것 위주로 정리

 - javascript(심화)
 	- 비동기
    - 이벤트 루프
    - Promise
    - async/ await
    - http, rest API
    - fetch API

🚩 Javscript . . .

1. 자바스크립트 제어 흐름

• Javascript는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리함

• Javascript 엔진은 하나의 메인 스레드로 구성 (= 싱글 스레드)

  관련 내용 : 자바스크립트는 왜 싱글 쓰레드일까?

• 조건문, 반복문, 함수 호출 등은 동기적으로 실행

• Promise, Callback 호출 함수 등은 비동기적으로 실행

🧐 동기 vs 비동기

• 동기적으로 실행한다? → 한 동작이 수행을 완료할 때까지 기다렸다가 끝나면 다음 동작을 수행하는 실행 방식
  코드와 실제 제어 흐름이 동일

• 비동기적으로 실행한다? → 동작이 끝나기 전에 다음 동작을 수행하는 실행 방식
  코드와 실제 제어 흐름이 상이
  비동기 작업을 기다리는 동안 메인 스레드는 다른 작업 처리

2. 이벤트 루프

• Javascript 엔진은 비동기 처리를 제공하지 않음!!
• But!! 비동기 처리 역할을 하는 함수 존재 → 비동기 API
• 종류 : setTimeout, XMLHttpRequest, fetch 등의 Web API / 파일 처리, 암호화 API (node)

setTimeout(()=>{
	console.log('1초 뒤 실행');
}, 1000)

console.log('그다음 실행?');

// 그다음 실행?
// 1초 뒤 실행

• 비동기 처리 모듈은 Javascript 엔진 외부에 존재

• 이벤트 루프, 태스크 큐(Task queue) , 잡 큐(Job queue) 등으로 구성

• 이벤트 루프 : 브라우저 혹은 node와 같이 자바스크립트가 구동되는 환경과 자바스크립트 사이에 상호 연동 하기 위한 장치
  (비동기 동작을 처리하기 위한 장치)
  javascript and event-loop

• 태스크 큐(Task Queue) : 콜백 함수 혹은 비동기 함수들이 들어가는 곳, 콜스택이 비워지는 경우 FIFO 방식으로 태스크 큐의 자원들이 콜스택으로 들어감!

• 잡 큐(Job Queue) : 주로 Promise가 들어가며 태스크 큐보다 우선권을 가지고 있음
  태스크 큐는 콜스택과 관련이 있다면 잡 큐는 execution context 와 관련이 있음!
  (확인 필요) execution context stack이 다 비워지면 잡 큐의 자원을 수행