JavaScript는 단일 스레드 언어입니다. 즉, 한 번에 한 가지 작업만 수행할 수 있습니다. 그러나 웹 애플리케이션은 서버에서 데이터를 가져오는 것과 같은 작업을 수행해야 하는 경우가 많으며 이 작업에는 시간이 걸릴 수 있습니다. JavaScript가 계속 진행하기 전에 각 작업이 완료될 때까지 기다려야 한다면 웹 앱이 느려지고 응답하지 않게 됩니다. 이것이 비동기(비동기) JavaScript가 필요한 곳입니다.

비동기 JavaScript란 무엇입니까?

비동기 JavaScript를 사용하면 코드에서 작업을 시작한 다음 해당 작업이 완료되기를 기다리는 동안 다른 작업으로 이동할 수 있습니다. 작업이 완료되면 코드가 다시 돌아와 결과를 처리할 수 있습니다. 이는 앱의 속도와 반응성을 유지하는 데 도움이 됩니다.

비동기 JavaScript의 주요 개념

1. 동기식 대 비동기식:

   • 동기식: 각 작업은 시작하기 전에 이전 작업이 완료될 때까지 기다립니다. 예를 들어:

    console.log("Start");
    let result = someFunction(); // This might take a while
    console.log("End");
   

   동기 코드에서 "종료" 메시지는 someFunction()이 완료된 후에만 기록되므로 속도가 느려질 수 있습니다.

• 비동기: 작업을 독립적으로 시작하고 완료할 수 있으므로 코드가 기다리다가 멈추는 일이 없습니다. 예를 들어:
  

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

  여기서 '종료' 메시지는 2초 후에 기록되지만 그 동안 코드는 다른 작업을 계속할 수 있습니다.

1. 콜백:

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

    function fetchData(callback) {
        setTimeout(() => {
            let data = "Some data";
            callback(data);
        }, 2000);
    }
   
    fetchData((data) => {
        console.log(data); // This will log "Some data" after 2 seconds
    });
   

• 콜백은 비동기 작업을 처리하는 원래 방법이었지만 특히 관리할 작업이 많은 경우 복잡해질 수 있습니다(이를 "콜백 지옥"이라고 함).

1. 약속:

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

    let promise = new Promise((resolve, reject) => {
        let success = true;
        if (success) {
            resolve("Task completed successfully!");
        } else {
            reject("Task failed!");
        }
    });
   
    promise.then((message) => {
        console.log(message);
    }).catch((error) => {
        console.log(error);
    });
   

• 해결: 작업이 성공적으로 완료되면 약속이 값으로 "해결"됩니다.
• 거부: 작업이 실패하면 오류 메시지와 함께 약속이 "거부"됩니다.
• .then(): Promise가 해결되면 반환된 값을 처리합니다.
• .catch(): Promise가 거부된 경우 오류를 처리합니다.

1. 비동기/대기:

   • async 및 await는 Promise 작업을 더욱 쉽고 읽기 쉽게 만들어주는 최신 JavaScript 기능입니다.
   • async: async로 선언된 함수는 항상 Promise를 반환합니다.
   • await: Promise가 해결될 때까지 비동기 함수 실행을 일시 중지합니다.
   • 예:

    async function fetchData() {
        try {
            let data = await someAsyncTask();
            console.log(data);
        } catch (error) {
            console.error("Error:", error);
        }
    }
   

• 이 예에서는 다음 코드 줄로 이동하기 전에 someAsyncTask가 완료될 때까지 기다리는 데 wait 키워드가 사용됩니다. 작업이 실패하면 오류가 포착되어 catch 블록에서 처리됩니다.

요약

• 비동기 자바스크립트는 코드가 동시에 여러 작업을 처리할 수 있도록 하여 앱이 느려지거나 응답하지 않는 현상을 방지하는 데 도움이 됩니다.
• 콜백은 비동기 작업이 완료된 후 실행되는 함수이지만 복잡한 작업에서는 지저분해질 수 있습니다.
• 프라미스는 비동기 작업을 처리하는 보다 깔끔한 방법을 제공하여 향후 완료될 작업을 나타냅니다.
• Async/Await는 Promise 작업을 더 간단하고 읽기 쉽게 만드는 현대적인 구문입니다.

비동기 JavaScript를 이해하는 것은 느린 작업이 완료될 때까지 기다리지 않고 코드가 작업을 수행할 수 있도록 해주기 때문에 응답성이 뛰어나고 효율적인 웹 애플리케이션을 구축하는 데 필수적입니다.