[JS/Node] 비동기

hosik kim·2021년 10월 13일

JavaScript asynchronous asynchronous call callback 비동기 코드스테이츠

With CodeStates

목록 보기

11/45

💡비동기 쉽게 이해하기

: 하나의 작업이 끝날 때까지, 이어지는 작업을 "막는 것"을 blocking 이라 부른다.
: 시작 시점과 완료 시점이 같은 상황을 "동기적(synchronous)이다."라고 한다.
: 개발자들은 Node.js를 non-blocking하고 비동기적(asynchronous)으로 작동하는 런타임으로 개발

비동기적 실행의 효율성

백그라운드 실행, 로딩 창등의 작업
인터넷에서 서버로 요청을 보내고, 응답을 기다리는 작업
큰 용량의 파일을 로딩하는 작업

📌Introduction

: 비동기 흐름은 callback, promise, async/await 중 하나의 문법을 이용하여 구현할 수 있다.

💡고참함수와 callback

고차함수는 다른 함수를 인자(argument)로 전달받을 수 있다.
- 고차함수의 인자로 전달되는 함수를 콜백 함수(Callback function)이라고 한다
  콜백 함수는 어떤 작업 중에 호출하는 경우가 많아서, 업무 중 걸려온 전화에 답신하는 전화를 나타내는 콜백이라는
  이름이 붙여졌다.
고차함수는 다른 함수를 리턴할 수 있다.
- '함수를 리턴하는 함수'를 부루는 용어는 커리 함수라 부른다.
- 따로 커리 함수라는 용어를 사용하는 경우에는, 고참함수란 용어를 '함수를 인자로 받는 함수'에만 한정해 사용하기도 한다.
'함수를 리턴하는 함수'와 '함수를 인자로 받는 함수' 모두 고차함수이다.
즉, 고차함수는 콜백 함수와 커리 함수의 상위 개념이다.
콜백 함수를 전달 받은 caller함수는, 함수 내부에서 이 콜백 함수를 호출(invoke) 할 수 있다.
caller는 조건에 따라 콜백 함수의 실행 여부를 결정할 수 있다, 아예 호출하지 않을 수도 있고, 여러번 실행할 수도 있다.

💡비동기 호출(Asynchronous call)

callback review

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

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(element, index) {
  return element * element;
});
// 배열의 길이만큼 총 3번 반복된다.

callback in action: 이벤트에 따른 함수 (event handler)

document.querySelector('#btn').addEventLustener('click', function(e) {
  console.log('button clicked');
});
// dom에서 사용하였던 event handler를 통한 반복

‼️ 헷갈리지 말아야할 점

function handleClick() {
  console.log('button clicked');
};

✅ document.querySelector('#btn').onclick = handleClick;
// 레퍼런스로  handleClick을 주었다.

✅document.querySelector('#btn').onclick = function() {
  handleClick();
}
// 새로운 익명 함수를 만들고 그 안에서 handleClick을 실행

✅document.querySelector('#btn').onclick = handleClick.bind();
// 함수 메소드(bind)는 함수 그 자체를 리턴한다.

🚫document.querySelector('#btn').onclick = handleClick();
// 함수 실행을 하고 있으므로 리턴이 없기 때문에 undefined가 된다.

blocking vs non-blocking

전화	문자
하던 일을 멈추고 받아야 한다(blocking)	확인 후, 나중에 답장할 수 있다(non-blocking)
요청에 대한 결과가 동시에 일어난다(synchronous)	요청에 대한 결과가 동시에 일어나지 않는다(asynchronous)

비동기의 주요 사례

DOM Element의 이벤트 핸들러
- 마우스, 키보드 입력(click, keydown 등) ➡️ DOM 세션
- 페이지 로딩(DOMContentLoaded 등) ➡️ DOM 런코 Note
타이머
- 타이머 API(setTimeout 등) ➡️ Timer API 세션
- 애니메이션 API(requestAnimationFrame)
서버에 자원 요청 및 응답
- fetch API ➡️ 서버에 요청하기 세션
- AJAX (XHR)