jQuery Academy · 강의

여러 비동기 작업 처리

서로 독립적이거나 종속된 여러 비동기 작업을 조정하고, 모든 작업에서 올바른 실행 순서와 오류 처리를 보장하는 방법을 익힙니다.

여러 비동기 작업 처리은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

비동기 작업을 조정해야 하는 이유

웹 개발에서는 많은 작업이 비동기로 실행됩니다. 즉, 작업이 즉시 또는 엄격한 순서에 따라 실행되지 않는다는 뜻입니다. 서버에서 데이터를 가져오거나, 이미지를 로드하거나, 애니메이션을 실행하는 경우를 생각해 보십시오.

애플리케이션에서 이러한 작업을 여러 개 동시에 실행하거나 특정 순서로 실행해야 한다면, 작업을 효과적으로 조정할 방법이 필요합니다. 이 레슨에서 그 방법을 알아보겠습니다!

여러 작업의 과제

사용자의 프로필과 최신 알림을 로드해야 하는 상황을 생각해 보십시오. 두 작업은 서로 별개의 서버 요청입니다.

두 작업 모두 완료된 시점을 어떻게 알 수 있을까요?
한 작업이 실패하면 어떻게 될까요?
한 작업이 다른 작업에 의존한다면 어떻게 될까요(예: 프로필에서 찾은 특정 사용자 ID의 알림을 가져오는 경우)?

적절히 조정하지 않으면 UI에 불완전한 데이터가 표시되거나 애플리케이션이 완전히 중단될 수 있습니다.

병렬 처리를 위한 `$.when()` 소개

jQuery의 $.when()은 여러 독립적인 비동기 작업을 조정하는 강력한 도구입니다. 하나 이상의 Deferred/프로미스 객체를 인수로 받습니다.

$.when()은 전달된 모든 개별 프로미스가 해결되면 해결되는 마스터 프로미스를 반환합니다. 그중 하나라도 거부되면 마스터 프로미스는 즉시 거부됩니다.

`$.when()` 예제: 병렬로 가져오기

서로 다른 두 데이터 집합을 병렬로 가져오는 상황을 시뮬레이션해 보겠습니다. 설명을 위해 AJAX 요청을 모방하는 데 $.Deferred()를 사용합니다.

이 코드를 실행해 보십시오.

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay) {
    let dfd = $.Deferred();
    setTimeout(function() {
      console.log(`Finished fetching ${name}`);
      dfd.resolve(`Data for ${name}`);
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500);
  let settingsPromise = fetchData("App Settings", 800);

  console.log("Starting parallel fetches...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully!");
      console.log(`Profile: ${profileData}`);
      console.log(`Settings: ${settingsData}`);
    });
});

`$.when()` 결과 처리

$.when() 프로미스가 해결되면 해당 .done() 콜백은 원래 프로미스 각각의 해결된 값을 별도의 인수로 받습니다.

N개의 프로미스를 $.when()에 전달하면 .done() 콜백은 N개의 인수를 받습니다.
인수의 순서는 프로미스를 $.when()에 전달한 순서와 같습니다.

따라서 모든 결과가 준비된 후 결과 전체를 쉽게 처리할 수 있습니다.

`$.when()` 오류 처리

병렬 작업 중 하나가 실패하면 어떻게 될까요? 개별 프로미스 중 하나라도 거부되면 $.when()의 마스터 프로미스가 즉시 거부됩니다.

그러면 .fail() 콜백이 실행되며, 가장 먼저 실패한 프로미스의 거부 이유를 받습니다. 나머지 병렬 작업은 계속 완료되지만, $.when()은 이미 실패를 알린 상태입니다.

예제: 실패가 발생하는 `$.when()`

