비동기 JavaScript 마스터하기: 콜백, 약속 및 Async/Await

비동기 자바스크립트

비동기 JavaScript를 사용하면 작업을 메인 스레드와 독립적으로 실행할 수 있으므로 애플리케이션의 응답성과 효율성이 유지됩니다. 이는 API 호출, 파일 읽기 또는 지연과 같은 작업을 처리하는 데 특히 중요합니다.

---

1. 동기식 코드와 비동기식 코드

동기 코드:

• 한줄씩 순차적으로 실행합니다.
• 현재 작업이 완료될 때까지 후속 작업을 차단합니다.

예:

console.log("Start");
console.log("End");
// Output:
// Start
// End

비동기 코드:

• 작업이 완료되기를 기다리는 동안 다른 작업을 계속할 수 있습니다.
• 콜백, Promise 또는 async/await를 사용하여 결과를 처리합니다.

예:

console.log("Start");
setTimeout(() => {
  console.log("Async Task");
}, 2000);
console.log("End");
// Output:
// Start
// End
// Async Task

---

2. 비동기 프로그래밍 방법

아. 콜백

콜백은 비동기 작업이 완료된 후 실행되는 다른 함수에 인수로 전달되는 함수입니다.

예:

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched!");
  }, 2000);
}

fetchData((data) => {
  console.log(data); // Output: Data fetched!
});

단점:

• 여러 비동기 작업을 연결할 때 "콜백 지옥"이 발생합니다.

ㄴ. 약속

Promise는 현재, 미래에 사용할 수 있거나 전혀 사용할 수 없는 가치를 나타냅니다.

약속 상태:

• 보류 중: 초기 상태입니다.
• 이행됨: 성공적으로 완료되었습니다.
• 거부됨: 실패했습니다.

약속 만들기:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

fetchData.then((data) => {
  console.log(data); // Output: Data fetched!
});

오류 처리:

fetchData
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

ㄷ. 비동기/대기

async 및 wait는 promise 작업 시 더 읽기 쉬운 구문을 제공합니다.

예:

async function fetchData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
  });
  console.log(data); // Output: Data fetched!
}

fetchData();

오류 처리:

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      reject("Error fetching data!");
    });
    console.log(data);
  } catch (error) {
    console.error(error); // Output: Error fetching data!
  }
}
fetchData();

---

3. 비동기 사용 사례

아. Fetch를 사용한 API 호출

Fetch API는 HTTP 요청을 수행하는 현대적인 방법입니다.

async function getData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data);
}
getData();

ㄴ. 이벤트 리스너

이벤트 처리의 비동기 동작.

document.getElementById("button").addEventListener("click", () => {
  setTimeout(() => {
    console.log("Button clicked!");
  }, 1000);
});

ㄷ. 타이머

지연을 위해 setTimeout 및 setInterval을 사용합니다.

setTimeout(() => console.log("Timeout executed!"), 2000);

---

4. 이벤트 루프

이벤트 루프는 JavaScript에서 비동기 작업을 관리하는 메커니즘입니다. 작업은 다음 순서로 대기열에 추가되고 실행됩니다.

1. Call Stack: 동기 코드를 실행합니다.
2. 작업 대기열: 비동기 콜백(예: setTimeout)을 실행합니다.
3. 마이크로태스크 대기열: 약속 해결을 실행합니다.

예:

console.log("Start");
console.log("End");
// Output:
// Start
// End

---

5. 일반적인 함정

1. 오류 처리를 잊어버린 경우:

   • 프로미스에는 항상 .catch() 또는 try/catch를 사용하세요.

2. 메인 스레드 차단:

   • 장기 실행 동기 작업을 피하세요.

3. 콜백 지옥:

   • 대신 Promise나 async/await를 사용하세요.

---

6. 요약

Technique	Description
Callbacks	Functions executed after async tasks.
Promises	Chained mechanism for async tasks.
Async/Await	Cleaner syntax for handling promises.

응답성이 뛰어나고 효율적인 웹 애플리케이션을 만드는 데는 JavaScript의 비동기 프로그래밍을 이해하고 활용하는 것이 중요합니다. 콜백, Promise 및 async/await를 마스터함으로써 개발자는 비동기 작업을 효과적으로 관리할 수 있습니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

위 내용은 비동기 JavaScript 마스터하기: 콜백, 약속 및 Async/Await의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!