자바스크립트 동기 vs 비동기 완벽 정리: 실행 순서부터 이해하기

by

1. 동기(Synchronous)와 비동기(Asynchronous)란?

자바스크립트에서 실행 흐름을 이해하는 것은 효율적인 코드 작성과 성능 최적화에 필수적이다. 특히, 자바스크립트는 단일 스레드(single-thread) 언어이기 때문에 동기(Synchronous)와 비동기(Asynchronous) 처리 방식을 제대로 이해하는 것이 중요하다.

이번 글에서는 동기와 비동기의 차이점을 명확히 정리하고, 각각의 장단점을 비교해 보겠다.

2. 동기 처리란?

동기 프로그래밍(Synchronous Programming)은 코드가 작성된 순서대로 실행되는 방식을 의미한다. 즉, 하나의 작업이 끝나야만 다음 작업이 실행된다.

2.1 동기 처리 예제

function displayA() {
  console.log("A 실행");
}

function displayB() {
  console.log("B 실행");
}

function displayC() {
  console.log("C 실행");
}

displayA();
displayB();
displayC();

📌 출력 결과:

A 실행
B 실행
C 실행

설명: 코드가 작성된 순서대로 실행되며, 이전 함수가 종료되어야 다음 함수가 실행된다.

2.2 동기 처리의 문제점

  • 하나의 작업이 오래 걸리면 전체 프로그램 실행이 지연된다.
  • 네트워크 요청, 파일 읽기 등 시간이 오래 걸리는 작업이 있을 경우, UI가 멈출 수 있다.

3. 비동기 처리란?

비동기 프로그래밍(Asynchronous Programming)은 작업이 완료될 때까지 기다리지 않고 다음 작업을 실행하는 방식이다.

3.1 비동기 처리 예제

function displayA() {
  console.log("A 실행");
}

function displayB() {
  setTimeout(() => {
    console.log("B 실행");
  }, 2000);
}

function displayC() {
  console.log("C 실행");
}

displayA();
displayB();
displayC();

📌 출력 결과:

A 실행
C 실행
B 실행 (2초 후 출력)

설명: setTimeout을 사용하여 2초 후에 실행되도록 설정했기 때문에, B가 실행되는 동안 C가 먼저 실행된다. 즉, 시간이 오래 걸리는 작업이 있어도 프로그램이 멈추지 않는다.

3.2 비동기 처리의 장점

  • 네트워크 요청, 파일 읽기 등의 작업을 기다릴 필요가 없다.
  • 사용자 경험(UX)을 개선할 수 있다.
  • 성능이 향상되고, 병렬 처리 효과를 얻을 수 있다.

4. 동기 vs 비동기 비교 정리

비교 항목동기(Synchronous)비동기(Asynchronous)
실행 방식코드 순서대로 실행특정 작업이 끝날 때까지 기다리지 않고 다음 코드 실행
성능네트워크 요청, 파일 읽기 등에서 지연 발생 가능네트워크 요청 중에도 다른 작업 실행 가능
사용자 경험(UX)긴 작업 중 UI가 멈출 가능성 있음백그라운드에서 작업이 진행되며 UI가 멈추지 않음
예제console.log() 연속 실행setTimeout(), fetch(), Promise 등 활용

5. 결론

  • 동기 프로그래밍은 코드 실행 순서가 명확하지만, 시간이 오래 걸리는 작업이 있으면 프로그램이 멈출 수 있다.
  • 비동기 프로그래밍을 활용하면 프로그램이 멈추지 않고 빠르게 실행되며, 사용자 경험이 향상된다.
  • 자바스크립트에서 비동기 처리를 위해 콜백 함수, Promise, Async/Await 등의 기법을 활용할 수 있다.

다음 포스트에서는 콜백 함수(callback)란 무엇인지 알아보고, 자바스크립트에서 비동기 처리를 어떻게 할 수 있는지 더 깊이 다뤄보겠다.

Leave a Comment