출처 : https://sudo-minz.tistory.com/21
비동기 방식
① 세탁기를 먼저 돌려놓고
② 전자렌지에 피자를 돌리는 동시에
③ 강아지와 놀아주는 것
장점 : 자원을 효율적으로 사용할 수 있다. 페이지 전체가 아니라 필요한 일부만 리로드할 수 있다.
단점 : 요청에 대한 결과가 바로 주어지지 않는다.
Ajax
비동기 예시, AJAX
비동기 처리의 가장 기본적인 사례는 제이쿼리의 ajax이다.
화면에 표시할 이미지나 데이터를 서버에서 불러와 표시할 때, ajax 라는 네트워크 통신 기술로 클라이언트가 요청한 데이터를 서버로부터 가져온다. 아래 ajax 코드를 살펴보자.
function getData() {
var tableData;
$.get('https://domain.com/products/1', function(response) {
tableData = response;
});
return tableData;
}
console.log(getData());
결과 : undefined
여기서 3번 째 줄의 $.get()이 바로 ajax 통신을 하는 부분이다.
https://domain.com 에 HTTP GET 요청으로 1번 상품(product) 정보를 요청하는 코드.
지정된 URL에 ‘데이터 하나 보내주세요' 라는 요청을 날리는 것과 같다.
그렇게 서버에서 받아온 데이터는 response 인자에 담기고,
tableData = response; 로 받아온 데이터를 tableData라는 변수에 저장한다.
그럼 이제 이 getData()를 호출하면 어떻게 될까? 받아온 데이터가 뭐든 일단 뭔가 찍히겠지?
그치만 결과는 undefined가 나온다. 왜일까?
이유는 $.get()로 데이터를 요청하고, 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문이다. 따라서 getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값 undefined를 출력한다.
이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다.
자바스크립트에서 비동기 처리가 필요한 이유를 생각해보면, 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문이다.
위에선 간단한 요청 1개만 보냈지만, 만약 100개를 보낸다면? 비동기 처리가 아닌 동기 처리라면 코드 실행하고 기다리고, 실행하고 기다리고.. 아마 웹 애플리케이션을 실행하는데 수십 분은 걸릴 것이다.
동기 방식
세탁기가 다 끝날 때까지 기다렸다가, 피자를 돌리고
전자렌지가 다 끝날 때까지 기다렸다가, 강아지와 놀아주는 것.장점 : 요청에 대한 결과가 바로 주어진다. 설계가 간단하고 직관적이다.
단점 : 결과가 주어질 때까지 대기해야 한다.
