[JS/Node] 비동기

Song·2021년 11월 16일
0

bootcamp

목록 보기
4/11
post-thumbnail

이때까지 학습했던 고차함수에서는 동기적으로 실행되는 방법으로 학습해왔다.

callback 함수를 사용하면 사용에 따라 동기적, 비동기적으로 모두 사용 가능하다.

const A = function () {
console.log('Hello World!');
}
const B = function (callback){
callback(); 	//바로 callback함수 A로 넘어가서 실행
}

B(A);
  • 반복 실행하는 함수 iterator
    : forEach, map, reduce 등 반복적으로 함수를 호출해 실행하는 함수에서도 callback
    코드
 [1,2,3,4].map(function(el){
   return el*2		//element를 2씩 곱해주는 함수가 callback 함수
 })
  • 이벤트에 따른 함수 event handler
    주의할점: 함수 실행을 버튼에 다는게 아니라 함수 자체를 달아야 한다.

동기 VS 비동기

동기: 하던 작업을 멈추고 실행해야한다 === 요청에 대한 결과가 동시에 일어난다
비동기: 확인 후 나중에 실행 가능하다 === 요청에 대한 결과가 동시에 일어나지 않는다

동기적으로 작업을 실행할 때 생기는 문제점

: 앞선 작업이 끝나기 전까지 그 다음 작업을 아예 시작조차 할 수 없다. 앞선 작업이 완료될 때까지 그 다음으로 올 작업들은 계속 대기열에 머물러 있게 된다.

커피 주문 예시 - callback 패턴

let request = 'latte';
orderCoffeeAsync(request, function(response){
//callback으로 주문한 커피결과 보여줌
drink(response); 
}

비동기의 주요 사례

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

0개의 댓글