동기 및 비동기
동기식특정 작업을 수행할 때 작업이 완료되기를 기다리는 방식을 의미합니다.
즉, 다음 코드 실행을 중지하고 작업이 완료될 때까지 기다립니다.
이렇게 하면 작업 순서를 보장하고 작업이 완료될 때까지 결과를 기다릴 수 있습니다.
비동기태스크가 실행되면 태스크가 완료되지 않아도 다음 코드가 실행되는 것을 의미합니다.
즉, 태스크가 완료되지 않더라도 결과를 기다리지 않고 다음 코드를 실행한다.
이 방법은 작업이 오래 걸릴 때 시간을 절약하고 병렬 작업 처리를 가능하게 합니다.
동기식으로 파일을 읽는다면 파일 읽기를 시작한 후 다음 코드를 실행하지 않고 파일을 읽을 때까지 기다린다.
반면 비동기적으로 파일을 읽는다면 파일을 읽는 동안 다른 작업을 할 수 있다.
JavaScript의 비동기 처리
자바스크립트는 단일 스레드 하나의 스레드가 모든 작업을 처리해야 하므로 한 번에 하나의 작업만 처리할 수 있습니다.
따라서 자바스크립트에서 동기식으로 처리를 하면 이전 작업이 완료될 때까지 다음 작업을 처리할 수 없습니다.
이 문제를 해결하기 위해 JavaScript는 비동기 처리가 필요합니다.
function test() {
for (let i = 0; i < 10000; i++) {
console.log(1);
}
console.log(2);
}- 콘솔에 10,000개의 1이 나타날 때까지 기다려야 합니다.
비동기 처리를 통해 JavaScript는 단일 스레드에서도 여러 작업을 병렬로 처리할 수 있습니다.
예를 들어, 네트워크 통신을 비동기식으로 처리하면 서버로부터 데이터를 받는 중에도 다른 작업을 처리할 수 있고, 데이터를 받는 작업이 완료되면 해당 작업을 처리할 수 있다.
왜 비동기 처리인가?
웹 페이지의 응답성 향상: 사용자가 요청한 작업이 완료될 때까지 기다리는 것은 사용자 경험에 해롭습니다.
따라서 비동기 처리를 통해 사용자 요청에 신속하게 대응해야 합니다.
네트워크 통신: 웹 어플리케이션에서는 서버와의 데이터 통신이 필요합니다.
동기식 처리는 응답을 기다리는 동안 다른 작업을 수행할 수 없기 때문에 웹 페이지의 응답성을 저하시킬 수 있습니다.
따라서 데이터를 비동기적으로 수신하면 웹 페이지의 성능을 향상시키는 데 도움이 됩니다.
병행: 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있습니다.
이를 통해 시간 소모적인 작업을 병렬로 처리할 수 있으므로 전체 작업 시간이 단축됩니다.
오류 처리: 비동기 처리 중 오류가 발생하면 오류를 쉽게 처리할 수 있습니다.
에러 발생 시 에러를 처리할 수 있는 콜백 함수를 실행하거나 에러를 잡아 처리하여 프로그램의 안정성을 높일 수 있다.
비동기 및 대기
비동기 및 대기ES2017(ECMAScript 8)부터 추가된 JavaScript의 비동기 처리 방식 중 하나입니다.
async 및 await를 사용하면 동기 코드와 같은 비동기 코드를 작성할 수 있으므로 가독성이 향상되고 오류 처리가 간소화됩니다.
Async는 함수가 비동기 함수임을 나타내기 위해 함수 앞에 붙이며, await는 비동기 함수의 실행 결과를 기다리는 키워드이다.
비동기 함수 내에서 await 키워드를 사용하면 해당 비동기 작업이 완료될 때까지 코드 실행을 일시 중지하고 결과를 기다렸다가 결과를 반환합니다.
async function getData() {
const response = await fetch('/api');
const data = await response.json();
return data;
}이 함수는 비동기 함수 getData를 정의하고 가져오기 함수를 사용하여 URL에서 데이터를 가져오고 비동기식으로 데이터를 JSON으로 구문 분석합니다.
await를 사용하여 가져오기 및 json() 메서드를 기다리고 데이터를 반환합니다.
async function getData() {
try {
const response = await fetch('/api');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
await 키워드는 Promise 객체가 완료될 때까지 코드 실행을 일시 중지하므로 오류 처리를 위해 try-catch 블록에서 사용할 수 있습니다.
가져오기에서 네트워크 오류가 발생하면 await 이후의 코드가 실행되지 않고 catch 블록으로 제어가 넘어가 오류를 처리합니다.