[🐱 자바스크립트] 비동기(Asynchronous)

dsfasd·2022년 9월 25일

TIL 자바스크립트

자바스크립트 동기와 비동기

🍎 동기적 호출 -> 순서대로 실행

프로그램을 작성한 순서대로 한 줄씩 실행
따라서 클라이언트는 서버의 요청을 받음과 동시에 일을 수행

blocking 발생 : 요청에 대한 결과가 동시에 일어난다.
함수가 실행 중인 동안 다른 프로그램 및 작업을 수행할 수 없다.

🍎 비동기적 호출 -> 순서에 영향을 줌

-> 동기적 함수의 문제점의 대안으로 비동기 호출이 사용된다.

클라이언트는 서버에 요청을 둔 상태로 일을 계속 진행
서버의 응답을 받으면 응답에 대한 일을 수행

blocking 발생하지 않음 : 요청에 대한 결과가 동시에 일어나지 않는다.

이전 수행이 다음 수행을 blocking 하지 않으므로,
일의 동시 수행이 가능해져 동일한 일을 동기로 처리했을 때보다 작업 시간이 짧다.

비동기의 주요 사례

클릭시 이벤트 발생, 타이머 실행, 서버에 요청이 오면 응답 등
모두 순서에 영향을 주는 사례에 해당한다.

DOM Element의 이벤트 핸들러

마우스, 키보드 입력

페이지 로딩

타이머

타이머 API

애니메이션 API

서버에 자원 요청 및 응답

fetch API

AJAX (XHR)

💡 Node.js는 비동기적으로 작동하는 런타임에 해당한다.

이는 특히 웹에서 유용한데,

백그라운드 실행, 로딩 창 등의 작업

인터넷에서 서버로 요청을 보내고, 응답을 기다리는 작업

큰 용량의 파일을 로딩하는 작업

같은 상황에서 특히나 유용하다.

비동기 작동 방식

비동기 함수 전달 패턴에는 두 가지 방식이 있다.
callback 패턴과 이벤트 등록 패턴

1. callback 패턴

함수의 parameter로 콜백 함수를 넘겨준다면, 비동기 task를 실행하는 함수의 순서를 지켜나갈 수 있다.

예제

const printString = (string,callback) => {
  setTimeout(
    () => {
      console.log(string)
      callback()
    },
    Math.floor(Math.random() * 100)+1
  )
}
    
const printAll = () => {
    printString("A", () => {
      printString("B", () => {
        printString("C", () => {} )
      })
    })
  }
  printAll()