[현대이지웰 Java 풀스택 개발자 아카데미 6월] TIL 14차 - 비동기 통신

📚 서론

지금까지 자바와 스프링을 거쳐 스프링 부트까지 배워보았는데요.

 

자바라는 언어를 이용해 웹 애플리케이션을 간편하게 구현하고자

기술이 서서히 발전하는 과정을 간접 체험하게 되어 즐거운 여정이었습니다.

가득 찍힌 비자 도장들처럼 돌이켜보면 조금 뿌듯해지는 과정이었어요😉 출처:giphy

 

 

현재는 팀을 꾸려 프로젝트를 준비하고 있는데요.

 

본격적으로 기능을 구현하려고 보니까 사용자의 매끄러운 서비스 이용 경험을 위해

비동기 통신이 생각보다 자주 쓰이는 것이 보였습니다.

 

 

그래서 이번 주 부터는 프로젝트 만들면서 자주 쓰인 기능을 소개해볼까 해요!

자! 시작할 준비 되셨나요? 출처:giphy

 

 

 

비동기 통신이란❓

클라이언트가 화면 전환 없이 서버측에 데이터를 요청할 때 사용하는 기술입니다.

 

회원가입을 할 때 내가 입력한 아이디를 사용할 수 있는지 없는지 확인하려고

별도의 페이지로 이동했다가 다시 입력창으로 돌아오면 좀 번거롭겠죠...?

 

뿐만 아니라 화면을 보던 사이에 새로 추가된 상품을 보려고

브라우저 화면 전체를 새로 불러오게 되면(=새로고침)

그만큼 화면을 구성하는 시간도 더 오래 걸리고 서버와 주고 받는 데이터도 크겠죠...?

 

그래서 바뀐 데이터만 서버가 클라이언트에 전달하고

클라이언트는 받은 데이터를 이용해서 결과를 출력하거나 화면을 부분적으로 새로 구성해줍니다!

바뀐 데이터로 새롭게 화면을 구성! 출처:giphy

 

가장 많이 쓰이는 구현 방법으로는

1. ajax

2. fetch

3. axios

이렇게 3가지가 있습니다.

 

 

 

 

 

🎷 Ajax

가장 오래된 방식이며 그만큼 많이 사용되고 다양한 브라우저를 지원합니다.

 

자바스크립트의 XMLHttpRequest 객체를 이용한 방식은 매우 복잡하고 장황하기에

보통은 jquery 라이브러리를 사용해 보다 간결한 문법으로 기능을 구현합니다.

 

 

 

예시를 보여드리기 위해 아래와 같이 상품 등록 폼을 만들었습니다.

 

[중복확인] 버튼을 누르면 입력한 상품 번호를 DB에 조회한 후

사용가능한 번호인지 알려주는 예제입니다.

 

 

Ajax GET 🧇

jquery 라이브러리를 이용한 GET방식의 ajax 예제입니다.

url에 요청할 주소와 전달하려는 데이터를 담아 전달합니다.

 

$(document).ready(function() {
	$("#prdNoCheckBtn").on('click', function() {
		event.preventDefault(); // submit 중단
		
		let prdNo = $('#prdNo').val(); //상품 번호 입력값 추출
		
		if(prdNo == "") {
			alert("상품번호를 입력하세요");
			return false;
		} else {
			$.ajax({
				type: "GET",
				url: "/contextPath/product/prdNoCheck1/"+prdNo,
				dataType: "text",
				success: function(result) {
					if(result == "available")
						alert("사용가능한 번호입니다.");
					else
						alert("사용 불가능한 번호입니다.");
				},
				error: function(data, textStatus) {
					alert("전송실패");
				}
			});
		}
	}); //on종료
}); //ready종료

 

 

그럼 컨트롤러에서 URL에 담긴 상품 번호를 읽기 위해 PathVariable을 사용합니다.

 

// 상품번호 중복 확인 처리
// ajax get : url에 상품번호가 포함
@ResponseBody //문자열 그대로 반환하기 위한 어노테이션
@RequestMapping("/product/prdNoCheck1/{prdNo}")
public String prdNoCheck1(@PathVariable String prdNo) {
	String prdNo_result = service.prdNoCheck(prdNo);
	
	String result = "available";
	if(prdNo_result != null)
		result = "no_available";
	
	return result;
}

 

최종적으로 DB에서 이미 사용한 상품 번호를 입력해준 뒤 [중복확인] 버튼을 클릭하면

 

 

ajax의 성공 함수에 설정한 내용대로 사용 불가능한 번호입니다. 라는 알람창을 띄우게 됩니다!

 

 

Ajax POST🥞

이번에는 요청 방식을 POST로 바꿔보겠습니다.

 

 

