JavaScript/Typescript의 단일 스레드 특성: 비동기 프로그래밍

Jan 20 2023

첫 번째 기사에서 JS와 TS의 몇 가지 차이점에 대해 썼습니다. 이제 단일 스레드 언어로서의 비동기 특성을 살펴보겠습니다.

첫 번째 기사 에서 JS와 TS의 몇 가지 차이점에 대해 썼습니다.

이제 단일 스레드 언어로서의 비동기 특성을 살펴보겠습니다 .

JavaScript 및 TypeScript에서 단일 스레드 특성은 주어진 시간에 하나의 작업만 실행할 수 있음을 의미합니다.

반면에 비동기 프로그래밍은 작업을 비동기적으로 수행하는 언어의 기능을 말하며, 다른 작업이 완료될 때까지 기다리는 동안 메인 실행 스레드가 계속 실행될 수 있도록 합니다. 이는 콜백 , 이벤트 , 약속 및 async / await를 사용하여 달성됩니다 .

코딩 용어로 설명을 시작하기 전에 단일 스레드 언어의 비동기 작업이 멀티태스킹을 시도할 때 우리의 뇌와 얼마나 유사한지에 대한 매우 흥미로운 참고 자료에 대해 이야기하고 싶습니다 .

이 섹션에서는 Sequential Brain 과 비동기화 의 연결에 대해 Kyle Simpson이 저서 "You Dont Know Javascript"에서 쓴 긴 텍스트/장을 요약합니다 . 작동 방식의 코딩 부분에만 관심이 있는 경우 이 부분을 건너뛸 수 있습니다.

“ 저는 여러분 대부분이 누군가가 “ 저는 멀티태스커입니다. ”
그러나 우리는 멀티태스커입니까? 우리는 정말로 한 번에 두 가지 의식적이고 의도적인 행동을 하고 정확히 같은 순간에 두 가지에 대해 생각/추론할 수 있습니까? 우리의 최고 수준의 두뇌 기능에 병렬 멀티스레딩이 진행되고 있습니까?

대답은 당신을 놀라게 할 수 있습니다. 아마 아닐 것입니다.

그것은 우리의 두뇌가 설정되는 것처럼 보이는 방식이 아닙니다. 우리는 우리 중 많은 사람들이 인정하고 싶은 것보다 훨씬 더 많은 단일 작업자입니다. 우리는 주어진 순간에 한 가지만 생각할 수 있습니다.

나는 심장 박동, 호흡, 눈꺼풀 깜박임과 같은 비자발적이고 무의식적이며 자동적인 뇌 기능에 대해 말하는 것이 아닙니다. 그것들은 모두 우리의 지속적인 삶에 필수적인 작업이지만, 우리는 의도적으로 여기에 어떤 두뇌 능력도 할당하지 않습니다.”

Simpson에 따르면 인간은 컴퓨터가 할 수 있는 것과 같은 방식으로 진정한 멀티태스킹을 할 수 없습니다. 인간의 뇌가 동시에 여러 작업을 처리할 수 있는 것은 사실이지만 한 번에 모든 작업에 동일한 주의를 기울일 수는 없습니다. 대신 단일 스레드 프로그램이 한 번에 하나의 작업만 실행할 수 있는 것처럼 작업 간에 주의를 빠르게 전환합니다.

고맙게도 우리는 3분 안에 15번째로 소셜 네트워크 피드를 확인하는 데 집착하는 동안 우리의 두뇌는 모든 중요한 작업을 백그라운드(스레드!)에서 수행합니다.

친구나 가족과 전화 통화를 하면서 동시에 무언가를 입력하려고 하는 것처럼 멀티태스킹을 속일 때 실제로 가장 많이 하는 일은 빠른 컨텍스트 전환기 역할을 하는 것 입니다 . 다시 말해, 우리는 두 개 이상의 작업을 빠르게 연속적으로 앞뒤로 전환하면서 각 작업을 작고 빠른 작은 단위로 동시에 진행합니다. 우리는 너무 빨리 처리하므로 외부 세계에서는 이러한 작업을 병렬로 수행하는 것처럼 보입니다.

