동기/비동기와 Promise

동기와 비동기

동기 Synchronous
순차적으로 진행되어 선행코드가 완료되기 전까지는 후행코드가 시작되지 못하는 것. 싱글 스레드 언어의 작동 방식이다.

비동기 Asynchronous
하나의 작업이 진행되고 있는 중이어도 동시에 다른 작업이 진행될 수 있는 것. 멀티 스레드 언어의 작동 방식이다.

자바스크립트는 기본적으로 동기적으로 동작하는 싱글 스레드 언어이지만 비동기 작업도 가능하다.
자바스크립트에서 api 요청을 하는 fetch 함수는 동기적으로 작동하고 라이브러리 axios 함수는 비동기적으로 작동한다.

자바스크립트의 실행 환경 내부에는 콜스택 Call Stack과 콜백큐 Callback Queue라는 영역이 존재한다.

스택 Stack
후입선출-LIFO(Last In First Out)의 형태로, 가장 마지막에 들어온 함수, 데이터가 가장 먼저 처리되는 구조이다.

큐 Queue
선입선출-FIFO(First In First Out)의 형태로, 가장 처음 들어온 함수, 데이터가 가장 먼저 처리되는 구조이다.

기본적인 함수들은 모두 콜스택에 쌓이게 된다. 그리고 Web APIs를 포함한 비동기 함수들은 콜백큐에 쌓이게 된다. 콜스택에 쌓인 함수들은 나중에 쌓인 함수들이 먼저 실행되고 이전에 쌓인 함수들은 나중에 쌓인 함수들의 종료를 기다리게 된다. 콜백큐에 쌓인 비동기 함수들은 콜스택이 완전히 비워지게 되면 그 때 콜스택으로 하나씩 옮겨지고 실행된다.

Promise

Promise의 세가지 상태

• fulfilled : 요청 성공
• pending : 요청에 대한 응답을 기다리고 있는 상태
• rejected : 요청이 실패한 상태

const promiseTest = function() {
	return new Promise((resolver, reject) => {
    	resolver(100);	// 요청이 성공했을 때 resolver에 담아 보내줌. 괄호 안에 있는 값이 리턴된다.
        
        setTimeout(() => {
        	resolver(100);
        }, 2000);
	});
};

promiseTest().then();
상태가 pending이 아닌 fulfilled가 될 때까지 기다렸다가 받음

promiseTest().then((res) => {});
콜백함수로 결과 res를 받아올 수 있음

catch는 then과 함께 쓰이는데 fetch 요청 중에 에러가 발생하게 되면 에러 발생 원인이 뭔지, err 매개변수를 리턴해서 알려준다. 에러가 발생하지 않으면 catch로 넘어가지 않는다.

이런걸 배웠다 정도로만 기록하고 나중에 살 붙여서 정리를 다시 해봐야겠다.