Asynchronous Operation (비동기 작업)

 

◼️ Asynchronous (비동기)

작업이 완료될 때까지 기다리지 않고 다음 작업을 계속 수행하는 방식.

작업 1 시작
 ↓
작업 2
 ↓
작업 3
 ↓
작업 1 완료

• 작업이 완료되면 결과를 받아 필요한 처리를 수행한다.

 

◼️ Synchronous (동기)

이전 작업이 완료되어야 다음 작업을 실행하는 방식.

작업 1
 ↓
작업 2
 ↓
작업 3

• 순서대로 실행되므로 흐름은 단순하지만, 오래 걸리는 작업이 있으면 다음 작업도 함께 지연된다.

 

◼️ 필요 이유

웹 애플리케이션에서는 시간이 오래 걸리는 작업이 자주 발생한다.

대표적인 예

• 서버(API) 요청
• 파일 업로드 및 다운로드
• 이미지 로딩
• 타이머(setTimeout, setInterval)

이러한 작업을 동기 방식으로 처리하면 작업이 끝날 때까지 프로그램이 대기하게 된다.

비동기 방식으로 처리하면 다른 작업을 계속 수행할 수 있어 사용자 인터페이스가 멈추지 않고 자연스럽게 동작한다.

 

◼️ 비동기 처리 방법

JavaScript에서는 다음과 같은 방법으로 비동기 작업을 처리한다.

• Callback Function
• Promise
• async / await

최근에는 Promise와 async / await를 사용하는 것이 일반적이다.

 

 

📍 POINT 📍

✔️ 비동기 작업은 동시에 실행되는 것처럼 동작하지만, 작업이 끝나는 순서는 시작 순서와 다를 수 있다. ✔️

✔️ React에서 API를 호출할 때도 대부분 비동기 방식으로 처리한다. ✔️

✔️ fetch()와 axios는 대표적인 비동기 HTTP 요청 도구이다. ✔️

 

 

📋 동기 vs 비동기 📋

구분	동기(Synchronous)	비동기(Asynchronous)
실행 방식	이전 작업 완료 후 다음 작업 실행	이전 작업 완료를 기다리지 않고 다음 작업 실행
실행 순서	순차적	작업 완료 시점에 따라 달라질 수 있음
장점	흐름이 단순함	프로그램이 멈추지 않아 성능과 사용자 경험이 좋음
단점	오래 걸리는 작업이 있으면 전체가 지연됨	실행 순서 관리가 필요함