[Ajax] async 비동기식 처리와 동기식 처리

Ajax 비동기식 처리와 동기식 처리

Ajax(Asynchronous JavaScript and XML)는 비동기적인 웹 애플리케이션의 제작을 위해서 표현 정보를 위한 HTML과 CSS, 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM JavaScript, 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, Json, HTML, 텍스트 등을 이용하는 웹 개발 방법입니다.

웹에서 서버 측에 데이터를 요청하고 데이터의 수신이 완료될 때까지 기존 방법과 다르게 Ajax를 이용하여 데이터의 수신을 기다리지 않고 바로 다른 작업을 실행함에 따라 불필요한 페이지의 로딩을 기다리지 않으므로 웹의 속도가 빠르게 반응할 수 있습니다.

대부분 jQuery에서의 Ajax도 비동기식을 기본적으로 지원하지만 상황에 따라 동기식(Synchronous) 방식으로 사용할 경우가 종종 생깁니다.

이번 포스팅에서 설명하고자 하는 내용이 바로 위와 같은 내용입니다.

Ajax로 서버 측에 데이터를 요청하고 이 데이터의 결과를 모두 수신받은 상태에서 다음을 실행하는 동기식 방식에 대한 예제를 아래의 예제로 확인해 봅시다.

function ykCheckEmailDup() {
	$.ajax({
    	data: {email: 'example@example.com'},
    	url: 'emailcheck',
    	dataType: 'json',
    	success: function(data) {
      		var result = data;
      		return result;
  		}
  	});
}

위와 같은 이메일 중복체크를 ajax로 처리한 코드가 있다고 가정하고 다른 함수(function)에서 위 ykCheckEmailDup 함수를 호출하여 이메일 중복 여부를 체크한 후 로직을 실행하려고 한다고 가정합니다.

위의 코드를 호출하여 이메일 중복 여부를 판단하기 위해 result를 return 하도록 하였고 이 값을 console.log(result); 로 출력하면 어떻게 될까요?

결과는 undefined가 나오게 됩니다. data의 값도 아니고 빈 값도 아닌 왜 undefined일까?

이것은 비동기 방식에서 success 콜백 함수에서 리턴한 값을 받을 수가 없다는 것입니다.

동기식으로 처리되는 자바스크립트라면 반드시 이메일 중복체크가 끝난 후 data를 받은 후 그다음 로직을 처리하였을 것입니다. 하지만 Ajax는 기본적으로 비동기식 처리방식이므로 Ajax 호출이 서버에서 응답을 받는 데에 아무리 빨리 받아도 다음 로직을 실행하기 전에 받을 수 있다고 확신할 수 없습니다.

다음과 같이 변경을 해보도록 합니다.

function ykCheckEmailDup() {
	var result;
  	$.ajax({
        data: {email: 'example@example.com'},
        url: 'emailcheck',
        dataType: 'json',
        async: false,
        success: function(data) {
      	    result = data;
        }
  	});
  	return result;
}

일단 위의 코드에서 async: false 속성이 추가되었습니다. jQuery의 Ajax호출은 async: true가 기본이며, 이 속성을 기입하지 않는다면 기본적으로 비동기식으로 동작하게 됩니다. 하지만 이 속성을 false로 설정하게 되면 동기식 방식으로 이제 ajax를 호출하여 서버에서 응답을 기다렸다가 응답을 모두 완료한 후 다음 로직을 실행하는 동기식으로 변경한 것입니다.

Ajax는 비동기식 처리방식이니 비동기식으로만 사용하는 것만은 아니란 것 이것을 꼭 알아야 할 것 같습니다.