(TIL) D+22 비동기 callback, promise, async await

비동기

• blocking : 하나의 작업이 끝날 때까지, 이어지는 작업을 막는 것 ⇒ non-blocking : 언제든 요청을 받을 수 있다.
  
• 동기적(synchronous)이다: 시작 시점과 완료 시점이 같은 상황
• 비동기적(asynchronous) : 요청 시점과 실행 시점이 같을 필요 없음
• Node.js
  • non-blocking 하고 비동기적(asynchronous)으로 작동하는 런타임 개발
• 비동기적 작업이 필요한 상황
  • 백그라운드 실행, 로딩 창 등의 작업
  • 인터넷에서 서버로 요청을 보내고 응답을 기다리는 작업
  • 큰 용량의 파일을 로딩하는 작업

콜백함수

• 콜백함수 쓰는 경우
  • 반복 실행하는 함수 (iterator)]

[1, 2, 3].map((el, index) => return el * el); // 콜백함수가 배열의 길이만큼(3번) 반복 실행됨

• 이벤트핸들러
• 콜백함수 혼동 주의(in 이벤트핸들러)
  • 함수 자체를 연결해야지 함수의 실행을 연결하는 것이 아니다!

blocking vs non-blocking

[ 예시 ]

전화 ⇒ 하던일을 멈추고 받아야 함(blocking) / 요청에 대한 결과(응답)가 동시에 일어남(synchronous)
문자 ⇒ 확인후, 나중에 답장 가능(non-blocking) / 요청에 대한 결과(응답)가 동시에 일어나지 않음(asynchronous)

비동기 함수 전달 패턴

• 콜백패턴

let request = 'caffelatte';
orderCoffeeAsync(request, function(response) {
	// response -> 주문한 커피 결과
	drink(response);
});

• 이벤트 등록 패턴

let request = 'caffelatte';
orderCoffeeAsync(request).onready = function(response) {
	// response -> 주문한 커피 결과
	drink(response);
};

비동기의 주요 사례

• DOM Element 의 이벤트 핸들러
  • 마우스, 키보드 입력 (click, keydown 등) → DOM세션
  • 페이지 로딩 (DOMContentLoaded 등) : 페이지가 로딩되면 실행 → DOM 런코 note
• 타이머
  • 타이머 API (setTimeout 등) : 시간이 지난후 실행시켜 → Timer API 세션
  • 애니메이션 API (requestAnimationFrame) → 직접 찾아보기
• 서버에 지원 요청 및 응답
  • fetch API → 서버에 요청하기 세션
  • AJAX (XHR) → 직접 찾아보기
• 브라우저의 비동기 함수 작동원리 이해(advanced)
  • Event Loop : https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop
  • https://vimeo.com/96425312

비동기 자바스크립트

• 왜 비동기적(async)인가?
• 콜백
  • 비동기가 예측이 어려울 것 같은데 어떻게 순서를 제어하는가?
  • 콜백으로 비동기를 제어할 수 있다
  • 문제점 : 콜백 지옥
• Promise
  • 콜백 지옥을 벗어나기
  • 일종의 클래스로 new Promise() 를 통해서 인스턴스가 생성됨
    • resolve() : go to next action
    • reject() : handle error
  • 에러 핸들링도 매 콜백 실행할 때마다 해주는게 아니라 마지막에 한번으로 잡아주면 됨
  • 하지만 프로미스 헬도 발생할 수 있다 ⇒ 적절하게 리턴해서 처리해주어야 함 (프로미스 체이닝)
• async await
  • 비동기 함수를 마치 동기적인 것처럼 쓸 수 있음

관련 레퍼런스

• setTimeout() mdn : https://developer.mozilla.org/ko/docs/Web/API/setTimeout
• Promise.prototype.then() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
• Promise 와 async, await 모던자바스크립트 : https://ko.javascript.info/async

선참시

• 내가 짠 코드, 나중에 다시 쓸 것같은 코드들 깃허브에 기록해서 관리
  - 플렉스 박스나 나만의 css 버튼 등 재사용 가능한 단위들
  - 짝수, 홀수 계산기
  - 정규표현식을 이용한 유효성 검사
• 깃과 깃허브를 마스터하고 일하기
• 눈코딩 금지