나중에 다시 보려고 적는 글
참조
동기와 비동기
1. 동기 vs 비동기
비동기 작동 방법은 한 번에 여러 task가 동시에 병렬적으로 실행된다.
반면, 동기 작동 방법은 하나의 task가 끝날 때까지 기다렸다가 다음 task가 실행된다.
총 실행 시간으로 따지면 '동기' 방식이 느리다.
왼쪽이 '비동기' 오른쪽이 '동기'방식이다.
이미지 출처 : 링크텍스트
동기 비동기 이해
동기란?
- 직렬적으로 task를 수행
- 즉, 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식
- 어떠한 task를 처리할 동안 나머지 task는 대기한다.
- 시스템의 전체적인 효율 저하 발생
비동기란?
- 병렬적으로 task를 수행
- 요청을 보낸 후, 응답의 수락 여부와는 상관없이 다음 task가 동작하는 방식
- 비동기 요청시, 응답 후 처리할 '콜백함수'를 함께 알려준다. 따라서 해당 task가 완료되었을 때 '콜백함수'가 호출된다.
이미지 출처: 비동기식 처리 모델(Asynchronous processing model)
2. Async / Await
async await 이해
async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다.
기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 특히, promise를 조금 더 퍈하게 사용할 수 있다. 아래는 async await의 기본 문법이다.
async function 함수명() {
await 비동기_처리_메서드_명();
}async 개념
- async 키워드는 function 앞에 사용한다. function 앞에 async를 붙이면 해당 함수는 항상 Promise를 반환한다. Promise가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.
- 아래 예시의 함수를 호출하면 result가 3인 이행 프라미스가 반환된다.
async function f() {
return 3;
}
f().then(alert); // 3위 함수에서 3을 Promise.resolve로 감싸도 같은 결과를 반환한다.
async function f() {
return Promise.resolve(3);
}
f().then(alert); // 3즉, async가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환한다.
await 개념
- await는 async 함수 안에서만 동작한다. await는 프라미스가 처리될 때까지 기다리는 역할을 한다. 그리고 결과는 그 이후 반환된다.
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000)
});
let result = await promise; // 프라미스가 이행될 때까지 기다림 (*)
alert(result); // "완료!"
}
f();-
함수를 호출하고, 함수 본문이 실행되는 도중에 (*)로 표시한 줄에서 실행이 잠시 '중단'되었다가 프라미스가 처리되면 실행이 재개된다.
-
이때 프라미스가 객체의 result값이 변수 result에 할당되어 위 예시를 실행하면 1초 뒤에 '완료!'가 출련된다.
await는 말 그대로 프라미스가 처리될 때까지 함수 실행을 기다리게 만든다. 프라미스가 처리되면 그 결과와 함께 실행이 재개된다. 프라미스가 처리되길 기다리는 동안엔 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않는다.
await를 사용하지 않았다면 데이터를 받아온 시점에 콘솔을 출력할 수 있게 콜백 함수나 .then()
등을 사용해야 했을 것이다. 하지만 async await 문법덕에 비동기에 대한 사고를 하지 않아도 된다.
또한, await는 promise.then보다 좀 더 세련되게 프라미스의 result 값을 얻을 수 있도록 해주는 문법이다. promise.then보다 가독성 좋고 쓰기도 쉽다.
