동기와 비동기의 구분은 요청받고 응답받는 시간대의 차이다.
요청받고 응답받는 시간을 하나의 박스로 정의한다면,
동기는 박스 안에서 움직이고 비동기는 박스를 벗어나 작동되는 원리이다.
- 동기: 요청과 응답이 같은 시간대 '안에' 고정돼 있어, 요청에 대해 응답이 완료되기까지 프로그램이 정지한다. 응답을 받고나서야 비로소 다시 진행되는 특성을 갖는다.
- 비동기: 요청-응답 간 결합이 자유로워 프로그램이 응답 받기 위해 대기하지 않고, 쿨하게 자기갈길 가는 특성. 언젠간 응답을 받을테고 다음 로직을 수행 한다.
요청을 하는 시기와 응답을 받는 시기가 일치하다는 것.
간단히 말해 요청을 하면 (바로)응답을 받는다는 의미이다.
하지만 응답을 바로 받을 수 있을까요? 그럴 수도 있고 그렇지 않을 수도 있겠죠.
왜냐하면 요청을 받는 곳이 처리속도가 어떠냐는건 아무도 모르기 때문입니다.
프로그램은 응답까지 대기시간을 필요로 합니다. 어플리케이션이 잠시 멈춘다는 의미입니다.
예를 들면 클릭한 버튼이 응답을 받기까지 작동이 안됩니다. 버튼을 클릭했는데, 응답 없이 화면이 정지된 그런 상황.
요청한 내용을 언젠간 응답해 줄 것이라는 약속을 의미한다.
요청과 응답이 다른 시간대 존재하기 때문에, 요청내용에 대해 지금 바로 혹은 당장 응답받지 않아도 된다.
"콜백함수는 자바스크립트의 비동기성을 표현하고 관리하는 가장 일반적인 기법이자 가장 기본적인 비동기 패턴이다"
그럼 콜백함수란 무엇일까?
요청이 처리가 완료되어(다시) 사용하세요! 라는 신호라고 생각합니다.
즉, 콜백함수에서 콜백이란 이름이 별로 있는 것이 아니라, 함수가 있는데 사용되는 목적/용도가 "call+back" 이라는 것입니다.
즉, 콜백함수가 실행됐다는 것은 요청한 작업이 끝났음을 알리고, 작업의 결과물을 콜백함수를 통해 사용가능하게 됩니다.
콜백함수가 늘어나면 늘어갈 수록 코드의 깊이가 늘어나 더이상 헤어날 수 없다는 유머 입니다.
코드 관점에서 콜백함수는 중첩으로 들여쓰기가 반복되 가독성이 떨어지게 됩니다.
이런 중첩된 모습이 꼭 피라미드 같다고 해서 피라미드 무덤이라고 합니다.
$.get('url', function(response) {
parseValue(response, function(id) {
auth(id, function(result) {
display(result, function(text) {
console.log(text);
});
});
});
});promise 나 Async를 사용하는 방법이 있다. 각 콜백 함수를 분리하면 된다.
function parseValueDone(id) {
auth(id, authDone);
}
function authDone(result) {
display(result, displayDone);
}
function displayDone(text) {
console.log(text);
}
$.get('url', function(response) {
parseValue(response, parseValueDone);
});정리된 코드를 간단하게 살펴보겠습니다. 먼저 ajax 통신으로 받은 데이터를 parseValue() 메서드로 파싱 합니다.
parseValueDone()에 파싱 한 결과값인 id가 전달되고 auth() 메서드가 실행됩니다.
auth() 메서드로 인증을 거치고 나면 콜백 함수 authDone()이 실행됩니다.
인증 결과 값인 result로 display()를 호출하면 마지막으로 displayDone() 메서드가 수행되면서 text가 콘솔에 출력됩니다.