✍🏻 [Code Camp_TIL] 30일차: Callback 함수, callback-promise-async/await, 매크로 태스크 큐 & 마이크로 태스크 큐, await와 마이크로 큐의 관계

code_J·2023년 5월 1일

TIL

목록 보기

37/41

Callback 함수

Callback 함수란

function aaa(qqq){
	// 함수 로직
}

aaa(function(){})

우리는 함수도 인자로 전달할 수 있다. 여기서 인자로 전달되는 함수를 callback 함수라고 한다. 위 코드에서 function(){}이 callback 함수다.

["철수", "영희", "훈이"]. map((el) => {})

map 괄호 안에도 화살표 함수 형태의 callback 함수가 존재한다!

Callback 함수를 쓰는 이유

그렇다면 왜 callback 함수를 사용하는 걸까?

async/await 나오기 전에는, api 요청이 끝나면 그 결과값을 가지고 다른 요청을 실행시키기 위해 callback 함수를 쓰곤 했다.

function aaa(qqq){
	// 외부 API에 데이터 요청하는 로직
	// ...
	// ...
	// 요청 끝!
	const result = "요청으로 받아온 데이터 결과값"
	qqq(result) // 요청 끝나면 qqq 실행시키기
}

aaa(result) => {
	console.log("요청이 끝났습니다.")
	console.log("요청으로 받아온 데이터는" + result + "입니다")
}

우리는 이미 async/await를 익숙하게 쓰고 있지만, 다양한 자바스크립트 비동기 처리 방법을 알고 사용하는 것도 중요하다.

비동기 실습(callback-promise-async/await)

Callback

<!DOCTYPE html>
<html lang="en">
	<head>
		<title> 콜백과 친구들 </title>
		<script>
			const myCallback = ()=>{
				// 1.랜덤한 숫자를 가지고 오는 API
				// 2.posts/랜덤숫자
				// 3.랜덤숫자 번 게시글 작성한 유저가 쓴 다른 글
			}
			const myPromise = ()=>{

			}
			const myAsyncAwait = ()=>{

			}

		</script>
	</head>
	<body>
			<button onclick={onClickCallback}>Callback 요청하기</button>
      <button onclick={onClickPromise}>Promise 요청하기</button>
      <button onclick={onClickAsyncAwait}>AsyncAwait 요청하기</button>
	</body>
</html>

위에 myCallback 함수 내부에서는 1번 로직을 완료한 후 받아온 데이터를 기반으로 2번 로직을 그리고, 2번 로직 완료 후 받아온 데이터를 기반으로 3번 로직을 실행한다.

nyCallback 함수는 다음과 같이 적어줄 수 있다.

const myCallback = ()=>{
// newXMLHTTPRequest는 자바스크립트에 내장되어있는 기능
	const aa = newXMLHTTPRequest()
	aa.open("get",`http://numbersapi.com/random?min=1&max=200`)
	aa.send()
	aa.addEventListener("load",function(res){
		console.log(res)
	})
}

XMLHttpRequest는 서버와 상호 작용하기 위해 사용되는 객체다. 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다. Ajax 프로그래밍에 주로 사용되고, XHR이라고 줄여 부르기도 한다.

첫 번째의 response(res)를 가공해서 두 번째 API 요청을 보내려면 다음과 같이 코드를 작성하면 된다.

const myCallback = () => {
  const aa = new XMLHttpRequest();
  aa.open("get", "http://numbersapi.com/random?min=1&max=200");
  aa.send();
  aa.addEventListener("load", (res: any) => {
    const num = res.target.response.split(" ")[0]; // 랜덤 수 추출

		// 두번째 api 요청
    const bb = new XMLHttpRequest();
    bb.open("get",            `https://koreanjson.com/posts/${num}`);
    // num에 추출한 랜덤 수가 들어감
    bb.send();
    bb.addEventListener("load", (res: any) => {
     console.log(res)
		 const userId = JSON.parse(res.target.response).UserId 
    });
  });
};

console을 통해 랜덤 수에 해당하는 게시글 데이터가 res에 들어온 것을 확인할 수 있다. 하지만 응답받은 데이터는 문자열로 되어있어서 가공 및 활용이 어렵다.

JSON.parse()를 이용해서 문자열을 객체로 바꿔주고, 해당 데이터의 작성자 정보(UserId)를 이용해서 세 번째 요청을 보내준다.

