JavaScript 비동기 프로그래밍 이해: 콜백, 약속 및 Async/Await

사용자 친화적이고 반응성이 뛰어나며 효율적인 앱을 만드는 데에는 JavaScript의 비동기 특성이 필수적입니다. 성공적인 탐색을 위해서는 콜백, 약속, 비동기/대기 등 비동기 프로그래밍의 기본 아이디어를 이해하는 것이 중요합니다. 이 매뉴얼에서는 이러한 아이디어를 분석하고 적용, 장점 및 단점을 검토합니다.

---

비동기식 프로그래밍과 동기식 프로그래밍

동기 프로그래밍:

• 동기 프로그래밍에서는 작업이 순차적으로 실행됩니다. 프로그램은 다음 작업으로 넘어가기 전에 작업이 완료될 때까지 기다립니다.
• 이 접근 방식은 특히 네트워크 요청이나 파일 처리와 같이 시간이 많이 걸리는 작업 중에 비효율성을 초래할 수 있습니다.

동기 코드의 예:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

비동기 프로그래밍:

• 비동기 프로그래밍을 사용하면 작업을 독립적으로 실행할 수 있으므로 일부 작업이 완료될 때까지 기다리는 동안 프로그램이 다른 작업을 계속 실행할 수 있습니다.
• 이 기능은 대기 시간으로 인해 사용자 인터페이스가 정지될 수 있는 서버에서 데이터를 가져오는 작업과 같은 작업에 특히 유용합니다.

---

비동기 프로그래밍이 필요한 이유는 무엇입니까?

1. 응답성: 장시간 작업 중에 UI가 응답하지 않는 것을 방지합니다.
2. 효율성: 여러 작업을 동시에 실행하여 리소스 사용을 최적화할 수 있습니다.
3. 사용자 경험: 원활하고 중단 없는 작업 흐름을 보장하여 상호 작용을 향상합니다.

---

콜백

정의: 콜백은 다른 함수에 인수로 전달되는 함수로, 작업 완료 후 실행됩니다.

예:

function fetchData(callback) {
    console.log("Fetching data...");
    setTimeout(() => {
        const data = "Data received"; // Simulate fetched data
        callback(data); // Execute the callback with the data
    }, 2000);
}

fetchData((data) => {
    console.log(data); // Logs after data is fetched
});

설명:

• fetchData 함수는 setTimeout을 사용하여 지연을 시뮬레이션합니다.
• 지연이 끝나면 가져온 데이터로 콜백이 실행됩니다.

콜백 문제:

• 콜백 지옥: 여러 비동기 작업이 서로 의존하는 경우 깊게 중첩된 콜백으로 인해 코드를 읽고 유지 관리하기가 어려워집니다.

---

약속

정의: Promise는 비동기 작업의 최종 완료(또는 실패)와 결과 값을 나타내는 개체입니다.

혜택:

• 비동기 작업 연결을 단순화합니다.
• 콜백에 비해 더 나은 오류 처리 기능을 제공합니다.

예:

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data...");
        setTimeout(() => {
            const data = "Data received";
            resolve(data); // Resolve the promise with data
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // Logs after promise is resolved
    })
    .catch(error => {
        console.error(error); // Handles errors
    });

설명:

• Promise는 성공을 위해 .then()을 연결하고 오류 처리를 위해 .catch()를 연결하여 가독성을 향상시킵니다.
• 콜백의 일반적인 중첩 구조를 제거합니다.

---

비동기/대기

정의: Async/await는 Promise 위에 구축된 구문 설탕으로, 동기 코드처럼 보이고 동작하는 비동기 코드를 작성할 수 있게 해줍니다.

혜택:

• 코드 가독성과 유지 관리성이 향상됩니다.
• 비동기 로직을 ​​더욱 간단하게 처리합니다.

예:

function task1() {
    console.log("Task 1 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 1 completed");
}

function task2() {
    console.log("Task 2 started");
    for (let i = 0; i < 1e9; i++); // Simulating a long task
    console.log("Task 2 completed");
}

task1(); // Executes first
task2(); // Executes after task1 is completed

설명:

• async 키워드는 함수에 비동기 코드가 포함되어 있음을 나타냅니다.
• await 키워드는 Promise가 해결될 때까지 실행을 일시 중지하여 비차단 상태를 유지하면서 코드가 동기식으로 나타나도록 합니다.

---

요점 요약

1. 동기식 대 비동기식:

   • 동기 코드는 작업이 완료될 때까지 실행을 차단합니다.
   • 비동기 코드를 사용하면 다른 작업을 동시에 실행할 수 있습니다.

2. 콜백:

   • 비동기 결과를 처리하기 위해 전달되는 함수
   • 복잡한 종속성으로 인해 콜백 지옥에 취약합니다.

3. 약속:

   • 콜백에 대한 더 깔끔한 대안, 연결 및 오류 처리 지원.

4. 비동기/대기:

   • 비동기 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다.

---

이러한 전략을 이해하고 활용하면 효과적이고 활용하기 쉬운 JavaScript 애플리케이션을 개발할 수 있습니다. 간단한 작업을 관리하든 복잡한 워크플로를 생성하든, 숙련된 JavaScript 개발자가 되려면 비동기 프로그래밍을 배우는 것이 필수적입니다.

Follow me on: Github Linkedin Threads

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