2020.07.07 [TIL] 비동기 호출

실제로 현업에서 JavaScript 코드를 작성하다보면, 코드의 작동이 비동기로 이루어지는 경우가 대부분입니다.

대표적으로

• 클라이언트-서버
• 이벤트 핸들링
• 애니메이션

등이 대표적인 예제입니다.

동기와 비동기의 개념을 익히고, 다음에 있을 타이머 및 서버 요청하기 세션을 준비합시다.

call back

• 다른 함수(A)의 전달인자(argument)로 넘겨주는 함수(B)
• parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행할수도 있고, 아니면 나중에 실행할 수도 있다.

function B() { console.log('called at the back!');

} function A(callback) { callback(); // callback === B } A(B);

• callback in action : 반복 실행하는 함수 (iterator);[1,2,3].map(function(elem, index) { return elem * index; });
• callback in action : 이벤트에 따른 함수(event handler) document.querySelector('#btn').addEventListener('click', function(e) { console.log('button clicked'); })

헷갈리지 마세요!

 

function handleClick();

  console.log('button clicked');

};

 

1. document.querySelector('#btn').oneclick = handleClick;

2.document.querySelector('#btn').onclick = function() {

    handleClick();

   }

3. document.querySelector('#btn').onclick = handleClick.bind();

-> o

 

 

4. document.querySelector('#btn').onclick = handleClick();

-> 함수 실행을 연결하는 것이 아니라 함수자체를 연결합니다. 그래서 x

 

blocking vs. non-blocking

 

전화 와 문자의 차이

 

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

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

 

비동기 함수 전달 패턴 1: callback 패턴

 

let request = ' caffelatte';

orderCoffeeAsync(request, function(response) {

// response -> 주문한 커피 결과

drink(response);

});

 

비동기 함수 전달 패턴 2 : 이벤트 등록 패턴

 

 

let request = 'coffelatte';

orderCoffeeAsync(request).onready = function( response){

// response -> 주문한 커피 결과

 drink(response);

};

 

비동기의 주요 사례

 

DOM Element의 이벤트 핸들러

 마우스, 키보드 입력(click, keydown 등) -> DOM세션

 페이지 로딩(DOMContentLdaded 등) ->DOM 런코 Note

타이머

 타이머 API(setTimeout등) ->TImer API세션

 애니메이션 API(requestAnimationFrame) ->직접 찾아보세요

서버에 자원 요청 및 응답

 fetch API ->서버에 요청하기 세션

 AJAX(XHR) ->직접 찾아보세요

 

 

브라우저의 비동기 함수 작동 원리를 알려면(advanced)

 

Event Loop

https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop 

동시성 모델과 이벤트 루프

Philip Roberts: Help, I'm stuck in an event-loop

https://vimeo.com/96425312