비동기 이벤트 동시성 (JS에서 발생하는 것과 동일)처럼 들립니까 ?!

우리가 다양한 작업을 계획하는 방법과 뇌가 실제로 이러한 작업을 수행하는 방법 사이에는 눈에 띄는 큰 차이가 있습니다.
작동 수준에서 우리의 두뇌는 비동기 이벤트이지만 순차적이고 동기적인 방식으로 작업을 계획하는 것 같습니다. “가게에 가서 우유를 좀 사서 드라이클리닝을 맡겨야 해요.”

다음과 같이 해야 할 심부름을 계획하는 일련의 사고 방식을 실제로 상상할 수 있습니까?

" 가게에 가야 하는데(1), 가는 길에 전화를 받을 게 확실해서(2) '안녕하세요, 엄마', 엄마가 이야기를 시작하는 동안 저는 위를 보고 있을 거예요. GPS에 매장 주소(3)를 입력 했지만 로드하는 데 1초가 걸리므로 엄마의 말을 더 잘 들을 수 있도록 라디오 볼륨을 낮춥니
다 (4) … 5) 그리고 밖은 춥지만 상관없이 계속 운전하며 엄마와 대화를 나누세요.
그리고 나서 안전벨트 땡 소리가 나에게 안전벨트를 매라고 알려줍니다 . (6) 그래서 '네, 엄마, 저는 항상 안전벨트를 매고 있어요! 아, 마지막으로:

GPS가 방향을 잡았습니다. 이제…

우리가 하루를 어떻게 계획하고 무엇을 하고 어떤 순서로 생각하는지에 대한 공식처럼 우스꽝스럽게 들리겠지만, 그럼에도 불구하고 그것은 정확히 우리의 두뇌가 기능적 수준에서 작동하는 방식입니다. 그러나 이것은 멀티태스킹이 아니라 빠른 컨텍스트 전환이라는 점을 기억하십시오.

이를 염두에 두고 JavaScript에서 비동기 프로그래밍이 작동하는 방식을 자세히 살펴보겠습니다.

이제 코딩 :

Callbacks , Events, Promises, Async/Await 사용을 포함하여 이 기사의 시작 부분에서 언급한 것처럼 JavaScript/Typescript에서 비동기 프로그래밍을 수행하는 여러 가지 방법이 있습니다 .

콜백은 다른 함수에 인수로 전달되고 외부 함수가 완료된 후에 실행되는 함수입니다. 예를 들어:

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("John", sayGoodbye);
// Output: "Hello, John!"
// Output: "Goodbye!"

이벤트 는 어떤 일이 발생했다는 신호이고 리스너는 해당 이벤트에 대한 응답으로 실행되는 함수입니다. 예를 들어:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Button was clicked!");
});

Promise 는 비동기 작업의 결과를 나타내며 실제 Promise와 마찬가지로 해결(성공)하거나 거부(실패)할 수 있습니다. 당신이 약속을 할 때 당신은 그것을 지키거나(해결) 하지 않거나(거부) 합니다.
약속을 사용하여 비동기 작업을 함께 연결하는 프로세스를 단순화할 수 있습니다. 예를 들어:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Completed Async Task");
  }, 1000);
});

promise.then((result) => {
  console.log(result);
});
// Output: "Async task completed" (after 1 second)

Async/await: async/await 구문을 사용하여 비동기 코드를 동기화된 코드처럼 보이고 작동하도록 허용하는 JavaScript의 기능입니다. Async/await는 Promise 위에 구축되어 비동기 코드로 작업하기가 더 쉽습니다.

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

async function main() {
  const greeting = await greet("John");
  console.log(greeting);
}

main();
// Output: "Hello, John!"

전반적으로 비동기 프로그래밍은 언어의 단일 스레드 특성을 유지하면서 여러 작업을 실행할 수 있습니다. 다른 작업이 완료될 때까지 기다리는 동안 메인 스레드가 계속 실행되도록 함으로써 보다 반응이 빠르고 효율적인 프로그램을 가능하게 합니다.

이 콘텐츠가 마음에 든다면 망설이지 말고 팔로우하세요. 가까운 장래에 작성할 예정인 더 많은 프로젝트가 있습니다. 그때까지,