응용 프로그램이나 시스템의 통신 방식에서
통신 과정에서 요청과 응답의 상호작용 방식에 따라
- 동기(Synchronous) 통신
-
요청-응답 순서: 요청이 보내진 후, 응답을 받기 전까지 다른 작업을 진행하지 않고 대기합니다.
-
차단(Block) 방식: 요청에 대한 응답을 기다리는 동안 프로그램이나 시스템은 다른 작업을 수행하지 못하고 차단됩니다.
-
순차적 흐름: 프로세스의 흐름이 순차적으로 진행되며, 요청에 대한 응답 처리가 완료된 후에만 다음 작업으로 넘어갑니다.
-
예 )
FTP 프로토콜: 파일 전송 프로토콜인 FTP는 전통적으로 동기 방식으로 파일 전송 요청을 처리합니다.
- 비동기(Asynchronous) 통신
-
병렬 처리: 요청을 보낸 후 응답을 기다리는 동안 다른 작업을 동시에 진행할 수 있습니다.
-
비차단(Non-Blocking) 방식: 요청에 대한 응답이 도착할 때까지 기다리지 않고 즉시 다른 작업을 수행할 수 있습니다.
-
독립적인 통신: 여러 요청이 동시에 처리될 수 있으며, 각 요청은 다른 요청에 의존하지 않고 독립적으로 처리됩니다.
-
예)
HTTP 프로토콜: 기본적으로 HTTP 프로토콜은 요청-응답 기반으로 동작하지만, 이를 사용하는 웹 애플리케이션은 AJAX, Fetch API 등을 통해 비동기 방식으로 HTTP 요청을 처리할 수 있습니다.
✅ 비동기 통신의 이점
웹 페이지 전체를 새로 고침하지 않고도 서버로부터 데이터를 받아와 페이지의 특정 부분만을 업데이트할 수 있습니다.
이는 사용자 경험을 개선하고, 애플리케이션의 반응성을 높이는 데 크게 기여합니다.
따라서 비동기 HTTP 통신은 현대 웹 및 모바일 애플리케이션에서 필수적인 부분이며, 사용자 인터페이스의 반응성과 성능 향상에 중요한 역할을 합니다.
비동기 통신을 사용하는 예시 (Ajax & Fetch)
✅ AJAX와 Fetch API의 차이점
◼ 문법과 가독성:
- AJAX: 전통적인 AJAX는 XMLHttpRequest 객체를 사용합니다. 이는 좀 더 복잡하고 장황한 코드를 작성하게 만들 수 있습니다.
- Fetch API: 더 간결하고 현대적인 문법을 제공합니다. Promise를 사용하기 때문에 .then()과 .catch()를 사용하여 비동기 결과를 더 쉽게 처리할 수 있습니다.
◼ Promise 기반:
+) Promise: Promise: 비동기 함수 호출 또는 비동기 연산이 완료되었을 때, 이후에 처리할 함수나 에러를 처리하기 위한 함수를 설정하는 모듈
➡ 비동기 작업이 성공적으로 완료되면 resolve가 호출되고, 실패하면 reject가 호출
- AJAX: XMLHttpRequest는 Promise 기반으로 작동하지 않습니다. 따라서, 콜백 지옥(callback hell)에 빠질 수 있습니다.
- Fetch API: Promise를 사용하여 비동기 코드의 가독성과 유지 관리를 향상시킵니다.
◼ 기능성:
- AJAX: 오래전부터 사용되어 왔기 때문에 모든 브라우저에서 널리 지원됩니다.
- Fetch API: 더 많은 기능을 제공하지만, 구형 브라우저에서는 지원되지 않을 수 있습니다.
◼ 오류 처리:
- AJAX: HTTP 오류 상태를 직접 처리해야 합니다.
- Fetch API: HTTP 오류 상태가 자동으로 거부되지 않습니다. 즉, 오류 상태에 대한 응답도 .then()에서 처리해야 합니다.
1. Ajax
JavaScript를 사용하여 AJAX 요청을 보내고, Spring Boot 컨트롤러에서 해당 요청을 처리
HTTP 오류 상태를 직접 처리해야
function updateUser(userId) {
var userData = {
"username": $("#username").val(),
"email": $("#email").val(),
};
$.ajax({
url: '/users/' + userId,
type: 'PUT',
contentType: 'application/json',
data: JSON.stringify(userData),
success: function(response) {
console.log("회원 정보가 성공적으로 업데이트되었습니다.");
// 성공적인 업데이트 후의 처리 로직 (예: 페이지 리디렉션)
},
error: function(error) {
console.log("오류 발생: ", error);
// 오류 처리 로직
}
});
}
2. Fetch
function updateUser(userId) {
var userData = {
"username": document.getElementById("username").value,
"email": document.getElementById("email").value,
};
fetch('/users/' + userId, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log("회원 정보가 성공적으로 업데이트되었습니다.");
// 성공적인 업데이트 후의 처리 로직 (예: 페이지 리디렉션)
})
.catch(error => {
console.error("오류 발생: ", error);
// 오류 처리 로직
});
}
코드 차이점
-
DOM 요소 접근: $("#username").val() 대신 document.getElementById("username").value를 사용하여 HTML 요소의 값을 가져옵니다.
-
Fetch API 사용: $.ajax 대신 네이티브 JavaScript의 fetch 함수를 사용합니다.
-
헤더 설정: fetch 함수에 headers 옵션을 추가하여 Content-Type을 application/json으로 설정합니다.
-
Promise 처리: fetch 함수는 Promise를 반환하므로, .then()과 .catch()를 사용하여 비동기 요청의 결과를 처리합니다.
-
응답 처리: Fetch API는 HTTP 오류 상태에 대해 자동으로 예외를 발생시키지 않습니다. 따라서 응답의 유효성을 수동으로 확인해야 합니다(if (!response.ok)).
