Skip to content

Latest commit

 

History

History
110 lines (76 loc) · 3.12 KB

2021_01_31.md

File metadata and controls

110 lines (76 loc) · 3.12 KB

async> callback

*이 글은 드림코딩 엘리님의 자바스크립트 강의를 참고하여 공부 목적으로 작성한 글입니다.
(출처: https://www.youtube.com/watch?v=s1vpVCrT8f4&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=11)


동기와 비동기

자바스크립트는 동기적인(synchronous) 언어이다. 즉, hoisting(호이스팅)이 된 이후부터 개발자가 작성한 코드 순서대로 하나씩 동기적으로 실행된다.


🗨hoisting이란? data types - hoisting


이와 반대로 비동기(asynchronous)는 언제 코드가 실행될지 예측할 수 없다.

setTimeout web API는 개발자가 지정한 시간이 지나면 전달한 콜백함수를 호출한다. 아래 예시가 있다.

'use strict'

console.log("1");
setTimeout(()=>
	console.log("2");
,1000);
console.log("3");
  1. 첫번째 줄부터 코드가 실행되면서 setTimeout을 만나면 브라우저에게 1초 후에 console.log("2")를 실행해달라고 요청한다.
  2. 응답을 기다리지 않고 console.log("3")으로 넘어간다.
  3. 1초 후, 브라우저가 console.log("2")를 실행하라고 알려준다.

이것이 바로 비동기적인 실행 방법이다.
setTimeout과 같은 함수들을 지금 바로 실행하지 말고 나중에 실행(call)해달라는 의미에서 callback함수라고 부른다.


callback정리

🗨callback은 비동기일때만 쓰나요? No.


  • 동기 콜백(Synchronous callback)
'use strict'

function printImmediately(print){
	print();
}

console.log("1");
setTimeout(()=>
	console.log("2");
,1000);
console.log("3");

printImmediately(() => console.log("hello"));
// 1 > 3 > hello > 2의 순서로 출력.

printImmediately()는 callback을 파라미터로 받아서 처리하는 함수이다.
hoisting에 따라, printImmediately 함수의 선언이 맨 위로 올라가게 된다.

  • 비동기 콜백(Synchronous callback)
'use strict'
function printImmediately(print){
	print();
}
function printWithDelay(print, timeout){
	setTimeout(print,timeout); 
}

console.log("1"); //동기

setTimeout(()=>
	console.log("2"); //비동기
,1000);

console.log("3"); //동기

printImmediately(() => console.log("hello")); //동기

printWithDelay(()=>console.log('async callback'),2000); //비동기
// 1 > 3 > hello > 2 > async callback의 순서로 출력.

전달받은 print와 timeout을 setTimeout에 요청하는 함수의 예시이다.



콜백 지옥! 콜백 체인의 문제점

비동기 코드를 중첩해서 쓰다보면 콜백 지옥에 갇힐 수 있다.
콜백 함수 안에서 다른 것을 호출하고, 또다른 콜백을 전달한다면 아래와 같은 문제가 발생한다.

  • 가독성이 떨어진다.
  • 비즈니스 로직을 한눈에 파악하기 어렵다.
  • 에러가 발생할 때 해결하기 어렵다.
  • 유지보수가 어렵다.

promise편에서 비동기 코드를 깔끔하게 짤 수 있도록 알아보자.