JavaScript에서 Sync vs Async (가장 쉬운 방법으로 설명)

Source: Dev.to

Introduction

JavaScript를 배우면서 가장 중요한 개념 중 하나는 **동기(synchronous)**와 비동기(asynchronous) 프로그래밍입니다. 이 주제를 이해하면 더 나은 코드를 작성하고 더 빠르고 부드러운 웹 애플리케이션을 만들 수 있습니다. 이는 JavaScript가 작업을 어떻게 처리하는지를 설명합니다—다음 작업으로 넘어가기 전에 현재 작업이 끝날 때까지 기다리는지, 아니면 작업이 백그라운드에서 실행되는 동안 다른 코드를 계속 실행하는지 여부를 말합니다.

Synchronous JavaScript

동기 JavaScript는 한 줄씩 순서대로 실행됩니다. 각 작업은 다음 작업이 시작되기 전에 반드시 완료되어야 합니다.

console.log("Step 1");
console.log("Step 2");
console.log("Step 3");

Output

Step 1
Step 2
Step 3

조금 더 긴 예시는 루프가 실행을 차단하는 방식을 보여줍니다:

console.log("Start");

for (let i = 0; i < 5; i++) {
  console.log("Working...");
}

console.log("End");

Output

Start
Working...
Working...
Working...
Working...
Working...
End

JavaScript가 루프를 실행하는 동안 다른 일을 할 수 없기 때문에 루프가 끝날 때까지 차단됩니다. 이러한 차단은 다음과 같은 문제를 일으킬 수 있습니다:

• 애플리케이션 속도 저하
• 사용자 인터페이스가 멈춤
• 열악한 사용자 경험

Asynchronous JavaScript

비동기 JavaScript는 프로그램이 작업을 시작하고 그 작업이 끝나기를 기다리지 않고 다른 코드를 계속 실행할 수 있게 합니다. 런타임은 오래 걸리는 작업을 백그라운드에서 처리합니다.

console.log("Start");

setTimeout(function () {
  console.log("Task completed");
}, 2000);

console.log("End");

Output (immediately)

Start
End

Output (after 2 seconds)

Task completed

setTimeout 콜백은 큐에 들어가 나중에 실행되며, 메인 스레드는 계속 진행됩니다. JavaScript는 단일 스레드이기 때문에 비동기 동작이 없으면:

• 웹 페이지가 멈춤
• 사용자 상호작용이 중단
• 애플리케이션이 느리게 느껴짐

비동기 프로그래밍은 API 호출, 타이머, 파일 로딩과 같은 작업을 백그라운드에서 실행하도록 함으로써 이러한 문제를 해결합니다.

Analogy

• Synchronous: 가게에 줄을 서서 물건을 받고 나서야 떠남.
• Asynchronous: 온라인으로 음식을 주문하고 일을 계속하다가 나중에 음식이 도착함.

Comparison

Asynchronous Patterns

비동기 작업을 처리하는 일반적인 방법:

• Callbacks – 비동기 API에 전달되는 전통적인 함수.
• Promises – 최종 완료 또는 실패를 나타내는 객체.
• async/await – 프로미스를 더 깔끔하고 선형적인 코드 형태로 사용할 수 있게 해 주는 문법 설탕.

이러한 패턴은 메인 스레드가 차단되는 것을 방지함으로써 성능과 사용자 경험을 향상시킵니다.