I studied this today

• 비동기 호출
• callback
• promies
• commonJs

비동기 호출

특정 코드의 연산이 끝날떄까지 실행을 멈추지 않고, 순차적으로 다음 코드를 먼저 실행하는 자바스크립트의 특성

동기 VS 비동기

• 동기: 요청을 보내고 해당 응답을 받아야 그 다음 동작실행 ex)은행
• 비동기: 요청을 보내고 응답과 관계없이 다음 동작실행 ex)카페

클라이언트에서 서버에 데이터를 요청할떄, 서버가 그 요청에 대한 응답을 언제 줄지 몰라 마냥 기다릴 수 없어 비동기처리가 필요 (즉시 처리하지 못하는 이벤트들을 Web API를 이용하여 콜백큐로 보내서 이벤트루프를 통해 콜스택이 비었을 경우 실행)

callback

"콜백함수는 자바스크립트의 비동기성을 표현하고 관리하는 가장 일반적인 기법이자 가장 기본적인 비동기 패턴이다.

promies

비동기 방식으로 코드를 짤때 콜백 지옥을 해결할 수 있고, 직관적이고, 코드를 쫌 더 효율적이게 짤 수 있는 내장되어 있는 오브젝트이다.

1. promise로 구현된 비동기 처리 함수는
   콜백을 예측 가능한 패턴으로 사용하도록 도와주며,
   콜백함수 안에서 생성된 프로미스 객체를 활용해 콜백함수가 성공,실패,오류 각각의 경우에 따라 후속 처리를 할 수 있다.

2. 순차적이지 않는 비동기함수의 실행순서를 제어할 수 있게 도와준다.

3. 콜백패턴에 비해 코드 가독성이 좋고 반환된 결과물을 사용하기 편하다.

state

pending(대기) -> fulfilled(완료) or rejected(에러)

1. pending(비동기 처리 로직이 아직 완료되지 않는 상태)
   new Promise로 Promise가 생성된 직후부터 resolve나 reject가 호출되기 전까지의 순간을 pending 이라고 합니다.

2. fullfilled(처리가 완료되어 프로미스가 결과값을 반환한 상태)
   만약 비동기 처리함수 값이 성공이라면 resolve 메소드가 호출되고,resolve 메소드의 인자로 설정한, 비동기 함수의 결과값이 전달된다. 이 결과값은 then을 통해 후속 처리된다.

3. Rejected(처리가 실패하거나 오류가 발생한 상태)

producer / consumers

producer

function getData() {
  return new Promise(function(resolve, reject) {
    const data = 100;
      if (!data) {
      reject(throw Error("Request is failed"));
      } else {
      resolve(data);
      }  
  });
}
promise는 resolve(해결), reject(실패) 파라미터를 받는다.
resolve는 성공적인 데이터를 넘겨고, reject는 보통 오류를 내보낸다.
새로운 promise를 만드는순간 executor라는 함수를 실행한다.

consumers: then, catch, finally

주의: 체인닝 방식을 쓸떄 리턴을 계속해줘야한다.

getData()
  .then(data => console.log(data))
   !! data엔 promise가 정상적으로 수행이 되어서 resolve 콜백함수에 전달된 값이 들어옴
   
  .catch(error => console.log(error)
  reject 콜백함수에 전달된 값이 들어옴 보통(오류)
	
  .finally(data => console.log(data))
  catch에서 중단이 되어도 상관없이 실행