[ JavaScript ] 비동기 처리

스레드(Thread)

• 프로그램의 작업 처리 단위
• JavaScript 는 싱글 스레드 구조로, 한 번에 하나의 작업만 처리

동기적 처리(Synchronous)

• 하나의 작업이 끝날 때까지 다른 작업을 처리하지 않는 방식
• 순차적 처리
• 앞의 작업이 길어지면 전체 프로그램 정지

비동기적 처리(Asynchronous)

• 시간이 오래 걸리는 작업을 백그라운드에서 처리하며 다른 작업을 계속 진행하는 방식
• 동시 처리
• 프로그램 정지 없음

블록킹(Blocking)과 논블록킹(Non-Blocking)

• 블록킹: 하나의 작업이 끝날 때까지 다음 작업을 시작하지 않는 방식, 동기적 처리
• 논블록킹: 하나의 작업이 끝날 때까지 기다리지 않고 다음 작업을 시작하는 방식, 비동기적 처리

JavaScript 비동기 처리 API

• 웹 브라우저(Node.js) 제공 비동기 처리 함수
• 비동기 처리 API는 콜백 함수를 필수 인자로 받음

비동기 처리 예시

• 타이머: 대표적인 비동기 처리 활용 기능
• 타이머 시작 후, 시간의 흐름과 다른 기능(클릭, 스크롤 등) 동시 사용 가능
• 즉, 시간 흐름 기능은 비동기 처리, 다른 기능은 동시 작동

setTimeout

• 지정된 시간 후 콜백 함수를 실행

setTimeout(callback, delay);

• callback : 지연 후 실행할 코드
• delay : 실행 지연 시간 (밀리초)

[ 예시 코드 ]

function printMessage(number) {
  console.log(number);
}

printMessage(1);

setTimeout(() => {
  printMessage(2);
}, 1000);

printMessage(3);

// 실행 결과: 1, 3, 2

실행 과정

1. printMessage(1) : 함수 즉시 실행
2. setTimeout : printMessage(2) 를 1초 후 실행하도록 등록
3. printMessage(3) : 함수 즉시 실행
4. 1초 후 printMessage(2) 실행

JavaScript 비동기 처리 구성 요소와 메커니즘

Web APIs

• 웹 브라우저 또는 Node.js 환경이 제공하는 비동기 기능(setTimeout, fetch 등) 처리

• JavaScript 코드 실행 환경과 분리된 멀티 스레드 환경

콜백 큐 (Callback Queue)

• 비동기 처리 완료 후 실행될 콜백 함수 대기 장소

이벤트 루프 (Event Loop)

• 콜 스택의 상태를 지속적으로 확인하여, 콜 스택이 비어있을 경우 콜백 큐의 함수를 콜 스택으로 이동

콜 스택 (Call Stack)

• 현재 실행 중인 함수가 쌓이는 곳
• JavaScript 코드 실행 영역
• 싱글 스레드 환경

[ 개인 정리 사진 ]

아래 사진은 제가 이해한 점을 토대로 Keynote에 작성한 내용입니다.
혹여나 틀린 내용이 있다면 편하게 말씀 부탁드립니다.