JavaScript에서 비동기

Source: Dev.to

🔴 Synchronous (Normal)

하나의 작업이 끝난 뒤에야 다음 작업이 시작됩니다.

console.log("One");
console.log("Two");
console.log("Three");

👉 Output

One
Two
Three

🟢 Asynchronous

긴 작업은 백그라운드에서 실행되고, 짧은 작업은 즉시 실행됩니다.

console.log("Start");

setTimeout(() => {
  console.log("Middle");
}, 2000);

console.log("End");

👉 Output

Start
End
Middle

🔹 Why Asynchronous needed?

• API 호출에 시간이 걸린다
• 파일 로딩에 시간이 걸린다
• 타이머, 사용자 입력 대기

👉 앱이 멈추는 것을 방지하기 위해 비동기를 사용합니다.

🔹 Common Asynchronous methods

1️⃣ setTimeout()

지연 후에 실행됩니다.

setTimeout(() => {
  console.log("Hello");
}, 1000);

2️⃣ setInterval()

반복적으로 실행됩니다.

setInterval(() => {
  console.log("Hi");
}, 2000);

3️⃣ Promise

미래에 결과가 올 것이라는 약속입니다.

let promise = new Promise((resolve, reject) => {
  resolve("Success");
});

4️⃣ async / await

Promise를 간단하게 처리합니다.

async function loadData() {
  let result = await fetch(url);
}