JS_비동기

💡 목표

• 비동기의 개념을 이해한다.
• Callback에 대해 이해한다.
• Promise, async/await에 대해 이해한다.
• 타이머 API에 대해 이해한다.

1. 비동기

Synchronous vs Asynchronous

개념 자체는 어렵지 않다. 기초적인 사고력만 있으면 초등학생도 알법한 개념이지만 뒤에 나오는 문법이 어렵기 때문에 마치 이 개념조차 어렵게 취급하고 있다. 라면 5인분을 냄비 1개로 1인분씩 끓이는 거랑, 냄비 5개로 끓이는 것의 차이를 굳이 설명해야 하는가. 한 개씩 끓이는 사람도 나름 이유는 있을 것이다. 순서가 중요하니까. 하지만 냄비 5개로도 나름 순서를 유지하는 방법은 많다. 시간 간격 두고 끓이면 된다. 너무 간단한 개념이지만 이 개념을 문법으로 구현하고, 수학적 계산이 가미 되기 때문에 어렵게 설명될 수 밖에 없는 패턴의 반복이다.

2. Callback

studying

3. Promise

• 두 개의 매개변수 resolve와 reject를 활용할 수 있다.

4. Async/await

• ES6 이상에서 비동기 통신 처리 작업을 보다 더 쉽게, 보다 더 편리하게 사용하기 위한 것
• promise를 더 편리하게 쓰기 위한 버전
• promise가 fulfilled 또는 rejected 될 때까지 async 함수의 실행 > 일시 정지하고 기다린다.
• promise가 fulfilled되면 async 함수를 다시 실행
• 이때, await 반환 값 > promise에서 fulfilled 된 값

// async 없이 promise 객체 반환
function testFunc() {
  return Promise.resolve(100);
}
alert(testFunc());  // object Promise

// async 사용 Promise 객체 반환
async function testFunc2() {
  return 100;
}
alert(testFunc2());  // object Promise

// async 사용하여 Pormise 객체 반환 > 화살표 함수 사용
const testFunc3 = async() => {
  return 100;
}
alert(testFunc3());  // object Promise

5. 타이머 API

5-1. setTimeout(callback, millisecond)

일정 시간이 지난 후에 함수를 실행한다. 자바스크립트에 내장된 비동기 함수

5-2. clearTimeout(timerId)

setTimeout 타이머를 종료한다.

5-3. setInterval(callback, millisecond)

일정 시간의 간격을 가지고 함수를 반복적으로 실행한다.

5-4. clearInterval(timerId)

setInterval 타이머를 종료한다.