JavaScript 디자인 패턴 학습, 제 2판

9장. 비동기 프로그래밍 패턴

이 작품은 AI를 사용하여 번역되었습니다. 여러분의 피드백과 의견을 환영합니다: [e-mail]

비동기 JavaScript 프로그래밍( )을 사용하면 브라우저가 이벤트에 응답하고 이러한 이벤트를 처리하는 다른 코드를 실행하면서 백그라운드에서 장기 실행 작업을 실행할 수 있습니다. 비동기 프로그래밍은 JavaScript에서 비교적 새로운 기능이며, 이 책의 초판이 출간될 당시에는 이를 지원하는 구문이 없었습니다.

promise, async, await 같은 JavaScript 개념은 메인 스레드를 차단하지 않고 코드를 더 깔끔하고 읽기 쉽게 만들어 줍니다. async 함수는 2016년에 ES7의 일부로 도입되어 현재 모든 브라우저에서 지원되고 있습니다. 이러한 기능을 사용하여 애플리케이션 흐름을 구성하는 몇 가지 패턴을 살펴보겠습니다.

비동기 프로그래밍

JavaScript에서 동기식 코드는 블로킹 방식으로 실행되며, 이는 코드가 한 번에 한 문씩 순차적으로 실행됨을 의미합니다. 다음 코드는 현재 문 실행이 완료된 후에만 실행할 수 있습니다. 동기식 함수를 호출하면 해당 함수 내부의 코드가 처음부터 끝까지 실행된 후 제어가 호출자에게 반환됩니다.

반면 비동기 코드는 비차단 방식으로 실행되므로 현재 실행 중인 코드가 대기 중인 동안 JavaScript 엔진이 백그라운드에서 이 코드를 실행하도록 전환할 수 있습니다. 비동기 함수를 호출하면 함수 내부의 코드가 백그라운드에서 실행되고 컨트롤은 호출자에게 즉시 반환됩니다.

다음은 JavaScript의 동기식 코드 예시입니다:

function synchronousFunction() {
  // do something
}

synchronousFunction();
// the code inside the function is executed before this line

다음은 JavaScript의 비동기 코드 예시입니다:

function asynchronousFunction() {
  // do something
}

asynchronousFunction();
// the code inside the function is executed in the background
// while control returns to this line

일반적으로 비동기 코드를 사용하면 나머지 코드를 차단하지 않고 장기 실행 작업을 수행할 수 있습니다. 비동기 코드는 네트워크 요청, 데이터베이스 읽기 또는 쓰기, 기타 유형의 입출력(I/O) 작업을 수행할 때 적합합니다.

async , await, promise 와 같은 언어 기능을 사용하면 JavaScript에서 비동기 코드를 더 쉽게 작성할 수 있습니다. 이러한 기능을 사용하면 비동기 코드를 동기 코드처럼 보이고 동작하는 방식으로 작성하여 읽고 이해하기 쉽게 만들 수 있습니다.

콜백, 약속, async/await 의 차이점을 간략하게 살펴본 후 각각에 대해 더 자세히 알아보겠습니다:

// using ...