1
JS
자바스크립트에서 비동기 처리를 위한 방식은 무엇이 있는가?
callback, Promise, async/await 3가지 방식
// callback
function fetchData(callback) {
setTimeout(() => {
console.log("Data fetching completed");
callback("Data from server");
}, 2000);
}
fetchData((data) => {
console.log("Received data:", data);
});
// 실행 결과
Data fetching completed
Received data: Data from server
// Promise
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = true;
if (success) {
console.log("Data fetching completed");
resolve("Data from server");
} else {
reject(new Error("Failed to fetch data"));
}
}, 2000);
});
}
fetchData()
.then((data) => {
console.log("Received data:", data);
})
.catch((error) => {
console.error("Error:", error.message);
});
// 실행 결과
Data fetching completed
Received data: Data from server
// async/await
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("Data fetching completed");
resolve("Data from server");
}, 2000);
});
}
async function displayData() {
try {
const data = await fetchData();
console.log("Received data:", data);
} catch (error) {
console.error("Error:", error.message);
}
}
displayData();
// 실행 결과
Data fetching completed
Received data: Data from server
callback과 Promise: 콜백은 함수를 다른 함수의 인자로 전달하는것, 콜백은 주로 비동기 작업이 완료 되었을 때 실행 / 프로미스는 비동기 작업의 최종 완료나 실패를 나타내는 객체, then, catch, finally 메서드 사용하여 성공, 실패, 완료 시 실행할 로직을 정의할 수 있음.async/await: 프로미스 기반의 비동기 코드를 더 읽기 쉽고 동기식으로 작성할 수 있게 함 - 비동기 처리를 위한 문법적 설탕임, 해당 키워드를 사용하면 프로미스 기반의 비동기 코드를 동기식으로 작성할 수 있음, async 함수를 선언해서 해당 함수가 비동기 임을 나타내고, await은 프로미스를 기다리는 표현식 앞에 사용, 프로미스가 완료될 때까지 해당 비동기 작업의 실행을 일시 중단하고 프로미스가 완료되면 결과를 반환. await은 async 함수 내에서만 사용 가능- async/await 의
동작방식은?- async 함수가 호출되면 항상 Promise를 반환함. 이 Promise는 async 함수 내에서 return 키워드로 반환되는 값으로 해결(resolve).
- await 키워드가 사용된 표현식은 Promise.resolve()로 감싸져 비동기 작업을 시작.
- await 키워드 뒤의 Promise가 완료될 때까지 async 함수의 실행이 일시 중단되고, 이후 Promise가 완료되면 그 결과가 반환.
- try/catch 블록을 사용하여 await 표현식 내에서 발생하는 에러를 캐치할 수 있음.
- async/await를 사용하면 비동기 코드를 동기식 코드처럼 작성할 수 있어 가독성이 향상되며, 에러 처리도 try/catch 블록을 통해 쉽게 할 수 있음. 그러나 await 키워드는 비동기 작업의 완료를 기다리는 동안 현재 함수의 실행이 일시 중단되므로, 여러 비동기 작업을 병렬로 실행하려면 다른 방법(예: Promise.all())과 함께 사용해야 할 수도 있음.
- 바벨 트랜스파일링: JS 컴파일러, ES6 문법을 이전의 JS로 변환
- polyfill 브라우저가 지원하지 않는 JS기능을 제공해서 기능을 지원 (Promise나 Object.assign, Array.includes)
- 현재 실행중인 코드가 완료된 후,
이벤트 큐에 있는 우선순위 높은 것들이 실행되고 난 후 timer phase에 실행될것, JS는 싱글쓰레드 언어임 setTimeout은 이벤트 큐에 추가