[국민취업지원제도 일경험프로그램 19일차] 동기 방식과 비동기 방식의 차이점

19일 차 특이사항

1. session을 이용해서 페이징 이동시에도 검색어가 유지되도록 만들어줬다. 그런데 이제 검색 옵션이 문제다. 검색 옵션을 유지하는 방법을 찾아보자. 

 

문제 해결

1. 세션을 사용하여 문제를 해결했다. 

 

새로운 과제 

1. submit으로 보내던 것을 ajax로 보내는 비동기 방식으로 처리해 보자. 

2. 비동기 방식이 무엇이지? 동기와 비동기의 차이점은 무엇일까? 

 

동기 방식과 비동기 방식의 차이점

동기와 비동기는 프로그래밍에서 매우 중요한 개념으로 작업의 실행과 완료를 어떻게 다루는지와 관련 있다. 

 

1) 동기 방식 : 작업의 요청, 응답이 동시에 일어난다. 사용자가 요청을 보내면 응답이 있을 때까지 기다려야 한다. 설계가 직관적이고 쉬우나 사용자가 다른 작업을 못한다는 단점이 있다. 

 

2) 비동기 방식 : 작업의 요청, 응답이 동시에 일어나지 않는다. 사용자가 서버로 요청을 보냈을 경우 요청에 대한 응답을 기다리지 않고 다른 작업을 할 수 있다. 혹은 서버로 다른 요청을 보낼 수도 있다. 설계가 복잡하고 어렵다는 단점이 있다. 

 

Ajax

Ajax를 사용하면 비동기 처리가 가능하다고 한다. 그렇다면 Ajax는 무엇인가?  "Asynchronous JavaScript and XML"의 약자다. 여기서 "A"는 "Asynchronous(비동기적)"이라는 뜻을 가지고 있다. Ajax 기술은 비동기적으로 서버와 상호작용하여 웹 페이지를 동적으로 업데이트하는 데 사용된다.

위에서 말했는데 비동기적(Asynchronous)이란, 여러 작업을 동시에 수행할 수 있는 방식을 의미한다. 웹 페이지에서 Ajax를 사용하면 웹 브라우저는 페이지 전체를 새로고침 하지 않고도 서버와 통신하고 데이터를 가져오거나 업데이트할 수 있다. 

 

사용하는 방식은 다음과 같다. 막상 적용해보려니 안 된다. 어렵다. 어떻게 연결하는지 이해가 잘 되지 않는다. 다른 사람이 만든 코드를 읽어봐야겠다. 

<script type="text/javascript">
    	$(document).ready(function() {
			let person = {name:"earth", age:10}
			let person2 = {}
			
			$("#sendBtn").click(function() {
				$.ajax({
					url : '/korea/send',		//요청 URI
					type : 'post',				//요청 메서드 
					headers : { "content-type" : "application/json" },   //요청 헤더 
					dataType : 'text',			//서버로부터 전송받을 데이터 타입 
					data : JSON.stringify(person),	// 서버로 전송할 데이터.  stringify()로 직렬화 필요함.
					success : function(result) {	// 서버로부터 응답이 도착하면 호출될 함수 
						person2 = JSON.parse(result)	//result는 서버가 전송한 데이터
						alert("received = " + result)
						$("#data").html("name = "+person2.name+ ", age = " +person2.age)
					},
					error : function() {			// 서버로부터 에러가 발생했을 때, 호출될 함수(callback) 
						alert("error")
					}
				})
			})
		})
    </script>