JavaScript의 비동기 작업: 이벤트 루프-JS 튜토리얼-php.cn

소개
JavaScript는 기본적으로 동기식입니다
동기식 및 비동기식 작업
이벤트 루프
작동 원리
이벤트 루프의 중요성
결론

소개

이렇게 생각해 보세요. 서버에서 데이터를 가져오고, 사용자 인터페이스를 업데이트하고, 모든 사용자 작업에 실시간으로 응답해야 하는 웹 애플리케이션을 개발했지만 코드가 문제가 될지 걱정됩니다. 이러한 작업을 효율적으로 처리할 수 있습니다. 걱정할 필요가 없습니다. 여기서 이벤트 루프가 시작됩니다.

이 기사에서는 이벤트 루프의 작동 방식, JavaScript의 동기 작업과 비동기 작업의 차이점, 필수 비차단 아키텍처로서 이벤트 루프의 중요성에 대해 설명하겠습니다.

Javascript는 기본적으로 동기식입니다.

기본적으로 Javascript는 동기식이며 코드는 위에서 아래로 순차적으로 읽혀집니다. JS는 단일 스레드이므로 각 작업은 다음 작업을 진행하기 전에 이전 작업이 완료될 때까지 기다려야 합니다. 이는 각 코드 줄이 한 번에 하나씩 처리되고 주어진 순간에 하나의 작업/함수만 실행된다는 것을 의미합니다.

Asynchronous Operations in JavaScript: The Event Loop

JavaScript에서는 여러 코드 조각을 병렬로 실행할 수 있는 방법이 없으며, 핵심이 동기식이며 단일 스레드인 언어에서 병렬 처리를 수행하려는 시도는 야심적입니다. JavaScript의 동기적 특성을 이해하면 웹 애플리케이션이 사용자 상호 작용에 응답하고 작업을 처리하는 방식을 이해하는 데 도움이 됩니다.


function greet(name) {
    return `Hello, ${name}!`;
}

const greeting = greet("Deb");
console.log(greeting);

로그인 후 복사

이 예에서 Javascript는 작성된 순서대로 코드를 실행합니다. 'greet' 함수는 'Deb' 인수를 사용하여 호출됩니다. 그런 다음 함수는 콘솔에 기록되는 인사말 문자열을 반환합니다.

출력:


Hello, Deb!

로그인 후 복사

각 줄은 실행되기 전에 이전 줄이 끝날 때까지 기다립니다. 따라서 해당 기능이 완료되어야 결과가 '인사말'에 할당될 수 있습니다.

동기식 및 비동기식 작업

Asynchronous Operations in JavaScript: The Event Loop

이벤트 루프가 무엇인지 알아보기 전에 비동기 작업이 무엇인지, JavaScript에서 동기 작업과 비동기 작업의 차이점에 대해 조금 살펴보겠습니다. 비동기 작업은 프로그램 흐름과 독립적으로 실행되는 활동입니다.

앞서 설명한 것처럼 Javascript는 기본적으로 동기식이며 동기식 코드는 다음 작업이 시작되기 전에 각 작업/함수가 완료되어야 하는 차단 동작을 생성합니다.

반면, 비동기 작업은 후속 작업의 실행을 차단하지 않으며 자바스크립트가 특정 비동기 작업이 완료되기를 기다리는 동안 다른 작업을 수행할 수 있도록 합니다. 간단히 말해서 함수를 비동기(async)로 선언하면 함수에 완료하는 데 시간이 필요한 코드가 있고 동기 코드가 먼저 실행되는 동안 이러한 함수가 연기된다는 의미입니다.

차단이 없기 때문에 이전 비동기 코드를 완료하지 않고도 다음 동기 코드를 실행할 수 있으며 실행할 준비가 된 모든 비동기 코드는 이벤트 대기열에 대기하게 됩니다.


// Synchronous code
console.log("Step 1");
console.log("Step 2");

로그인 후 복사

동기 코드는 한 줄씩 실행된다는 점을 기억하세요. 여기서 JavaScript는 작성된 순서대로 명령문을 실행합니다.

출력:


Step 1
Step 2

로그인 후 복사

반면 비동기 코드를 사용하면 작업이 완료될 때까지 기다리는 동안 JavaScript가 계속 실행될 수 있습니다.


// Asynchronous code
console.log("1st Function");

