비동기

동기 vs 비동기
동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작 실행(실행 순서 확실)
비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행(실행 순서가 확실하지 않음)

비동기 함수란?
자바스크립트는 싱글스레드이기 때문에 한번에 하나의 작업만 수행 가능.
여러가지 이벤트를 처리할때에 동기식으로 처리하게 된다면 하나의 이벤트라 모두 처리될 때까지 다른 업무를 수행하지 못하는 단점 존재. 이를 해결하기 위해 비동기가 필요.
즉시 처리하지 못하는 이벤트들을 web api로 보내 콜스택이 비었을때 먼저 처리된 이벤트들을 줄세워 다시 이벤트 큐에 줄세워 놓게되는데 이를 이벤트 루프라 부른다. web api로 들어오는 순서는 중요하지 않고, 먼저 처리되는냐가 중요하다.
자바스크립트는 즉시 처리 못하는 이벤트들을 이벤트 루프에 모아두고, 먼저 처리해야하는 이벤트를 실행함.

비동기 처리란?
특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 작업
즉, 특정 코드의 처리가 끝나기 전에 다음 코드를 실행할 수 있는 것.

사용 이유?
서버 데이터 요청시에 응답을 기다리지 않고 다음 작업을 수행하기 위해. 동기식 처리를 하게 되면 응답이 올때까지 대기시간이 길어 작업 시간이 길어짐.

비동기 방식 사용시 문제점?
로직이 끝났을 때 원하는 동작을 수행하기 위해 콜백함수를 사용하는데, 이때 콜백 지옥 발생.
가독성도 떨어지고 로직 변경하기 어려움.

콜백 지옥 해결 방법?
1. Promise 사용

getData(productInfo)
.then(priceInfo)
.then(display);

var productInfo = {
   id : 1,
   name : 'test'
}

function priceInfo(){
  return new Promise({
  });
}

function display(){
  return new Promise({
  ..//
  });
}

2. Async 사용.
   비동기 처리할 메서드는 promise객체를 반환해여 await 동작 가능.

async function getData(){
  try{
    var user = await fetchUser();
    if(user.id){
       var todo = await fetchTodo();
    }
  } catch(e){
  }  
}