jQuery Academy · 강의

지연 객체 이해하기

jQuery 지연 객체의 핵심 개념과 비동기 작업을 나타내는 방식, 그리고 대기 중·완료·거부 상태를 이해합니다.

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

비동기 작업과 콜백

웹 개발에서는 많은 작업이 즉시 실행되지 않습니다. 서버에서 데이터를 가져오거나 사용자의 클릭을 기다리는 경우를 생각해 보세요. 이러한 작업을 비동기 작업이라고 합니다.

전통적으로는 콜백을 사용했습니다. 콜백은 비동기 작업이 끝난 후에만 실행되는 함수입니다. 하지만 중첩된 콜백은 '콜백 지옥'으로 이어져 코드를 읽고 유지 관리하기 어렵게 만들 수 있습니다.

jQuery Deferred 알아보기

이럴 때 jQuery의 Deferred 객체가 유용합니다! Deferred 객체는 비동기 작업을 더 깔끔하게 관리할 수 있는 강력한 방법입니다.

Deferred 객체는 미래에 반환될 결과를 위한 자리 표시자처럼 동작합니다. 여기에 함수를 연결하면 작업이 성공했는지 실패했는지와 관계없이 작업이 끝났을 때 해당 함수가 실행되며, 주 코드의 실행을 막지 않습니다.

Deferred의 세 가지 상태

Deferred 객체는 자신이 나타내는 비동기 작업의 상태를 반영하여 다음 세 상태 중 하나가 될 수 있습니다.

대기 중: 초기 상태입니다. 작업이 아직 완료되지 않았습니다.
해결됨: 작업이 성공적으로 완료되었습니다.
거부됨: 작업이 실패했거나 오류가 발생했습니다.

Deferred 객체가 해결되거나 거부된 후에는 상태를 다시 변경할 수 없습니다.

Deferred 객체 만들기

$.Deferred()를 사용하여 새 Deferred 객체를 만듭니다. 이 객체는 대기 중 상태로 시작합니다.

Deferred 객체는 상태를 변경하고 상태가 바뀔 때 실행할 콜백 함수를 등록하는 메서드를 제공합니다.

하나 만들어 보세요.

var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));

성공 알리기: .resolve()

비동기 작업이 성공적으로 완료되면 Deferred 객체에서 .resolve() 메서드를 호출합니다.

그러면 상태가 대기 중에서 해결됨으로 바뀝니다. .resolve()에 전달한 인수는 성공 콜백에 전달됩니다.

상태가 바뀌는 모습을 확인해 보세요.

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.resolve('Data fetched!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

실패 알리기: .reject()

비동기 작업이 실패하면 .reject() 메서드를 호출합니다.

그러면 Deferred의 상태가 대기 중에서 거부됨으로 바뀝니다. .reject()에 전달한 인수는 실패 콜백으로 전달되며, 흔히 오류 메시지가 여기에 해당합니다.

거부가 어떻게 동작하는지 확인해 보세요.

var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());

setTimeout(function() {
  myDeferred.reject('Network error!');
  console.log('New state: ' + myDeferred.state());
}, 1000);

.done()으로 성공 처리

성공적으로 완료된 작업(Deferred가 해결됨 상태인 경우)에 반응하려면 .done() 메서드를 사용하여 콜백 함수를 연결합니다.

이 함수는 .resolve()가 호출된 경우에만 실행되며, .resolve()가 전달한 인수를 받습니다.

데이터를 처리해 보겠습니다.

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = true; // Simulate success
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().done(function(message) {
  console.log('Success handler: ' + message);
});

.fail()로 실패 처리

마찬가지로 오류를 처리하려면(Deferred가 거부됨 상태인 경우) .fail() 메서드를 사용합니다.

.fail()에 전달한 콜백 함수는 .reject()가 호출된 경우에만 실행되며, .reject()의 인수를 받습니다.

오류를 시뮬레이션해 보겠습니다.

var fetchData = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    var success = false; // Simulate failure
    if (success) {
      dfd.resolve('User data loaded.');
    } else {
      dfd.reject('Failed to load user data.');
    }
  }, 1000);
  return dfd;
};

fetchData().fail(function(errorMessage) {
  console.log('Error handler: ' + errorMessage);
});

항상 실행하기: .always()

비동기 작업의 성공 여부와 관계없이 실행해야 하는 코드가 있을 때가 있습니다. 이럴 때 .always()를 사용합니다.

.always()로 연결한 콜백 함수는 Deferred가 해결됨 또는 거부됨 상태일 때 모두 실행됩니다.

정리 작업이나 최종 사용자 인터페이스 업데이트에 .always()를 사용해 보세요.

var fetchData = function(shouldSucceed) {
  var dfd = $.Deferred();
  setTimeout(function() {
    if (shouldSucceed) {
      dfd.resolve('Data received!');
    } else {
      dfd.reject('Request failed!');
    }
  }, 1000);
  return dfd;
};

fetchData(false)
  .done(function(msg) { console.log('Success: ' + msg); })
  .fail(function(err) { console.log('Failure: ' + err); })
  .always(function() { console.log('Operation finished.'); });

.promise()로 보호하기

함수에서 Deferred 객체를 반환할 때 외부 코드가 상태를 변경하지 못하게 해야 할 수 있습니다(예: .resolve() 또는 .reject()를 직접 호출하는 경우).

.promise() 메서드는 Deferred 객체의 '읽기 전용' 버전을 반환합니다. 이 버전은 콜백을 연결하는 메서드(예: .done(), .fail(), .always())만 노출하고 상태를 변경하는 기능은 노출하지 않습니다.

var createAsyncTask = function() {
  var dfd = $.Deferred();
  setTimeout(function() {
    dfd.resolve('Task done!');
  }, 500);
  // Return only the promise, not the full Deferred object
  return dfd.promise();
};

var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
  console.log(msg);
});

// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise object

지식 확인

Deferred 객체가 비동기 작업을 성공적으로 완료했을 때에만 실행되는 콜백을 등록하려면 다음 중 어떤 방법을 사용하시겠습니까?

복습: Deferred 기초

잘하셨습니다! 이번 레슨에서 jQuery Deferred 객체의 핵심 개념을 익히셨습니다.

Deferred 객체는 비동기 작업을 관리하여 콜백 지옥을 방지합니다.
대기 중, 해결됨 또는 거부됨 상태로 존재합니다.
성공에는 .resolve()를 사용하고 실패에는 .reject()를 사용합니다.
콜백은 .done()(성공), .fail()(실패), .always()(둘 다)를 사용해 연결합니다.
.promise()는 상태 조작을 보호하는 읽기 전용 객체를 반환합니다.

다음에는 이 강력한 객체를 연결하고 조합하는 방법을 알아보겠습니다!

자주 묻는 질문

“지연 객체 이해하기” 강의는 무료인가요?

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

“지연 객체 이해하기”에서 뭘 배우나요?

jQuery 지연 객체의 핵심 개념과 비동기 작업을 나타내는 방식, 그리고 대기 중·완료·거부 상태를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“지연 객체 이해하기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기