동기 vs 비동기 JavaScript

Source: Dev.to

동기식 코드는 무엇인가?

동기식 코드는 한 줄씩 실행되며, 한 단계씩 진행됩니다. 각 작업은 다음 작업이 시작되기 전에 반드시 끝나야 합니다.

예시

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

출력

Step 1
Step 2
Step 3

실행 타임라인

Step 1 → Step 2 → Step 3

장점

• 간단함
• 예측 가능함

단점

• 실행을 차단할 수 있음

문제: 차단되는 코드

작업에 시간이 걸리면 다른 모든 것이 기다려야 합니다.

console.log("Start");

for (let i = 0; i  {
  console.log("Async Task Done");
}, 2000);

console.log("End");

출력

Start
End
Async Task Done

실행 타임라인

Start → End → (2 초 후) Async Task Done

왜 JavaScript에 비동기 동작이 필요한가?

• API에서 데이터 가져오기 🌐
• 파일 로드하기 📁
• 사용자 입력 대기 👤

JavaScript가 전부 동기식이라면 UI가 멈추고 사용자는 불편한 경험을 하게 됩니다.

실생활 비유

동기식:
차를 만들고 → 기다린 뒤 → 서빙하고 → 그 다음에 음식을 만든다. 모든 것이 순차적으로 진행됩니다.

비동기식:
차를 끓이는 동안 ☕, 동시에 음식을 요리한다 🍳. 여러 작업을 효율적으로 처리합니다.

흔히 쓰이는 비동기 예시

1. 타이머

   setTimeout(() => {
     console.log("Runs later");
   }, 1000);

2. API 호출

   fetch("https://api.example.com/data")
     .then(res => res.json())
     .then(data => console.log(data));

3. 이벤트 처리

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

비동기가 내부에서 작동하는 방식 (단순화)

JavaScript는 다음을 사용합니다:

• 호출 스택 (Call Stack)
• 웹 API (Web APIs)
• 콜백 큐 (Callback Queue)

비동기 흐름

Call Stack → Web API → Callback Queue → Execution

차단 vs 비차단

핵심 정리

• JavaScript는 단일 스레드입니다.
• 동기식 = 단계별 실행 (차단될 수 있음).
• 비동기식 = 비차단 실행, 실제 애플리케이션에 필수적.

마무리 생각

동기식과 비동기식 동작을 이해하는 것은 JavaScript를 마스터하기 위한 기초입니다. 이를 통해:

• 반응형 앱을 만들 수 있고
• 실제 작업을 처리할 수 있으며
• 콜백, 프로미스, async/await를 활용할 수 있습니다.

간단 요약

• 동기식 → 한 번에 하나의 작업
• 비동기식 → 여러 작업을 효율적으로 처리, 차단 방지
• API, 타이머, 이벤트 등 다양한 상황에서 사용됩니다.