비동기적 프로그래밍

동기적(Synchronous)이란?

어떤 예시를 들어야 할지 고민하다가, 리그오브레전드 게임이 생각났다.

리그오브레전드(이하 LOL)에는 리 신 이라는 챔피언이 있다.

리 신의 여러 콤보 중 하나 다음과 같다.

  1. Q(음파/공명의 일격)를 적 챔피언에게 사용한다.
  2. 적중한 경우, R(용의 분노)을 사용한다.
  3. Q(음파/공명의 일격)를 사용한다.

위 세 단계의 과정을 거치는 콤보가 있다.

이 콤보는 먼저 Q를 사용해(시작) 적중시키고(완료) R을 사용한다.(시작, 완료)

그리고 Q를 사용해(시작) 적에게 피해를 입힌다.(완료)

위 콤보는 일련의 순서가 있고, 그 과정이 완료된 시점에 다음 과정이 시작됩니다. 이처럼 시작 시점과 완료 시점이 같은 상황을 동기적(Synchronous)이라고 부른다.

비동기적(Asynchronous)이란?

리 신을 조금 친다는 분들, 고수분들은 아래와 같은 콤보를 사용해 전투를 유리한 흐름으로 가져올 수 있다.

lee sin
Fig 1. 리 신의 궁플 콤보
  1. Q(음파/공명의 일격)를 적 챔피언에게 사용한다.
  2. 적중한 경우, Q(음파/공명의 일격)를 사용한다.
  3. R(용의 분노)을 사용한다.
  4. 점멸을 사용한다.

위 콤보는 일련의 순서가 있지만, 3단계가 두 번 수행된다.

위와 같이 콤보를 사용한다면, 리 신이 R(용의 분노)를 사용하기 위해 스킬을 준비하는 도중, 점멸을 사용해 적 챔피언의 뒤로 이동해 원하는 위치로 적 챔피언을 걷어찰 수 있다.

위 콤보와 다른 점은, R(용의 분노)가 끝나고 점멸을 사용한게 아닌, R이 실행되는 도중 점멸을 사용했고, 먼저 실행한 R보다 점멸이 완료되고, R이 완료되었다. 이 콤보는 비동기적(Asynchronous) 리 신 콤보 라고 할 수 있다.

이를 비동기적(Asynchronous)라고 부른다.

일련의 순서대로 진행이 아닌, 효율적인 작업을 위해 어떤 작업을 실행시키고 그 작업이 실행되는 동안 다른 작업을 수행 할 수 있다.

비동기적 프로그래밍의 주요 사례는 아래와 같다.

DOM Element의 이벤트 핸들러
  • 마우스, 키보드 입력 (onclick, onkeyup 등)
  • 페이지 로딩 (DOMContentLoaded 등)
타이머
  • 타이머 API (setTimeout 등)
  • 애니메이션 API (requestAnimationFrame)
서버에 자원 요청 및 응답
  • fetch API
  • AJAX (XHR)
YUNSU BAE

YUNSU BAE

주니어 웹 개발자 배윤수 입니다!

예술의 영역을 동경하고 있어요. 🧑‍🎨