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

JulyK9·2022년 7월 30일
0

비동기

  • 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)

비동기 자바스크립트

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

관련 레퍼런스

선참시

  • 내가 짠 코드, 나중에 다시 쓸 것같은 코드들 깃허브에 기록해서 관리
    - 플렉스 박스나 나만의 css 버튼 등 재사용 가능한 단위들
    - 짝수, 홀수 계산기
    - 정규표현식을 이용한 유효성 검사
  • 깃과 깃허브를 마스터하고 일하기
  • 눈코딩 금지
profile
느리지만 꾸준하게. 부족하거나 잘못된 부분은 알려주시면 감사하겠습니다.

0개의 댓글