JavaScript는 웹의 백본으로, 수십억 개의 웹사이트와 애플리케이션에 대한 동적 클라이언트측 기능을 지원합니다. 하지만 JavaScript가 백그라운드에서 어떻게 마법을 작동하는지 궁금한 적이 있습니까? 이 게시물에서는 JavaScript의 단일 스레드 특성의 내부 작동 방식을 살펴보고 비동기 프로그래밍의 개념을 살펴보겠습니다.

단일 스레드란 무엇을 의미합니까?

JavaScript가 "단일 스레드"라고 말하면 단일 호출 스택이 있다는 의미입니다. 호출 스택은 기본적으로 JavaScript가 실행 중인 함수를 추적하는 구조입니다. 이는 LIFO(후입선출) 순서를 따릅니다. 즉, 스택에 푸시된 마지막 함수가 가장 먼저 완료됩니다. 작동 방식의 예는 다음과 같습니다.

function first() {
    console.log('First function');
}

function second() {
    console.log('Second function');
}

first();
second();

이 예제에서는 first() 함수가 스택에 추가되고 실행됩니다. 완료되면 팝되고 두 번째() 함수가 스택에 푸시되어 다음에 실행됩니다.

단일 스레드 언어는 한 번에 한 가지 작업만 수행할 수 있기 때문에 제한적으로 보일 수 있지만 JavaScript는 비동기 메커니즘을 영리하게 사용하여 멀티태스킹을 시뮬레이션할 수 있습니다.

이벤트 루프와 비동기 실행

JavaScript는 비동기 실행을 사용하여 네트워크 요청, 파일 I/O 또는 타이머와 같이 완료하는 데 시간이 오래 걸릴 수 있는 작업을 처리합니다. 단일 스레드임에도 불구하고 이벤트 루프와 콜백 큐 덕분에 여러 작업을 동시에 관리할 수 있습니다.

이벤트 루프

이벤트 루프는 JavaScript 동시성 모델의 핵심 개념입니다. 주요 책임은 JavaScript가 비동기 코드 실행을 처리하는 방법을 관리하는 것입니다. 작동 방식은 다음과 같습니다.

1. 동기 코드가 먼저 실행됩니다. JavaScript가 시작되면 호출 스택을 사용하여 전역 범위의 모든 코드를 한 줄씩 동기식으로 실행합니다.

2. 비동기 작업은 웹 API(예: setTimeout, 가져오기 등) 또는 Node.js API로 전송되어 백그라운드에서 처리됩니다.

3. 콜백 대기열은 비동기 작업이 완료되면 배치되는 곳입니다.

4. 이벤트 루프는 호출 스택이 비어 있는지 지속적으로 확인합니다. 스택이 비어 있으면 콜백 대기열에서 첫 번째 항목을 가져와서 호출 스택에 푸시하여 실행할 수 있도록 합니다.

비동기 JavaScript의 마법은 이벤트 루프, 호출 스택 및 콜백 대기열 간의 상호 작용에 있습니다. 비동기 작업은 호출 스택을 차단하지 않습니다. 즉, JavaScript는 백그라운드 작업이 완료되기를 기다리는 동안 다른 코드를 계속 실행할 수 있습니다.

예: setTimeout 사용

setTimeout 함수가 포함된 다음 예를 고려하세요.

console.log('Start');

setTimeout(() => {
    console.log('This runs after 2 seconds');
}, 2000);

console.log('End');

단계별 진행 상황은 다음과 같습니다.

1. JavaScript는 "시작"을 인쇄합니다.

2. setTimeout 함수가 호출되지만 2초 동안 실행을 차단하는 대신 Web API로 전송되어 백그라운드에서 실행됩니다.

3. JavaScript는 "End"를 인쇄하여 setTimeout이 완료될 때까지 기다리지 않고 실행을 계속합니다.

4. 2초 후 setTimeout 내부의 콜백 함수가 콜백 대기열에 배치됩니다.

5. 이벤트 루프는 호출 스택이 비어 있는지 확인한 다음 콜백 함수를 스택에 푸시하고 실행하여 "2초 후에 실행됩니다."를 인쇄합니다.

약속과 비동기/대기

현대 JavaScript에서 비동기 작업을 처리하는 또 다른 인기 있는 방법은 Promise와 async/await 구문을 사용하는 것입니다. 이 구문은 깊이 중첩된 콜백("콜백 지옥"이라고도 함)을 방지하여 코드를 더 읽기 쉽게 만드는 데 도움이 됩니다.

Promise는 비동기 작업의 최종 완료(또는 실패)와 그 결과 값을 나타냅니다. 예는 다음과 같습니다.

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Promise resolved!');
    }, 1000);
});

promise.then(result => {
    console.log(result);  // Output after 1 second: 'Promise resolved!'
});

콜백에 의존하는 대신 then()을 사용하여 Promise가 해결될 때 발생하는 일을 처리할 수 있습니다. 좀 더 동기적인 방식으로 비동기 코드를 처리하려면 async/await:
를 사용할 수 있습니다.

async function asyncExample() {
    const result = await promise;
    console.log(result);  // Output after 1 second: 'Promise resolved!'
}

asyncExample();

이렇게 하면 코드가 더 깔끔하고 이해하기 쉬워지므로 JavaScript가 내부적으로 비차단 상태로 유지되더라도 다음 코드 줄로 이동하기 전에 비동기 작업이 완료될 때까지 '대기'할 수 있습니다.

JavaScript 비동기 모델의 주요 구성 요소

1. 콜 스택: 동기 코드가 실행되는 곳입니다.

2. 웹 API/Node.js API: 비동기 작업(예: 네트워크 요청)이 처리되는 외부 환경.

3. 콜백 대기열: 비동기 작업 결과가 실행을 위해 호출 스택으로 푸시되기를 기다리는 대기열입니다.

4. 이벤트 루프: 콜 스택과 콜백 큐 사이를 조정하여 작업이 올바른 순서로 처리되도록 보장하는 시스템입니다.

결론

JavaScript의 단일 스레드 특성은 언뜻 보기에는 제한적인 것처럼 보일 수 있지만 비동기 기능을 통해 여러 작업을 효율적으로 관리할 수 있습니다. 이벤트 루프, 콜백 대기열 및 약속과 같은 메커니즘을 통해 JavaScript는 직관적이고 동기적인 코딩 스타일을 유지하면서 복잡하고 비차단 작업을 처리할 수 있습니다.