* 비동기 처리란?
* 콜백 기능
* 약속과 비동기/대기
비동기 처리
비동기 처리는 작업이 진행되는 동안 다른 작업을 계속 수행할 수 있는 기능을 의미합니다. 이를 통해 사용자 경험을 개선하고 애플리케이션 성능을 향상시킬 수 있습니다. 일반적인 비동기 처리 방법에는 콜백, 약속 및 async/await가 포함됩니다.
다음은 비동기 처리를 위한 간단한 샘플 코드입니다. setTimeout 함수를 이용하여 1초 후에 greeting 함수를 호출한 예입니다.
function greeting(name) {
console.log(`Hello, ${name}!`);
}
console.log('Before greeting');
setTimeout(greeting, 1000, 'Alice');
console.log('After greeting');
위의 코드에서 setTimeout 함수를 호출하고 있습니다. 이 함수는 실행할 함수를 첫 번째 인수로 사용하고 함수를 실행하는 시간(ms)을 두 번째 인수로 사용합니다. 세 번째 인수부터 실행할 함수에 전달할 인수를 전달할 수 있습니다.
setTimeout 함수가 호출되면 “Before Greeting” 메시지가 먼저 출력됩니다. 그리고 1초 후에 인사말 함수가 호출되고 ‘Hello, Alice!’ 메시지가 발행됩니다. 마지막으로 “인사 후”라는 메시지가 출력됩니다. 이렇게 하면 setTimeout 함수가 비동기식으로 작동하므로 Greeting 함수가 실행될 때까지 다음 코드가 실행되지 않습니다.
콜백 함수
콜백 함수는 다른 함수에 인수로 전달되어 해당 함수가 실행될 때 실행되는 함수입니다. 일반적으로 비동기 작업 또는 이벤트를 처리하는 데 사용됩니다.
다음은 간단한 콜백 함수의 예입니다. Add 함수는 두 개의 인수를 사용하고 추가 결과를 반환합니다. printResult 함수는 add 함수를 호출하여 결과를 인쇄합니다. 이때 printResult 함수는 add 함수의 결과를 받는 콜백 함수입니다.
function add(x, y, callback) {
const result = x + y;
callback(result);
}
function printResult(result) {
console.log(`The result is ${result}`);
}
add(1, 2, printResult);
위의 코드에서 add 함수는 callback 매개변수를 통해 콜백 함수를 가져옵니다. add 함수는 두 개의 숫자를 더한 결과를 result 변수에 저장하고 이를 인자로 콜백 함수를 호출합니다. printResult 함수는 결과 값을 받아 출력합니다.
add 함수를 호출할 때 printResult 함수를 인수로 전달합니다. 이렇게 전달된 printResult 함수는 add 함수와 함께 실행되어 결과를 출력합니다.
이와 같이 콜백 함수는 다른 함수에 인수로 전달되어 함께 실행되어 비동기 작업이나 처리 이벤트를 처리하는 데 사용됩니다.
약속 및 비동기/대기
약속하다
약속은 비동기 작업의 결과를 처리하기 위한 개체입니다. Promise는 미래에 값이나 오류를 반환하고 작업이 완료되면 결과를 반환할 수 있는 작업을 나타냅니다. Promise 객체는 확인 및 거부 함수를 인수로 사용하는 콜백 함수를 정의하여 구성됩니다. resolve 함수는 작업이 성공하면 결과를 반환하고, reject 함수는 작업이 실패하면 오류를 반환합니다.
다음은 약속과 함께 API 요청을 보내고 응답을 처리하는 코드입니다.
function getApiResponse() {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.onload = function() {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(Error('API request failed'));
}
};
xhr.send();
});
}
getApiResponse()
.then(response => console.log(response))
.catch(error => console.error(error));
위의 코드에서 getApiResponse 함수는 새로운 Promise로 Promise 객체를 생성합니다. 이 함수는 XMLHttpRequest 객체를 사용하여 API 요청을 보내고 요청이 완료된 후 resolve 함수를 사용하여 응답을 반환합니다. 요청이 실패하면 거부 기능을 사용하여 오류를 반환합니다.
getApiResponse 함수는 Promise 객체를 반환하고 then 메서드를 사용하여 약속이 true인 경우 결과 값을 처리합니다. catch 메서드는 약속을 거부할 때 발생하는 오류를 처리합니다.
비동기/대기
async/await는 JavaScript의 약속 기반 비동기 프로그래밍 패턴입니다. 비동기 함수는 약속을 반환하며 await 키워드를 사용하여 비동기 작업의 결과를 기다릴 수 있습니다. await 키워드를 사용하여 비동기 코드를 동기식으로 작성할 수 있습니다.
다음은 async/await로 API 요청을 보내고 응답을 처리하는 코드입니다.
async function getApiResponse() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
getApiResponse();
위의 코드에서 getApiResponse 함수는 async 키워드를 사용하여 비동기 함수로 정의하고 try-catch 문을 사용하여 예외를 처리합니다. 가져오기 함수는 약속을 반환하고 응답을 await 키워드를 사용하여 JSON으로 변환하여 데이터를 처리하기 위해 response.json()을 호출합니다. json() 메서드도 약속을 반환하므로 await 키워드를 사용하여 결과를 기다립니다.
async/await를 사용하면 비동기 코드를 더 쉽게 읽을 수 있고 예외 처리도 간소화됩니다.