동기식(Synchronous)과 비동기식(Asynchronous)

어떠한 실행 순서를 가지는에 따라 동기와 비동기로 나눌 수 있다.

동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을 의미하며, 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행할 수 있는 방식을 의미한다.

동기식

먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식이다. 위 그림처럼 직렬로 배치되어 실행되며 작업 실행의 순서가 확실히 정해져 있는 것을 동기식 처리라 부른다.

비동기식

동기식과는 다르게 먼저 시작된 작업의 완료 여부와는 상관없이 새로운 작업을 진행하는 방식이다. 위 그림처럼 작업이 병렬로 배치되어 실행되며 작업의 순서가 확실하지 않아 나중에 시작된 작업이 먼저 끝나는 경우도 발생한다. 이와 같은 방식을 비동기식 처리라 부른다

자바스크립트 비동기 처리

1. 콜백 함수 사용
2. Promise
3. Promise를 활용한 async/await

자바스크립트는 기본적으로 비동기적으로 동작을 한다. 때로는 비동기식으로 동적하는 부분이 동기적으로 동작해야 하는 경우가 필요할 때가 있다. 이때, 비동기식 동작이 동기식으로 동작하도록 하는 것을 비동기 처리 라고 한다.

비동기의 주요 사례

• DOM Element의 이벤트 핸들러
  마우스, 키보드 입력(click, keydown … ), 페이지 로딩(DOMContentLoaded …)

• 타이머
  타이머 API(setTimeout … ), 애니메이션 API(requestAnimationFrame)

• 서버에 자원 요청 및 응답
  fetch API, AJAX(XHR)

🔗 ref :

• 자바스크립트에서 비동기 처리 다루기
• 동기식 (Synchronous) / 비동기식 (Asynchronous) 이란?