jQuery Academy · 강의

프라미스 연결 및 구성

.then()과 .pipe()를 사용해 여러 비동기 작업을 연결하고, $.when()으로 여러 Promise의 완료를 기다려 복잡한 작업 흐름을 구성합니다.

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

비동기 작업 순서 지정

웹 개발에서는 데이터를 가져오는 작업처럼 비동기 작업을 특정 순서로 수행해야 하는 경우가 많습니다. 프로미스 연결을 사용하면 이 작업을 깔끔하게 처리할 수 있습니다.

콜백을 중첩하면 '콜백 지옥'으로 이어질 수 있지만, 작업을 순차적으로 연결하면 코드를 훨씬 쉽게 읽고 유지 관리할 수 있습니다.

.then()으로 연결하기

.then() 메서드는 연결의 기본이 됩니다. Deferred(또는 프로미스)가 해결되면 해당 .then() 콜백이 실행됩니다. 이 콜백이 반환하는 값은 연결에서 다음 .then()이 사용할 수 있습니다.

콜백이 새로운 Deferred를 반환하면 연결은 새로운 Deferred가 해결될 때까지 기다린 후 계속 진행합니다.

간단한 .then() 연결 예제

두 단계의 비동기 작업을 시뮬레이션하는 간단한 예제를 살펴보겠습니다. 두 번째 단계는 첫 번째 단계가 완료된 후에만 실행되며, 첫 번째 단계의 데이터를 사용합니다.

step1의 결과('Data from Step 1')가 step2로 전달되는 것을 확인해 보십시오.

function runChainExample() {
  let dfd1 = new $.Deferred();
  let dfd2 = new $.Deferred();

  setTimeout(() => {
    console.log("Step 1 complete!");
    dfd1.resolve("Data from Step 1");
  }, 500);

  dfd1.then(function(data1) {
    console.log("Received in Step 2: " + data1);
    setTimeout(() => {
      console.log("Step 2 complete!");
      dfd2.resolve("Processed " + data1);
    }, 300);
    return dfd2;
  }).then(function(data2) {
    console.log("Received in Final Step: " + data2);
    console.log("Chain finished!");
  });
}

$(document).ready(function() {
  runChainExample();
});

.then() 연결에서의 데이터 흐름

.then() 콜백이 반환하는 값에 따라 다음 .then()의 입력이 결정됩니다.

Deferred가 아닌 값을 반환하면 해당 값이 다음 .then()의 해결된 값이 됩니다.
Deferred 객체를 반환하면 연결은 해당 Deferred가 해결될 때까지 일시 중지되고, 해결된 값이 다음 .then()으로 전달됩니다.

.pipe()를 사용한 변환

.then()이 현재 표준으로 사용되지만 jQuery의 .Deferred()는 .pipe()도 제공합니다. .then()과 비슷하지만, 원래는 해결되거나 거부된 값을 변환하거나 연결을 계속할 Deferred를 필터링하도록 설계되었습니다.

.pipe()를 사용하면 변환된 값으로 해결되는 새로운 Deferred를 반환하여, 해당 값을 다음 단계로 효과적으로 '흘려보낼' 수 있습니다.

.pipe() 변환 예제

여기에서는 .pipe()를 사용해 첫 번째 작업의 결과를 가져와 변환한 다음(예: 대문자로 변환), 변환된 값을 최종 .done() 처리기로 전달합니다.

function runPipeExample() {
  let dfd = new $.Deferred();

  setTimeout(() => {
    console.log("Initial data ready.");
    dfd.resolve("hello world");
  }, 500);

  dfd.pipe(function(originalData) {
    console.log("Piping: Transforming data...");
    return originalData.toUpperCase(); // Transforms the value
  }).done(function(transformedData) {
    console.log("Final result: " + transformedData);
  });
}

$(document).ready(function() {
  runPipeExample();
});

$.when()으로 조합하기

독립적인 비동기 작업이 여러 개 있고, 계속 진행하기 전에 모든 작업이 완료될 때까지 기다려야 한다면 어떻게 해야 할까요? 이때 $.when()을 사용합니다.

$.when()은 하나 이상의 Deferred 객체(또는 프로미스)를 인수로 받아 새로운 Deferred를 반환합니다. 이 새로운 Deferred는 입력된 모든 Deferred가 해결될 때만 해결됩니다.

$.when() 병렬 작업 예제

이 예제에서는 서로 독립적인 두 AJAX 요청(fetchUser 및 fetchPosts)을 시뮬레이션합니다. 두 요청이 모두 완료된 후 결합된 결과를 기록하도록 $.when()을 사용합니다.

작업이 순차적으로 실행되지 않고 병렬로 실행되는 것을 확인해 보십시오.

function runWhenExample() {
  function fetchUser() {
    let dfd = new $.Deferred();
    setTimeout(() => {
      console.log("User data fetched.");
      dfd.resolve({ id: 1, name: "Alice" });
    }, 800);
    return dfd.promise();
  }

  function fetchPosts() {
    let dfd = new $.Deferred();
    setTimeout(() => {
      console.log("Posts data fetched.");
      dfd.resolve([{ id: 101, title: "Post 1" }, { id: 102, title: "Post 2" }]);
    }, 500);
    return dfd.promise();
  }

  $.when(fetchUser(), fetchPosts())
    .done(function(userData, postsData) {
      console.log("All data loaded!");
      console.log("User: ", userData);
      console.log("Posts: ", postsData);
    })
    .fail(function() {
      console.log("One or more tasks failed.");
    });
}

$(document).ready(function() {
  runWhenExample();
});

$.when() 결과에 접근하기

$.when()이 반환한 Deferred가 해결되면 해당 .done() 또는 .then() 콜백은 입력된 각 Deferred의 해결된 값을 $.when()에 전달된 순서대로 별도의 인수로 받습니다.

따라서 모든 데이터를 사용할 수 있게 된 후 여러 출처의 데이터를 쉽게 결합하고 처리할 수 있습니다.

프로미스 연결 퀴즈

다음 jQuery 코드 조각을 살펴보십시오.

let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();

dfd1.then(function(val) {
  return val + " World";
}).then(function(newVal) {
  console.log(newVal); // Line A
  return dfd2;
}).then(function() {
  console.log("Finished!"); // Line B
});

dfd1.resolve("Hello");
dfd2.resolve();

콘솔에 출력되는 최종 결과와 그 순서는 무엇입니까?

복습: 연결 및 조합

복잡한 비동기 작업 흐름을 관리하는 방법을 배웠습니다.

.then()으로 연결하기: 작업을 순서대로 실행하고 한 단계의 결과를 다음 단계로 전달합니다.
.pipe(): 연결에서 값을 변환하거나 Deferred를 매핑하는 이전 방식의 메서드입니다.
$.when()으로 조합하기: 여러 독립적인 Deferred가 병렬로 완료될 때까지 기다린 후, 결과를 별도의 인수로 제공합니다.

이러한 패턴은 견고하고 읽기 쉬운 비동기 애플리케이션을 구축하는 데 필수적입니다.

자주 묻는 질문

“프라미스 연결 및 구성” 강의는 무료인가요?

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

“프라미스 연결 및 구성”에서 뭘 배우나요?

.then()과 .pipe()를 사용해 여러 비동기 작업을 연결하고, $.when()으로 여러 Promise의 완료를 기다려 복잡한 작업 흐름을 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“프라미스 연결 및 구성” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기