setTimeout{function(){ // WEB API
  console.log("2nd Function");
},2000);

console.log("3rd Function");

로그인 후 복사

출력:


1st Function
3rd Function
2nd Function

로그인 후 복사

첫 번째와 세 번째 함수는 동기식이므로 먼저 실행되고 두 번째 함수는 호출 스택에서 제거되어 웹 API에 의해 처리됩니다. 웹 API는 이벤트 큐에 넣기 전에 2000ms를 기다리도록 비동기적으로 명령합니다. 이후 이벤트 루프에 의해 빈 호출 스택에 다시 배치되고 최종적으로 실행됩니다.

이벤트 루프

가장 간단한 정의에서 이벤트 루프는 비동기 이벤트를 동기적으로 처리하는 방법입니다.

더 정교하게 정의하면 이벤트 루프는 필요할 때 비동기 작업을 실행할 수 있도록 하는 Javascript 런타임에서 지속적으로 실행되는 코드 루프입니다. 즉, JavaScript의 제한 설계를 통해 많은 작업을 효율적으로 처리할 수 있습니다.

실행할 특정 JavaScript 작업이 있을 때까지 회전하며 코드 배경에 유지됩니다. 예를 들어 클릭 이벤트 핸들러에서 연결된 코드가 있는 버튼을 클릭하거나 외부 파일을 로드할 때 이벤트 루프는 JavaScript 런타임 내부에 남아 필요할 때 JavaScript 코드를 실행합니다.

이것이 의미하는 바는 JavaScript가 단일 스레드이지만 이벤트 루프를 통해 JavaScript가 API에 작업을 오프로드하고 가능할 때 들어오는 이벤트를 처리함으로써 작업을 비동기적으로 실행할 수 있는 것처럼 보이게 한다는 것입니다.

이벤트 루프의 작동 방식을 설명하기 전에 JavaScript 런타임 내에 이해해야 할 몇 가지 특정 개념이 있습니다.

콜 스택: 콜 스택은 어떤 함수가 호출되고 어떤 순서로 실행되는지 추적합니다. 동기 코드를 순차적으로 실행합니다.
웹 API: 비동기 작업을 처리하는 도구입니다.
콜백: 다른 함수에 인수로 전달되는 함수입니다. 이벤트에 대한 응답으로 코드를 실행하는 데 도움이 됩니다.
이벤트/콜백 대기열: 호출 스택이 지워진 후 실행을 기다리는 작업을 보유합니다.

작동 원리

호출 스택은 비어 있을 때까지 동기 코드를 실행합니다. 비동기 코드가 호출 스택에 추가되면 API로 전송된 다음 이벤트 큐로 전송되기 전에 작업을 처리합니다.

Asynchronous Operations in JavaScript: The Event Loop

API에 의해 완료된 콜백/함수는 이벤트 큐에 추가되고 이벤트 루프는 이벤트 큐 내에서 자바스크립트가 조치를 취해야 하는 새로운 이벤트/작업이 있는지 지속적으로 확인합니다.

호출 스택이 비워질 때까지 JavaScript는 이벤트에 대해 작업을 수행할 수 없습니다. 따라서 호출 스택이 비면 이벤트 루프는 큐에서 이벤트를 가져와 다른 일반 함수처럼 실행되도록 호출 스택에 배치합니다.

이벤트 루프의 중요성

백그라운드에서 작업을 수행하는 동안 코드의 응답성을 유지합니다.
콜 스택과 콜백 큐를 모니터링하여 작업을 효과적으로 관리하는 데 도움이 됩니다.
여러 작업을 동시에 처리할 수 있는 비차단 작업을 수행하기 위한 JavaScript의 해결 방법을 제공합니다.
프로그램이 콜백 지옥에 빠지는 것을 방지합니다. 콜백 지옥은 여러 콜백이 서로 중첩되어 코드를 읽거나 유지 관리하기 어려울 때 발생합니다.

결론

이벤트 루프의 동작에 따라 애플리케이션의 코드가 실행되는 시기가 결정됩니다. 이벤트 루프의 사용 및 필요성에 대한 지식이 많을수록 코드가 실행될 때 왜 실행되는지 더 잘 이해할 수 있습니다.

코딩 베프 여러분, 즐거운 시간 보내세요!

위 내용은 JavaScript의 비동기 작업: 이벤트 루프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!