이전 예제를 수정하여 가져오기 작업 중 하나가 실패하도록 만들어 보겠습니다. 출력을 확인해 보십시오.

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay, shouldSucceed = true) {
    let dfd = $.Deferred();
    setTimeout(function() {
      if (shouldSucceed) {
        console.log(`Finished fetching ${name}`);
        dfd.resolve(`Data for ${name}`);
      } else {
        console.log(`Failed to fetch ${name}`);
        dfd.reject(`Error: ${name} could not be loaded`);
      }
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500, true);
  let settingsPromise = fetchData("App Settings", 800, false); // This one will fail

  console.log("Starting parallel fetches (one will fail)...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully! (This won't run)");
    })
    .fail(function(errorReason) {
      console.log("One or more operations failed!");
      console.log(`Reason: ${errorReason}`);
    });
});

종속 작업 조정하기

작업이 서로 독립적이지 않은 경우도 있습니다. 다음과 같은 작업이 필요할 수 있습니다.

사용자 ID를 가져옵니다.
그런 다음 해당 ID를 사용해 사용자의 세부 정보를 가져옵니다.
그런 다음 해당 세부 정보를 사용해 사용자의 특정 게시물을 가져옵니다.

이를 위해서는 각 단계가 이전 단계의 성공과 결과에 의존하는 비동기 작업의 순차적 연결이 필요합니다. .then() 또는 .pipe()를 연결하여 이를 구현할 수 있습니다.

예제: 종속 AJAX 연결

두 번째 요청이 첫 번째 요청의 결과에 의존하는 두 개의 AJAX 호출을 시뮬레이션하여 연결하는 방법을 살펴보겠습니다. 첫 번째 .then()의 반환값이 다음 .then()의 입력이 되는 것을 확인해 보십시오.

// Assume jQuery is loaded in the environment
$(function() {
  function fetchUserId() {
    let dfd = $.Deferred();
    setTimeout(() => {
      console.log("User ID fetched: 123");
      dfd.resolve(123);
    }, 500);
    return dfd.promise();
  }

  function fetchUserDetails(userId) {
    let dfd = $.Deferred();
    setTimeout(() => {
      if (userId === 123) {
        console.log(`Details fetched for user ${userId}`);
        dfd.resolve(`Details for User ${userId}`);
      } else {
        dfd.reject("Invalid User ID");
      }
    }, 700);
    return dfd.promise();
  }

  console.log("Starting dependent fetch chain...");

  fetchUserId()
    .then(function(id) {
      return fetchUserDetails(id); // Return a new promise
    })
    .done(function(details) {
      console.log("Full chain successful!");
      console.log(`Final Result: ${details}`);
    })
    .fail(function(error) {
      console.log("Chain failed:", error);
    });
});

지식 테스트

사용자의 프로필과 친구 목록을 로드해야 하는 상황을 생각해 보십시오. 친구 목록 요청에는 프로필 데이터에 포함된 사용자의 ID가 필요합니다.

이러한 조정에 가장 적합한 jQuery 방식은 무엇입니까?

복습: 비동기 조정 마스터하기

여러 비동기 작업을 효과적으로 처리하는 방법을 배웠습니다!

$.when(): 독립적인 작업을 병렬로 실행하고 모두 완료되거나 하나라도 실패할 때까지 기다리는 데 적합합니다.
.then()으로 연결하기: 한 작업의 출력이 다음 작업에 필요한 종속 작업에 적합합니다.
오류 처리: $.when()과 연결된 프로미스 모두 어느 단계에서든 거부를 포착할 수 있도록 .fail()을 제공하여 애플리케이션의 견고성을 높입니다.

이러한 패턴은 jQuery를 사용해 동적이고 반응성 높은 웹 애플리케이션을 구축하는 데 필수적입니다.

자주 묻는 질문

“여러 비동기 작업 처리” 강의는 무료인가요?

네 — “여러 비동기 작업 처리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“여러 비동기 작업 처리”에서 뭘 배우나요?

서로 독립적이거나 종속된 여러 비동기 작업을 조정하고, 모든 작업에서 올바른 실행 순서와 오류 처리를 보장하는 방법을 익힙니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.

“여러 비동기 작업 처리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기