비동기적 프로그래밍
동기적(Synchronous)이란?
어떤 예시를 들어야 할지 고민하다가, 리그오브레전드 게임이 생각났다.
리그오브레전드(이하 LOL)에는 리 신 이라는 챔피언이 있다.
이 리 신
의 여러 콤보 중 하나 다음과 같다.
- Q(음파/공명의 일격)를 적 챔피언에게 사용한다.
- 적중한 경우, R(용의 분노)을 사용한다.
- Q(음파/공명의 일격)를 사용한다.
위 세 단계의 과정을 거치는 콤보가 있다.
이 콤보는 먼저 Q를 사용해(시작) 적중시키고(완료) R을 사용한다.(시작, 완료)
그리고 Q를 사용해(시작) 적에게 피해를 입힌다.(완료)
위 콤보는 일련의 순서가 있고, 그 과정이 완료된 시점에 다음 과정이 시작됩니다. 이처럼 시작 시점과 완료 시점이 같은 상황을 동기적(Synchronous)이라고 부른다.
비동기적(Asynchronous)이란?
리 신을 조금 친다는 분들, 고수분들은 아래와 같은 콤보를 사용해 전투를 유리한 흐름으로 가져올 수 있다.
- Q(음파/공명의 일격)를 적 챔피언에게 사용한다.
- 적중한 경우, Q(음파/공명의 일격)를 사용한다.
- R(용의 분노)을 사용한다.
- 점멸을 사용한다.
위 콤보는 일련의 순서가 있지만, 3단계가 두 번 수행된다.
위와 같이 콤보를 사용한다면, 리 신이 R(용의 분노)를 사용하기 위해 스킬을 준비하는 도중, 점멸을 사용해 적 챔피언의 뒤로 이동해 원하는 위치로 적 챔피언을 걷어찰 수 있다.
위 콤보와 다른 점은, R(용의 분노)가 끝나고 점멸을 사용한게 아닌, R이 실행되는 도중 점멸을 사용했고, 먼저 실행한 R보다 점멸이 완료되고, R이 완료되었다. 이 콤보는 비동기적(Asynchronous) 리 신
콤보 라고 할 수 있다.
이를 비동기적(Asynchronous)라고 부른다.
일련의 순서대로 진행이 아닌, 효율적인 작업을 위해 어떤 작업을 실행시키고 그 작업이 실행되는 동안 다른 작업을 수행 할 수 있다.
비동기적 프로그래밍의 주요 사례는 아래와 같다.
DOM Element의 이벤트 핸들러
- 마우스, 키보드 입력 (
onclick
,onkeyup
등) - 페이지 로딩 (
DOMContentLoaded
등)
타이머
- 타이머 API (
setTimeout
등) - 애니메이션 API (
requestAnimationFrame
)
서버에 자원 요청 및 응답
fetch API
AJAX
(XHR)