자바스크립트 동기(Synchronous) vs 비동기(Asynchronous)

동기(Synchronous)란?

동기 방식은 작업이 순차적으로 처리되는 방식
한 작업이 끝나야 다음 작업이 실행됩니다.

console.log("1");
console.log("2");
console.log("3");
// 출력: 1 → 2 → 3

-> 간단하고 직관적이지만, 하나의 작업이 오래 걸리면 전체 흐름이 멈춰버리는 단점이 있습니다.

 

비동기(Asynchronous)란?

비동기 방식은 작업이 병렬적으로 처리되는 방식
시간이 오래 걸리는 작업은 백그라운드에서 처리되고, 나머지 코드는 계속 실행됩니다.

console.log("1");

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

console.log("3");

// 출력: 1 → 3 → 2

-> 기다리지 않고 다음 작업을 먼저 처리하는 구조
-> 특히 자바스크립트는 싱글 스레드 기반이기 때문에, 이런 비동기 처리 방식이 매우 중요

 

동기 vs 비동기 비교표

구분 동기(Synchronous) 비동기(Asynchronous)

구분	동기	비동기
실행 흐름	순차적	병렬적 / 이벤트 기반
코드 복잡도	낮음	상대적으로 높음
성능	낮음 (대기 발생)	높음 (자원 효율적 활용)
예시	C, Java(기본)	JavaScript, Python(비동기 지원)

💡 자바는 멀티스레드 기반으로 병렬 처리,
반면 자바스크립트는 싱글 스레드 + 이벤트 루프 기반 → 비동기 필수!

 

자바스크립트 비동기 처리 방식

Callback 함수

가장 기본적인 비동기 처리 방법.
다른 함수에 인자로 전달되어 나중에 실행되는 함수

function fetchData(callback) {
  setTimeout(() => {
    callback("데이터 도착");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // 데이터 도착
});

❗ 콜백 지옥(Callback Hell) 발생 가능 → 가독성 떨어짐

 

Promise

비동기 작업의 성공/실패 상태를 표현하는 객체
.then()과 .catch()로 결과를 처리

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("데이터 도착");
  }, 1000);
});

fetchData
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

 

 

async / await

Promise를 더 간단하게 사용하는 문법

async function getData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

📌await는 반드시 async 함수 안에서만 사용 가능!
Top-Level에서는 사용 불가 (ES2022부터 Top-Level await 지원 브라우저도 존재함)

 

이벤트 루프와 큐(Event Loop)

자바스크립트는 싱글 스레드지만 비동기 처리를 위해 이벤트 루프(Event Loop)를 사용합니다.

• 콜 스택(Call Stack): 동기 코드 실행
• 태스크 큐(Task Queue): 비동기 콜백 저장
• 이벤트 루프: 스택이 비면 큐에서 작업 꺼내 실행

->  이 구조 덕분에 자바스크립트는 싱글 스레드로도 비동기 처리를 효율적으로 수행합니다.

 

fetch vs axios

구분	fetch	axios
내장 여부	브라우저 내장 API	외부 라이브러리 설치 필요
사용 방식	기본 Promise	더 간단한 문법 제공
오류 처리	응답 상태코드 직접 체크 필요	자동 처리 가능

// fetch 예시
fetch("/api/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));