JS/NODE 비동기

Achievement Goals

• 어떤 경우에 중첩된 callback이 발생하는지 이해할 수 있다.
• 중첩된 callback의 단점, Promise의 장점을 이해할 수 있다.
• Promise 사용 패턴을 이해할 수 있다.
  • resolve, reject의 의미와, then, catch와의 관계를 이해할 수 있다.
  • Promise에서 인자를 넘기는 방법을 이해할 수 있다.
  • Promise의 세 가지 상태를 이해할 수 있다.
  • Promise.all 의 사용법을 이해할 수 있다.
• async/await keyword에 대해 이해하고, 작동 원리를 이해할 수 있다.
• Node.js의 fs 모듈의 사용법을 이해할 수 있다.

비동기와 동기

비동기: 요청에 대한 결과가 동시에 일어나지 않는 것이 비동기적.

동기: 요청에 대한 결과가 동시에 일어나는 것이 동기적(synchronous)이다.

비동기 실행의 유용성

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

비동기 함수 전달 패턴

• call back 패턴
  

• 이벤트 등록
  

비동기의 주요 사례

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

Callback 함수

• 반복실행하는 함수(iterator)

[1,2,3].map(function(element, index) {
 return element * element
}

• Callback 에러 핸들링 디자인
  

• 이벤트에 따른 함수 (event handler)

document.querySelector('#btn').addEventListener('click', function(e) { console.log('button clicked');
});

주의 : 함수실행을 연결하는 것이 아니다. 함수자체를 연결하는 것이다.
document.querySelector('#btn').onclick = handleClick(); X

출처 :코드스테이츠