비동기
비동기란?
비동기는 작업이 순차적으로 실행되지 않고, 작업이 완료될 때까지 기다리지 않고 다음 작업을 실행하는 방식이다. \
이를 통해 다른 작업을 동시에 처리하거나, 시간이 오래 걸리는 작업을 효율적으로 다룰 수 있다.\
JavaScript에서는 콜백 함수, 프로미스, async/await 등을 사용하여 비동기 작업을 처리할 수 있다.
JavaScript의 비동기 처리
JavaScript는 Single Thread 언어로, 한 번에 하나의 작업만 수행할 수 있다.
Thread란 작업을 처리하는 주체를 의미하며, JavaScript는 Single Thread이므로 비동기 처리를 위해 Runtime 환경이 필요하다.
비동기 처리 동작 방식
- 모든 작업은 Call Stack(LIFO)으로 들어간 후 처리된다.
- 오래 걸리는 작업은 Web API로 보내 별도로 처리된다.
- Web API에서 처리가 끝난 작업은 Task Queue(FIFO)에 순서대로 들어간다.
- Event Loop가 Call Stack이 비어 있는지 계속 체크하고, 비어 있다면 Task Queue에서 가장 오래된 작업을 Call Stack으로 보낸다.
비동기 처리 동작 요소
- Call Stack: 요청이 들어올 때마다 순차적으로 처리하는 스택(LIFO)이다. JavaScript의 기본적인 Single Thread 작업처리를 담당한다.
- Web API: JavaScript 엔진이 아닌 브라우저에서 제공하는 Runtime 환경이다. 시간이 소요되는 작업을 처리한다. (예: setTimeout, DOM Event, Ajax 요청 등)
- Task Queue: 비동기 처리된 Callback 함수가 대기하는 큐(FIFO)이다.
- Event Loop: Call Stack과 Task Queue를 지속적으로 모니터링한다. Call Stack이 비어 있는지 확인 후 비어 있다면 Task Queue에서 대기 중인 가장 오래된 작업을 Call Stack으로 옮긴다.
즉, 브라우저 환경에서는 Web API에서 처리된 작업이 Task Queue를 거쳐 Event Loop에 의해 Call Stack에 들어와 순차적으로 실행되어 비동기 작업이 가능한 환경이 된다.
- Event Loop에서 Call Stack으로 작업을 push한다.
- Call Stack에서 작업이 처리되면 즉시 실행되거나 처리되지 않으면 Web API로 보내고, Call Stack은 작업을 계속해서 받습니다. 이러한 과정을 반복한다.
- Web API에서 처리된 작업은 처리가 완료된 순서대로 Task Queue에 들어가고, Event Loop에 의해 Call Stack으로 이동되어 처리된다
promise와 async/await
Call Stack은 JavaScript에서 함수의 호출을 추적하는 자료구조로, 현재 실행 중인 함수의 정보를 저장하는 스택이다. 함수가 호출되면 해당 함수의 정보(함수 호출문, 매개변수 등)가 Call Stack에 쌓이고, 함수가 실행되면 Call Stack에서 제거된다. 이러한 방식으로 JavaScript는 함수 호출을 순차적으로 처리한다.
Promise는 JavaScript에서 비동기 처리를 위한 객체이다. Promise는 비동기 작업의 성공 또는 실패를 나타내는 상태와 함께 작업의 결과를 반환 한다. Promise는 세 가지 상태를 가질 수 있다: 대기(pending), 이행(fulfilled), 거부(rejected). 이행 또는 거부되면 해당 Promise의 상태는 변경되지 않는다.
async/await는 Promise를 기반으로 한 비동기 코드를 더 간결하고 동기적으로 작성할 수 있는 JavaScript의 문법적인 기능이다. async 함수 내에서 await 키워드를 사용하면 Promise가 이행될 때까지 기다리고, Promise가 이행되면 해당 결과를 반환한다. async/await를 사용하면 비동기 코드를 동기적으로 작성하는 것처럼 보이게 된다.
다음은 Promise와 async/await의 사용 예시 코드이다:
Promise 사용 예시:
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = "데이터";
resolve(data); // Promise를 이행하고 데이터 반환
}, 2000);
});
}
fetchData()
.then((data) => {
console.log(data); // 비동기 작업 완료 후 데이터 출력
})
.catch((error) => {
console.error(error); // 에러 처리
});async/await 사용 예시:
javascript;
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = "데이터";
resolve(data); // Promise를 이행하고 데이터 반환
}, 2000);
});
}
async function fetchDataAsync() {
try {
const data = await fetchData(); // 비동기 작업 완료까지 기다림
console.log(data); // 데이터 출력
} catch (error) {
console.error(error); // 에러 처리
}
}
fetchDataAsync();위 코드에서 fetchData 함수는 비동기 작업을 수행하고 Promise를 반환한다. Promise를 사용하는 경우 then 메서드를 사용하여 비동기 작업의 성공 케이스를 처리하고, catch 메서드를 사용하여 실패 케이스를 처리한다.
fetchDataAsync 함수는 async 키워드로 정의된 비동기 함수이다. await 키드를 사용하여 fetchData 함수의 비동기 작업이 완료될 때까지 기다린 후, 결과를 변수에 할당한다. 그리고 결과를 출력하거나 에러를 처리한다.