type에 요청 방식을 post로 변경하고

전달할 데이터는 data 항목을 추가해서 key:value 형태로 전달합니다.

$(document).ready(function() {
	$("#prdNoCheckBtn").on('click', function() {
		event.preventDefault();
		
		let prdNo = $('#prdNo').val();
		
		if(prdNo == "") {
			alert("상품번호를 입력하세요");
			return false;
		} else {
			$.ajax({
				type: "POST",
				url: "/contextPath/product/prdNoCheck2",
                data: {"prdNo" : prdNo}
				dataType: "text",
				success: function(result) {
					if(result == "available")
						alert("사용가능한 번호입니다.");
					else
						alert("사용 불가능한 번호입니다.");
				},
				error: function(data, textStatus) {
					alert("전송실패");
				}
			});
		}
	}); //on종료
}); //ready종료

 

 

컨트롤러에서 POST로 전달된 데이터를 받으려면 RequestParam을 사용합니다.

 

// 상품번호 중복 확인 처리
// ajax post : body에 상품번호가 포함
@ResponseBody
@RequestMapping("/product/prdNoCheck2")
public String prdNoCheck1(@RequestParam("prdNo") String prdNo) {
	String prdNo_result = service.prdNoCheck(prdNo);
	
	String result = "available";
	if(prdNo_result != null)
		result = "no_available";
	
	return result;
}

 

 

 

 

 

🎺 Fetch

fetch는 자바스크립트에서 ajax를 대체하고자 만들어진 api입니다.

 

자바스크립트 내장 api이기에 별도의 라이브러리를 추가할 필요가 없습니다.

또한 JSON파싱이 내장되어 있어 json파일을 주고받을 때 특히 유용합니다.

 

 

Fetch GET 🧇

fetch의 기본형은 fetch("요청 url").then(데이터변환).then(결과 처리).catch(에러 처리); 입니다.

$(document).ready(function() {
	$("#prdNoCheckBtn").on('click', function() {
		event.preventDefault();
		
		let prdNo = $('#prdNo').val();
		
		if(prdNo == "") {
			alert("상품번호를 입력하세요");
			return false;
		} else {
			// 자바스크립트 내장함수 fetch() get
			fetch("/contextPath/product/prdNoCheck2/"+prdNo)
			.then(
				response=>response.text() //응답 객체를 text로 변환
			)
			.then(result=>{
				if(result == "available")
					alert("사용가능한 번호입니다.");
				else
					alert("사용 불가능한 번호입니다.");
			})
			.catch(err=>console.log(err));
		}
	}); //on종료
}); //ready종료

 

받은 데이터를 컨트롤러에서 처리할 땐 ajax와 동일하게 PathVariable를 사용합니다.

 

 

Fetch POST 🥞

fetch에서 post로 데이터를 전달할 땐 조금 다른데요.

 

fetch() 안에 method와 headers를 추가하고 body에 데이터를 담아 전달합니다.

$(document).ready(function() {
	$("#prdNoCheckBtn").on('click', function() {
		event.preventDefault();
		
		let prdNo = $('#prdNo').val();
		
		if(prdNo == "") {
			alert("상품번호를 입력하세요");
			return false;
		} else {
			// 자바스크립트 내장함수 fetch() POST
			fetch("/mybatis/product/prdNoCheck3", {
				method: 'post', //전달방식
				headers: {'Context-Type':'application/json'},
				body : prdNo //전달할 데이터
			})
			.then(
				response=>response.text() //응답 객체를 text로 변환
			)
			.then(result=>{
				if(result == "available")
					alert("사용가능한 번호입니다.");
				else
					alert("사용 불가능한 번호입니다.");
			})
			.catch(err=>console.log(err));
		}
	}); //on종료
}); //ready종료

 

받은 데이터를 처리할 때 컨트롤러에서 RequestParam을 사용합니다.

 

 

 

 

 

🔥 결론

스프링에서 어떤 방법을 선택해 비동기 통신을 시도하던

컨트롤러에서 데이터를 처리할 땐 GET 방식이면 PathVariable.

POST 방식이면 RequestParam를 사용합니다.

 

 

 

추가로 이번 포스팅에선 비동기 통신으로 데이터만 주고 받고

받은 데이터를 사용해 부분적으로 브라우저 화면을 재구성하는 부분은 제외하였는데요.

 

이때 개발자가 일일이 태그를 구성하지 않으면서 서버의 부담도 줄이고자

개발된 것이 React이기 때문에 다음 포스팅에 같이 묶어서 설명하도록 하겠습니다.

 

그나저나 React 아이콘을 볼 때마다 원자로가 떠오르는 건 나만 그런가...? 출처:giphy