[JS / Node] 동기 vs 비동기

키워드 : 동기, 비동기, callback, blocking, non-blocking, Promise, Promise chaining, Promise All, Async Await

---

동기 (Synchronous)

- 요청에 대한 결과가 즉시 발생.

- 시작 시점과 완료 시점이 동일.

- blocking 이 동반 : 하나의 작업이 완료되어야 다음 작업이 시작될 수 있음. 

- 순차적으로 진행.

 

비동기 (Asynchronous)

- 요청에 대한 결과가 즉시 발생하지 않음.

- non-blocking : 하나의 작업이 완료되지 않아도 다음 작업 시작이 가능.

- 일종의 분업화 개념과 비슷

 

 

---

비동기 함수 전달 패턴

1. callback 패턴

2. 이벤트 등록 패턴

 

비동기의 주요 사례

1. DOM Element의 이벤트 핸들러
   1. 마우스, 키보드 입력(click, keydown 등)
   2. 페이지 로딩
2. 타이머
   1. 타이머 API (setTimeout ...)
   2. 애니메이션 API
3. 서버에 자원 요청 및 응답
   1. fetch API
   2. AJAX(XHR)