const onClickCallback = () => {
	// 첫번째 랜덤숫자 api 요청
  const aaa = new XMLHttpRequest();
  aa.open("get", "http://numbersapi.com/random?min=1&max=200");
  aa.send();
  aa.addEventListener("load", (res: any) => {
    const num = res.target.response.split(" ")[0];

		 // 두번째 posts api 요청
	   const bbb = new XMLHttpRequest();
			bb.open("get", `https://koreanjson.com/posts/${num}`);
	    bb.send();
	    bb.addEventListener("load", (res: any) => {
	      const userId = JSON.parse(res.target.response).UserId;
   
			 // 세번째 UserId api 요청   
		   const ccc = new XMLHttpRequest();
		    cc.open("get", `https://koreanjson.com/posts?userId=${userId}`);
		    cc.send();
		    cc.addEventListener("load", (res: any) => {
					console.log(res)
		      console.log("최종 결과값 !");
		 console.log(JSON.parse(res.target.response));
      });
    });
  });
};

두 번째 요청과 마찬가지로 JSON.parse()를 이용해서 문자열을 객체로 바꿔준다.

요청이 반복될수록 오른쪽 방향 대각선으로 쑥 파이는 형태를 볼 수 있다. API 요청이 거듭된다면 코드의 가독성이 심하게 떨어질 것이다. 이러한 현상을 콜백지옥이라고 한다.

Promise

콜백지옥을 막고자 나온 것이 Promise다. 위에 callback에서 했던 작업을 Promise 객체에도 적용해보았다.

Promise는 자바스크립트의 비동기 처리, 그 중에서도 특히 외부에서 많은 데이터를 불러오는 작업에 사용된다. promise 객체를 이용해서 만든 라이브러리가 axios이기 때문에, axios를 실습에 사용했다.

만약 axios를 사용하지 않고 Promise 객체를 직접 사용하려면 다음과 같이 하면 된다.

const result = await new Promise((resolve, reject) => {
	const aaa = new XMLHttpRequest();
  aaa.open("get", "http://numbersapi.com/random?min=1&max=200");
  aaa.send();
  aaa.addEventListener("load", (res: any) => {
		resolve(res)
  });
})
// resolve : 요청이 성공했을 경우
// reject : 요청이 실패했을 경우

async/await가 등장하기 전에는 promise 객체에 제공되는 .then이라는 기능을 사용했다. 다음과 같이 써줄 수 있다.

const onClickPromise = () => {
  axios
    .get("http://numbersapi.com/random?min=1&max=200")
    .then((res) => {
      const num = res.data.split(" ")[0];
      return axios.get(`https://koreanjson.com/posts/${num}`);
    })
    .then((res) => {
      const userId = res.data.UserId;
      // prettier-ignore
      return axios.get(`https://koreanjson.com/posts?userId=${userId}`)
    })
    .then((res) => {
      console.log(res.data);
    });
};

callback에 비해 훨씬 코드가 간단해졌다. promise를 사용할 경우 각 요청들이 체인으로 연결되는데, 이것을 Promise Chain 또는 Promise Chaining이라고 한다.

하지만, promise는 직관적이지 못하다. 다음과 같이 호출에 대한 결과값을 상수에 담아 사용하는 것이 불가능하다.

const result = axios.get // === 생략 ====

함수를 실행하면 결과 값이 완전한 데이터가 아니라 Promise의 형태로 들어온다.

또한, Promise는 코드의 실행 순서가 직관적이지 못하다. axios를 이용한 비동기 작업이 TaskQueue 안에 들어가, 실행 순서가 뒤로 밀리게 된다.

Async/Await 실습

async/await를 이용하면 코드가 직관적이고 심플해진다!

const onClickAsyncAwait = async () => {
  // prettier-ignore
  const res1 = await axios.get("http://numbersapi.com/random?min=1&max=200");
  const num = res1.data.split(" ")[0];

  const res2 = await axios.get(`https://koreanjson.com/posts/${num}`);
  const userId = res2.data.UserId;
  
  // prettier-ignore
  const res3 = await axios.get(`https://koreanjson.com/posts?userId=${userId}`)
  console.log(res3.data);
};

참고! async/await는 promise에만 붙일 수 있다. axios가 promise 객체를 이용해 만들어진 라이브러리이기 때문에 async/await를 사용할 수 있다.

매크로 태스크 큐 vs 마이크로 태스크 큐

Promise 실습을 하면서, Promise로 실행하는 함수는 태스크 큐에 들어간다는 것을 떠올려보자. 태스크 큐는 딱 하나만 있는 것이 아니라, 여러 개가 동시에 존재한다. 그 중 대표적인 두 가지 태스크 큐를 공부했다.

매크로 태스크 큐 (MacroTaskQueue): setTimeout, setInterval 등이 들어가는 큐
마이크로 태스크 큐 (MicroTaskQueue): Promise 등이 들어가는 큐

태스크 큐들 간의 실행 우선순위

