오늘 공부한 것

• 자바스크립트 런타임 환경
• async & await

async & await

ES7에 추가된 가장 최신 비동기 처리 패턴. 프로미스의 단점을 보완하고 가독성 좋은 코드를 작성할 수 있다!

async

• 함수 앞에 async를 붙이면 자동으로 Promise 객체를 리턴하는 비동기 처리 함수가 된다
• async 라는 키워드를 붙여준 함수의 리턴 값은 Promise의 resolve 결과값으로 반환된다

  async function helloAsync(){
    return "hello Async!";
  }
	helloAsync().then((res)=>{console.log(res)});
	// output : hello Async!

await

 function delay(ms){
  	return new Promise((resolve)=>{
      setTimeOut(()=>{
      	resolve();
      },ms)
    })
  }
// 이때 셋타임아웃 안 콜백함수 안에 resolve 호출 밖에 없으면
// 콜백 자체를 resolve 함수로 받아도 상관 없음
function delay(ms){
  	return new Promise((resolve)=>{
      setTimeOut(resolve,ms);
    })
  }

// 3초 딜레이 후에 helloAsync를 호출하고 싶을 때
async function helloAsync(){
	await delay(3000);
  	return "hello async!";
}

async function main(){
	const res = await helloAsync()
    console.log(res);
}

main();
// output : 3초 뒤 hello Async! 출력

• 말 그대로 프로미스가 처리될 때까지 함수 실행을 기다림.
• await 은 async 가 붙어있는 함수에서만 사용할 수 있다.

자바스크립트 런타임 환경

프로세스? 스레드?

프로세스란

• 운영 체제에서 독립적으로 실행 중인 하나의 애플리케이션을 프로세스라고 한다.
• 프로세스마다 자원들이 정해져있음

프로세스의 자원

• 코드 : 말 그대로 코드
• 스택 : 함수가 어떤 순서로 실행되는지에 대한 정보를 가지고 있음.
• 힙 : 동적으로 할당된 변수가 저장되는 공간
• 데이터 : 전역 변수, 스태틱 변수가 할당 됨

스레드란

• 프로그램 안에서 동시다발적으로 수행될 수 있는 일꾼

자바스크립트는 싱글스레드 언어

• 자바스크립트는 싱글스레드 언어이다. 즉 한 번에 하나의 작업만 처리할 수 있다. 애플리케이션에서 많은 태스크가 동시에 처리되는 것처럼(멀티스레드처럼) 보이기 위해 웹APIs와 이벤트루프를 사용한다.

자바스크립트 엔진의 구조

• 엔진의 주요 구성 요소는 메모리 힙과 콜 스택이 있다.

Heap

• 변수와 객체의 메모리 할당에 사용되는 비정형 메모리.

Call stack

• 코드 실행 순서에 따라 차곡차곡 쌓이는 자료구조
• LIFO(Last In First Out) 마지막에 들어온 것이 첫번째로 빠져나가게 된다.
• 콜스택의 각 단계를 스택 프레임이라고 한다.
  

이벤트루프

• 자바스크립트 엔진은 단순히 작업이 요청되면 콜스택을 이용해 순차적으로 실행할 뿐이다. 동시에 처리되는 것처럼 보이게 하는 비동기 요청 처리는 자바스크립트를 구동하는 브라우저가 담당한다.
  

• setTimeOut과 같은 함수를 처리하는 순간 함수는 콜스택에서 빠져나오고 웹API에서 카운트를 시작한다. 카운트가 끝나면, 셋타임아웃은 제거가 되고 웹APIs는 셋타임아웃 함수 안에 있던 콜백함수를 Callback queue(또는 태스크큐)로 옮겨놓는다.

• 여기서 등장하는 이벤트루프🙋‍♀️. 이벤트루프는 루프를 돌며 콜스택 내부에 실행중인 task가 있는지, 그리고 태스크큐에 task가 있는지를 반복적으로 확인한다. 콜스택이 함수 처리를 끝내고 안이 비게 되면, 태스크큐 안의 함수를 콜스택 내부로 옮기고 함수가 실행된다.

• 만약 태스크큐 안에 태스크가 여러 개 있을 경우, 가장 앞에서 대기하고 있는 태스크를 한 번에 하나씩 콜스택으로 옮겨서 실행한다.

근데 큐가 뭐임?

• 데이터를 집어넣을 수 있는 선형 자료형.
• FIFO(First In First Out). 처음에 들어온 함수가 제일 먼저 빠져나가게 된다.
  

비동기처리는 어렵다.. 프로미스, async, await 개념은 여러 문서 보면서 조금 더 파봐야겠음ㅠㅠ