비동기
- blocking : 하나의 작업이 끝날 때까지, 이어지는 작업을 막는 것 ⇒ non-blocking : 언제든 요청을 받을 수 있다.
- 동기적(synchronous)이다: 시작 시점과 완료 시점이 같은 상황
- 비동기적(asynchronous) : 요청 시점과 실행 시점이 같을 필요 없음
- Node.js
- non-blocking 하고 비동기적(asynchronous)으로 작동하는 런타임 개발
- 비동기적 작업이 필요한 상황
- 백그라운드 실행, 로딩 창 등의 작업
- 인터넷에서 서버로 요청을 보내고 응답을 기다리는 작업
- 큰 용량의 파일을 로딩하는 작업
콜백함수
[1, 2, 3].map((el, index) => return el * el);
- 이벤트핸들러
- 콜백함수 혼동 주의(in 이벤트핸들러)
- 함수 자체를 연결해야지 함수의 실행을 연결하는 것이 아니다!
blocking vs non-blocking
[ 예시 ]
전화 ⇒ 하던일을 멈추고 받아야 함(blocking) / 요청에 대한 결과(응답)가 동시에 일어남(synchronous)
문자 ⇒ 확인후, 나중에 답장 가능(non-blocking) / 요청에 대한 결과(응답)가 동시에 일어나지 않음(asynchronous)
비동기 함수 전달 패턴
let request = 'caffelatte';
orderCoffeeAsync(request, function(response) {
drink(response);
});
let request = 'caffelatte';
orderCoffeeAsync(request).onready = function(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 버튼 등 재사용 가능한 단위들
- 짝수, 홀수 계산기
- 정규표현식을 이용한 유효성 검사
- 깃과 깃허브를 마스터하고 일하기
- 눈코딩 금지