비동기

blocking vs. non-blocking

blocking

• synchronous, 동기
• 하던 일을 멈추고 받아야 한다.
• 요청에 대한 결과가 동시에 일어난다. (즉시 응답) (synchronous 동기)

non-blocking

• asynchronous, 비동기
• 확인 후, 나중에 응답할 수 있다.
• 요청에 대한 결과가 동시에 일어나지 않는다.

---

비동기의 주요 사례

• DOM Element의 이벤트 핸들러

이벤트

• 무언가가 준비/완성 됐을 때
  (=> 이 때 이벤트 핸들러(콜백) 실행됨)

• event에 콜백함수 연결하는 경우 : 함수 자체를 연결. (❗️함수 실행을 연결하는 것이 아님❗️)

  function func(x) {
    console.log(x);
  }
  요소.addEventListener('click', func); // func()가 이님!

---

비동기 순서 제어하기

1. CallBack : 원하는 실행 시점에 다음 작업 써넣어 비동기를 제어
2. Promise : 콜백을 좀 더 보기 쉬운 형태로. (콜백지옥 방지)
3. async/await : 프로미스를 좀 더 보기 쉬운 형태로. (프로미스 헬 방지)