동기(Synchronous) 및 비동기(Asynchronous) JavaScript 이해하기

JavaScript는 한 번에 하나의 작업만 실행합니다. 이는 JavaScript가 싱글 스레드(single-threaded) 언어이기 때문입니다.

빠른 앱을 구축하려면 동기 코드와 비동기 코드의 차이점을 반드시 알아야 합니다.

동기 실행 (Synchronous Execution)

코드가 한 줄씩 실행됩니다. 각 작업은 이전 작업이 완료될 때까지 기다립니다.

ATM 대기 줄을 생각해보세요. 첫 번째 사람이 작업을 마칠 때까지 두 번째 사람은 기기를 사용할 수 없습니다.

만약 한 작업이 오래 걸리면 프로그램 전체가 멈춥니다. 이를 '블로킹(blocking)'이라고 합니다.

비동기 실행 (Asynchronous Execution)

작업이 독립적으로 실행됩니다. JavaScript는 작업을 시작한 후 즉시 다음 작업으로 넘어갑니다.

레스토랑을 생각해보세요. 음식을 주문한 뒤, 기다리는 동안 친구들과 대화를 나눕니다. 음식이 나올 때까지 아무것도 하지 않고 가만히 앉아 기다리지는 않습니다.

비동기 코드는 다음과 같은 상황에서 애플리케이션이 멈추는 것을 방지합니다:

  • API 요청
  • 데이터베이스 쿼리
  • 파일 읽기
  • 이미지 업로드

비동기 코드를 처리하는 세 가지 방법:

  1. 콜백(Callbacks) 특정 작업이 완료된 후 함수가 실행됩니다. 음식이 도착했을 때 배달 기사님이 전화를 주는 것과 같습니다.

  2. 프로미스(Promises) 프로미스는 미래의 결과를 나타냅니다. 결과가 해결(resolved, 성공)되거나 거부(rejected, 에러)될 때까지 '대기(pending)' 상태를 유지합니다.

  3. Async/Await 비동기 코드를 동기 코드처럼 보이게 만듭니다. 가독성이 좋습니다. await를 사용하여 프로그램의 나머지 부분을 차단하지 않고 함수의 실행을 일시 중지할 수 있습니다.

내부 동작 원리:

JavaScript는 이러한 작업들을 관리하기 위해 이벤트 루프(Event Loop)를 사용합니다.

  • Call Stack: 현재 실행 중인 함수들을 추적합니다.
  • Web APIs: 타이머나 fetch와 같은 오래 걸리는 작업을 처리합니다.
  • Callback Queue: 완료된 작업들을 보관합니다.
  • Event Loop: Call Stack이 비어 있을 때 큐에 있는 작업을 스택으로 옮깁니다.

비교:

동기(Synchronous):

  • 순차적으로 실행됨
  • 프로그램을 차단(Block)함
  • 작성하기 쉬움
  • 무거운 작업에는 느림

비동기(Asynchronous):

  • 독립적으로 실행됨
  • 차단하지 않음(Non-blocking)
  • 더 복잡함
  • 웹 앱에 효율적임

이러한 개념을 마스터하는 것이 React, Node.js 및 현대적인 API를 사용하는 핵심입니다.

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea