동기와 비동기 차이에 대해 설명하세요.
데이터를 받는 방식인 동기와 비동기에 대해서 알아보도록 하겠습니다.
- 동기는 동시에 일어난다는 뜻입니다. 요청을 하면 시간이 얼마나 걸리는지 상관없이 요청한 자리에서 결과가 주어져야 합니다.
- 사용자가 데이터를 서버에게 요청한다면 서버가 데이터 요청에 따른 응답을 사용자에게 다시 리턴해주기 전까지 사용자는 다른 활동을 할 수 없으며 기다려야 합니다.
- e.g.) 브러우저를 실행시키는 시간이 10분이 소모된다고 가정했을 시, 브라우저가 실행되는 10분이라는 시간동안 사용자는 다른 프로그램들을 동작시키지 못하고 브라우저가 켜질 때까지 기다려야 합니다. 한 개의 데이터 요청에 대한 서버의 응답이 이루어질 때까지 계속 대기해야 합니다.
- 비동기는 동시에 일어나지 않는다는 뜻입니다. 즉, 요청한 결과는 동시에 일어나지 않을 거라는 약속입니다.
- 서버에게 데이터를 요청한 후 요청에 따른 응답을 계속 기다리지 않아도 되며 다른 활동을 수행하여도 되고 서버에게 다른 요청사항을 보내도 됩니다.
- A라는 행위와 B라는 별개의 행위가 있다고 합시다. A라는 행위와 B라는 행위가 순차적이지 않게 실행되고 있으면 비동기라고 합니다. 하지만 여기서 제약이 있습니다. A,B 행위 사이에는 인과관계가 있어야 합니다.
- 예를 들어서 웹서버에서 멀티쓰레드로 각각 A와 B가 다른 클라이언트와 작업 할 때 둘은 동시에 작업하고 있지만, 둘의 인과관계는 없으므로 이 때는 비동기라고 볼 수 없습니다.
- A라는 행위의 결과를 B라는 행위에서 언젠가 이용하게 될 때 비동기라고 합니다.
- 동기
- 장점 : 설계가 매우 간단하고 직관적입니다.
- 단점 : 결과가 주어질 때까지 아무것도 못하고 대기해야 합니다.
- 비동기
- 장점 : 결과가 주어지는데 시간이 걸리더라도 그 시간동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있습니다.
- 단점 : 동기보다 복잡하다.
블록과 논블럭은 동기, 비동기와 연결되는 개념입니다.
블록이란?
- 블록이란 동기의 개념에서 만들어진 상태입니다.
- 크롬이 실행되는 시간이 10분(요청)이라고 가정했을 때 크롬이 열리기(결과) 전까지 다른 브라우저(사파리 등)은 계속 대기해야 하는 상태를 블록상태라고 합니다.
논블록이란?
- 논블록이란 비동기 개념에서 만들어진 상태입니다.
- 크롬이 실행되는 시간이 10분(요청)이라고 가정했을 때 크롬이 열리기(결과) 전까지 다른 브라우저(사파리 등)은 시간을 대기하지 않고 제약 없이 자유롭게 사용할 수 있는 상황을 논블록상태 라고 합니다.
비동기 예시, AJAX
- 제이쿼리의 ajax
- 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시할 때, ajax라는 네트워크 통신 기술로 클라이언트가 요청한 데이터를 서버로부터 가져옵니다.
function getData() {
var tableData;
$.get('https://domain.com/products/1', function(response) { //ajax 통신을 하는 부분
tableData = response;
});
return tableData;
}
console.log(getData());
==================================================================
// 결과 : undefined- $.get() 는 https://domain.com 에 HTTP GET 요청으로 1번 상품(product) 정보를 요청하는 코드입니다.
- 서버에서 받아온 데이터는 response 인자에 담깁니다.
- tableData = response; 로 받아온 데이터를 tableData라는 변수에 저장합니다.
- 하지만 결과는 받아온 데이터가 아닌 undefined가 나오게 됩니다.
- $.get()로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 return tableData;를 실행했기 때문입니다.
- 따라서 getData()의 결과 값은 초기 값을 설정하지 않은 tableData의 값 undefined를 출력하게됩니다.
콜백함수, 비동기 처리 방식의 문제점 해결
function getData(callbackFunc) {
$.get('https://domain.com/products/1', function(response) {
callbackFunc(response);
// 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌.
});
}
getData(function(tableData) {
console.log(tableData);
// $.get()의 response 값이 tableData에 전달됨
});- 위 ajax 통신 코드를 콜백 함수로 개선할 수 있습니다. 함수를 실행할 때 인자값으로 콜백 함수를 넣으면 됩니다.
- 콜백함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있습니다.
- 콜백함수의 동작 방식
- 식당 자리 예약에 비유할 수 있습니다.
- 맛집을 찾아가서 웨이팅 하는 상황을 생각해봅시다. 대기자 명단에 이름을 써두고, 맛집에 자리가 날 때까지 주변을 돌아다닙니다. 식당에서 자리가 생기면 자리가 났다고 연락이 옵니다. 그 전화를 받는 시점이 콜백함수가 호출되는 시점과 같습니다.