[DEV]로딩과 연관된, 동기 처리와 비동기 처리

많은 불로그들이 동일 내용을 복붙해서 저도 동기와 비동기의 정의는 Ctrl+C and V 하기로 했습니다.

다만 어떤 블로그에서는 로직을 설명해 주시면서 비동치리를 해도 이런 문제가 나타난다라고 설명해줘요.

그 문제점을 다시 해결하는 로직까지 같이 써준 블로그가 있어서 가져옴.

https://sudo-minz.tistory.com/21

 

동기 처리

요청을 하면 (바로) 응답을 받는다는 의미. 말 그대로 동시에 일어난다는 뜻

-> 요청과 결과가 한 자리에서 동시에 일어남.

-> A노드와 B노드 사이의 작업 처리 단위(transaction)를 동시에 맞추겠다.

 

비동기 처리

- 동시에 일어나지 않는다를 의미. 요청과 결과가 동시에 일어나지 않을거라는 약속

-> 요청과 응답이 다른 시간대 존재하기 때문에, 요청내용에 대해 지금 바로 혹은 당장 응답받지 않아도 된다.

-> 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다.

 

 

 

비동기처리 AJAX

function getData() {
	var tableData;
	$.get('https://domain.com/products/1', function(response) {
		tableData = response;
	});
	return tableData;
}

console.log(getData());
==================================================================

결과 : undefined

 

결과가 undefined 니까 결국 홈페이지가 내가 원하는 결과는 못 얻은 상황이겠죵?

이유는 $.get()로 데이터를 요청하고, 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문이다. 따라서 getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값 undefined를 출력한다.

 

콜백함수 사용

CallBackFunc 사용

function getData(callbackFunc) {
	$.get('https://domain.com/products/1', function(response) {
		callbackFunc(response);
	});
}

getData(function(tableData) {
	console.log(tableData);
      /$.get()의 response 값이 tableData에 전달됨
});

 

왜 AJAX

이분이 AJAX를 쓰니는 이유는 HTML 페이지 통신을 일부하여 JSON/XML형태의 데이터만 가져올 수 있기 때문이라고 합니다. 즉 자원의 효율성.

다만 AJAX에도 단점이 있다고 하네요.히스토리 관리x, 보안이슈 등등 자세한 사항은 저분의 블로그서 확인해보세요.

 

 

개발자가 아니라서

어느 틀릴 수 있으니 크로체크 부탁드려요