1. Callback Function
우리는 함수를 작성할 때 인자를 받을 수 있게 파라미터를 설정할 수 있다.
function myFunction ( 파라미터 ) {
// ...logic
}이 파라미터가 함수인 경우, 이 함수를 콜백함수라고 부른다.
function myCallBackFn ( 콜백함수 ) {
// ...logic
}
function 콜백함수() {
// ...logic
}즉, B함수를 A함수의 인자로 넣을 경우, A함수는 콜백함수가 된다.
갑자기 콜백함수를 다루는 이유는 앞으로 볼 내용인 Promise, async-await과 관련이 있기 때문이다.
REST api인 axios를 사용해본 적이 있는가?
있다면, async-await을 사용해서 결과를 받아본 적이 있는가?
const getMyBlaBla = async () => {
const result = await axois.get("http://blabla.com/posts")
const myResult = result;
}위와 같이 async를 적용한 함수 안에서 await을 사용한 비동기적인 데이터 요청을 하면 요청이 완료된 후에 myResult에 result가 담긴다.
만약 async-await이 없다면 데이터 요청이 비동기적으로 작동하기 때문에 결과를 받아오기 전에 myResult에 데이터를 담으려고 하기 때문에 myResult에는 정상적인(우리가 원하는) 결과가 담기지 않을 것이다.
그런데 이런 중요한 역할을 하는 async-await은 비교적 최근에 생겨난 자바스크립트 문법이다. async-await이 없을 땐 어떻게 했을까?
async-await이 나오기 전에는 위에서 언급했던 CallbackFunction을 사용하거나 Promise를 사용해서 비동기적인 작업을 동기적으로 처리하곤 했다.
가장 처음은 CallbackFunction이다. 서버에 데이터 요청을 보내고 응답이 도착한 후에 결과를 얻어내기 위해 CallbackFunction을 사용했다.
콜백함수 사용을 하면 콜백 지옥 발생한다.
Promise 를 직접 쓸 수도 있지만, Promise 기반으로 만들어진 라이브러리가 있다. 그게 바로 Axios이다!! ( axios를 거의 안 써봐서 처음 알았음...ㅇㅁㅇ)
await은 Promise를 반환하는 함수에만 유효하다!!
Stack에 있던 setTimeOut은 Queue의 Macro Queue로 간다.
Stack에 있던 Promise는 Queue의 Micro Queue로 간다.
Stack이 전부 비워지면 Micro Queue로 가서 작업을 모두 처리한 후에 Macro Queue로 가서 작업을 시작한다.
그런데, micro queue가 다 끝나고 macro queue에 있던 작업 중 하나를 처리하고 있을 때 micro queue에 작업이 하나 들어온다면? 진행 중이던 macro queue 작업을 끝내고 micro queue에 있는 새로운 작업을 감지하고 끝낸 뒤 다시 macro queue로 간다.
-> Micro Queue의 작업 우선순위가 Macro Queue 보다 많이 높은 것 같다.
console.log("=======시작!!!!=======");
function aaa() {
console.log("aaa-시작");
bbb();
console.log("aaa-끝");
}
async function bbb() {
console.log("bbb-시작");
const friend = await "철수";
console.log(friend);
}
aaa();
console.log("=======끝!!!!=======");위 코드의 실행 순서는 어떻게 될까?
내가 처음에 내놓은 답안은 아래와 같았다.
=======시작!!!!=======
"aaa-시작"
"bbb-시작"
"철수"
"aaa-끝"
"=======끝!!!!======="console.log("bbb-시작") 을 실행한 뒤 await을 만나는 직후 마이크로 큐로 들어가게 됨...omg
async 함수는 일반 함수처럼 작동하다가 await을 만나면 그 순간 바로 하던 일을 중지하고 Call Stack에서 나와서 Micro Queue로 들어간다.
