비동기 호출 이해

동기? 비동기 ?? 그게뭐야

1. 커피를 마시러 갔는데
2. 거기서 커피를 주문받고 커피를 만드는사이에
3. 다른손님으로의 주문을 일체 받지않는다면?

이를 blocking이라고 부른다.

동기적인 작업에 따라 이후 작업이 "막히게 된것"

우리는 앞으로 동기적인 작업보다 비동기적인 상황을 많이 접하게 된다.

왜? 자바스크립트는 싱글쓰레드 이므로,

나중에 async,await 등 비동기에 대해서 더 자세히 알아야하니까

여기서는 일단, 지연하여 실행시킨다는 느낌으로 이번 TIL을 써보자.

비동기 호출 ( Asynchronous call )

콜백, ? 다른함수(A)의 전달인자(argument)로 넘겨주는 함수(B)
(이벤트 핸들러 같은경우도 같다.) addEventListener..

콜백시킬때 주의사항 => 함수실행이 아니다.

//1
document.querySelector("#btn").onclick = handleClick; // 함수 그 자체
//2
document.querySelector("#btn").onclick = function(){
	handleClick(); // 익명 함수로 처리
}
//3
document.querySelector("#btn").onclick = handleClick.bind();//bind매소드를 사용(함수자체를 리턴해주는 함수 메서드, 나중에 찾아볼것)
//4
document.querySelector("#btn").onclick = handleClick(); // 이렇게하면 함수실행을 열결하는 것이 되버린다. 함수자체를 연결해야한다.

blocking vs. non-blocking

blocking => 전화 / 하던일을 멈추고 받아야한다.(blocking) / 요청에 대한 결과가 동시에 일어난다. (synchronous)

non-blocking => 문자 / 확인후 나중에 답장할수있다.(non-blocking) / 요청에 대한 결과가 동시에 일어나지 않는다 (asynchronous)

setTimeout(callback,ms) // 특정 시간 이후 callback 함수가 실행되는 브라우저 내장 함수이다.

비동기 함수 전달 패턴

1. callback 패턴

orderCoffeeAsync(request,function(response){
	drink(response);
    });

2. 이벤트 등록 패턴

orderCoffeeAysnc(request).onready = function(response){
  drink(response);
};

비동기의 주요사례

1. DOM Element의 이벤트 핸들러
   • 마우스 ,키보드 입력(click,keydown 등)
   • 페이지 로딩(DOMContentLoaded 등)
2. 타이머
   • 타이머API (setTimeout등)
   • 애니메이션 API (requestAnimationFrame)
3. 서버에 자원 요청 및 응답
   • fetch API
   • AJAX (XHR)