jQuery Academy · 강의

AJAX 오류 및 성공 처리

.fail()과 .always() 콜백으로 견고한 오류 처리 메커니즘을 구현하고, .done()으로 성공적으로 가져온 데이터를 처리해 복원력 높은 애플리케이션을 만듭니다.

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

비동기 결과 처리

AJAX 요청을 보내면 비동기 작업이 수행됩니다. 즉, 코드가 서버의 응답을 기다리지 않고 다른 작업을 계속 실행합니다.

서버의 응답이 있거나 없는 경우를 처리하기 위해 jQuery는 콜백이라는 특별한 메서드를 제공합니다. 이러한 함수는 성공이나 실패처럼 특정 이벤트가 발생할 때만 실행됩니다.

모든 것이 순조로울 때

.done() 콜백은 성공한 AJAX 요청을 처리할 때 사용하는 기본 방법입니다. 서버가 성공을 나타내는 상태 코드(일반적으로 200~299)로 응답하면 실행됩니다.

서버에서 반환된 데이터를 전달받습니다.
새로운 정보로 UI를 업데이트하기에 가장 적합한 곳입니다.

성공한 데이터 표시

데이터를 가져온 다음 요청이 성공하면 화면에 표시해 보겠습니다. $.ajax() 호출에 .done()이 연결되어 있는 점에 주목하십시오.

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data received:");
    console.log(data.title); // Access a property
    $('body').append('<p>Post Title: ' + data.title + '</p>');
  });
});

문제가 발생했을 때

하지만 서버가 요청을 처리하지 못하면 어떻게 해야 할까요? 이때 .fail() 콜백을 사용합니다. 404(찾을 수 없음)나 500(서버 오류)처럼 AJAX 요청에서 오류가 발생하면 실행됩니다.

사용자에게 알리거나 문제를 기록하는 데 도움이 됩니다.
오류에 관한 세부 정보를 전달받습니다.

실패에 대응하기

존재하지 않는 URL에서 데이터를 가져와 보겠습니다. .fail() 콜백이 오류를 포착하고 세부 정보를 기록합니다.

$(document).ready(function() {
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/nonexistent", // This URL will fail
    method: "GET"
  })
  .done(function(data) {
    console.log("This won't run on error.");
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Error! Status: " + textStatus);
    console.log("HTTP Error: " + errorThrown);
    $('body').append('<p>Error fetching data!</p>');
    $('body').append('<p>Status: ' + textStatus + '</p>');
  });
});

오류 매개변수 해석하기

.fail() 콜백은 무엇이 잘못되었는지 파악하는 데 도움이 되는 세 가지 유용한 매개변수를 제공합니다.

jqXHR: 낮은 수준의 세부 정보를 제공하는 jQuery XMLHttpRequest 객체입니다.
textStatus: 오류 유형을 설명하는 문자열입니다(예: "timeout", "error", "abort").
errorThrown: HTTP 상태 텍스트입니다(예: 404의 경우 "Not Found").

이 정보를 사용하여 사용자에게 구체적인 피드백을 제공하십시오.

항상 실행하기

때로는 AJAX 요청의 성공 여부와 관계없이 작업을 수행해야 합니다. 이것이 .always() 콜백의 역할입니다.

어느 쪽이든 .done() 또는 .fail() 이후에 항상 실행됩니다.
로딩 표시기를 숨기거나 버튼을 다시 활성화하는 등 정리 작업에 유용합니다.

정리 작업 수행하기

이전 예제에 .always()를 추가해 보겠습니다. 로딩 상태를 시뮬레이션하고 요청이 성공하든 실패하든 해당 상태가 제거되도록 하겠습니다.

$(document).ready(function() {
  $('body').append('<p id="status">Loading data...</p>'); // Simulate loading
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1", // Try changing to 'nonexistent' to see fail+always
    method: "GET"
  })
  .done(function(data) {
    console.log("Success! Data: " + data.title);
    $('#status').text('Data loaded successfully!');
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("Failed! " + textStatus);
    $('#status').text('Failed to load data!');
  })
  .always(function() {
    console.log("Request finished (success or failure).");
    // This could be where you hide a spinner or re-enable a button
    $('#status').append(' (Finished)');
  });
});

콜백 구성하기

jQuery의 AJAX 메서드는 Promise와 유사한 객체를 반환하므로 .done(), .fail(), .always() 메서드를 직접 연결할 수 있습니다.

이렇게 연결하면 코드가 더 깔끔하고 읽기 쉬워지며, 성공, 오류, 최종 처리 로직을 명확히 나눌 수 있습니다.

지식 확인하기

다음 jQuery AJAX 요청을 살펴보십시오.


$.ajax({
  url: "/api/data",
  method: "GET"
})
.done(function() {
  console.log("A");
})
.fail(function() {
  console.log("B");
})
.always(function() {
  console.log("C");
});

서버가 404 Not Found 오류로 응답하면 콘솔에 무엇이 출력될까요?

AJAX 처리 요약

안정적인 AJAX 처리에 필요한 핵심 콜백을 익혔습니다.

.done(): 성공적인 응답을 처리합니다.
.fail(): 오류를 처리합니다.
.always(): 어떤 상황에서도 실행해야 하는 작업에 사용합니다.

이를 활용하면 애플리케이션이 네트워크 상호작용을 원활하게 처리하여, 일이 계획대로 진행되지 않을 때도 사용자에게 더 나은 경험을 제공할 수 있습니다!

자주 묻는 질문

“AJAX 오류 및 성공 처리” 강의는 무료인가요?

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

“AJAX 오류 및 성공 처리”에서 뭘 배우나요?

.fail()과 .always() 콜백으로 견고한 오류 처리 메커니즘을 구현하고, .done()으로 성공적으로 가져온 데이터를 처리해 복원력 높은 애플리케이션을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“AJAX 오류 및 성공 처리” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← jQuery Academy(으)로 돌아가기