매크로 태스크 큐와 마이크로 태스크 큐가 부딪힐 경우에는 마이크로 태스크 큐가 우선한다.

await와 마이크로 큐의 관계

isSubmitting을 활용한 중복 mutation 방지

실수로 mutation api 요청을 여러 번 보내게 될 경우를 대비해서 isSubmitting을 활용해 두 번째 요청부터는 막아줄 수 있다.

import axoios from 'axios'

export default function IsSubmitting(){
	const [isSubmitting,setIsSubmitting] = useState(false)

	const onClickSubmit = async ()=>{
		// 등록하는 동안은 등록버튼이 작동하지 않도록 함
		setIsSubmitting(true)

		const result = await axios.get("https://koreanjson.com/posts/1")
		
		// 등록이 완료되었다면 다시 버튼이 동작하도록 함
		setIsSubmitting(false)

	}
	
	return(
		<button onClick={onClickSubmit} disabled={isSubmitting}> 등록하기 등의 API 요청버튼 </button>
	) 
}

그런데 여기서 setState는 최종적으로 바뀐 결과값으로 반영된다고 알고 있다. 위에 코드처럼 setState를 여러 번 바꿔도 맨 마지막 값만 반영되지 않나?

이 부분은 await와 마이크로 큐의 관계를 알고 있어야 한다.

await와 마이크로 큐의 관계

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>이벤트루프</title>
    <script>
      function onClickLoop() {
        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("=======끝!!!!=======");
      }
    </script>
  </head>
  <body>
    <button onclick="onClickLoop()">시작하기</button>
  </body>
</html>

콘솔창을 열어서 확인해보면 결과는 다음과 같이 나온다.

구체적인 함수 실행 과정
1. callstack에 onClickLoop 들어옴
2. ====시작!!!!==== 콘솔에 찍힘
3. aaa 함수가 callstack에 쌓임
4. aaa-시작 콘솔에 찍힘
5. bbb 함수가 callstack에 쌓임
6. bbb-시작이 콘솔에 찍힘
7. await에서 bbb 함수 안 실행 중단하고, async 함수가 마이크로 큐에 들어감(대기)
8. bbb 함수 callstack에서 없어짐
9. aaa-끝 콘솔에 찍힘. aaa 함수 callstack에서 없어짐
10. ====끝!!!!==== 콘솔에 찍힘. onClickLoop 함수 callstack에서 없어짐
11. bbb await callstack에 가져와서 실행. 철수 콘솔에 찍힘

자바스크립트는 await가 나오면 async를 감싸고 있는 함수가 하던 일을 중단하고 마이크로 큐에 들어간다!

그리고 async가 감싸고 있는 함수가 마이크로 큐에 들어갈 때에는 실행하던 위치를 기억한다.

따라서 마이크로 큐에서 나와 실행될 때에는 기억한 위치부터 실행된다.

또 다른 문제를 풀어보자.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>이벤트루프</title>
    <script>
      function onClickLoop() {
        console.log("=======시작!!!!=======");

        function aaa() {
          console.log("aaa-시작");
          bbb();
          console.log("aaa-끝");
        }

        async function bbb() {
          console.log("bbb-시작");
          await ccc();
          console.log("bbb-끝");
        }

        async function ccc() {
          console.log("ccc-시작");
          const friend = await "철수";
          console.log(friend);
        }

        aaa();

        console.log("=======끝!!!!=======");
      }
    </script>
  </head>
  <body>
    <button onclick="onClickLoop()">시작하기</button>
  </body>
</html>

콘솔에 찍히는 순서
=======시작!!!!=======
aaa-시작
bbb-시작
ccc-시작
aaa-끝
=======끝!!!!=======
철수
bbb-끝

구체적인 실행 과정
1. onClickLoop callstack에 쌓임
2. =======시작!!!!======= 콘솔에 찍힘
3. aaa 함수 callstack에 쌓임
4. aaa-시작 콘솔에 찍힘
5. bbb 함수 실행(callstack), bbb-시작 콘솔에 찍힘
6. ccc 함수 실행(callstack), ccc-시작 콘솔에 찍힘
7. ccc 함수 안 하던거 중단하고, await 부분이 마이크로큐에 들어감
8. bbb 함수 안 await 부분도 마이크로큐에 들어감
9. aaa-끝 콘솔에 찍힘
10. =======끝!!!!======= 찍힘. onClickLoop 종료
11. ccc 함수(await 부분) callstack에 가져옴
12. 철수 찍힘. ccc 함수 종료
13. bbb 함수(await 부분) callstack으로 가져옴
14. bbb-끝 찍힘. bbb 함수 종료