Achievement Goals
비동기 호출
- 비동기 호출의 개념에 대해서 이해한다.
- setTimeout 등의 비동기 호출 함수를 이용할 수 있다.
타이머API로 DELAY시켜주는 기능을 가지고 있다.
Advanced Challenge
- underbar.js 스프린트의 Advanced의 _.delay 문제를 풀 수 있다.
1. 비동기호출
콜백
- 콜백함수란?다른 함수의 전달 인자로 넘겨주는 함수
콜백함수 실행되는 두가지 방법
1.iterator : 반복 실행하는 함수
2. 이벤트에 따른 함수 : 이벤트 핸들러(함수자체를 연결하는것이 포인트)
2. blocking(동기)(전화) vs. non-blocking(비동기)(문자)
- blocking은 전화로 하던 일을 멈추고 받아야 한다. 그리고 요청에 대한 결과가 동시에 일어난다(synchronous)
- non-blocking은 문자로 확인 후, 나중에 답장할 수 있고,(non-blocking) 요청에 대한 결과가 동시에 일어나지 않는다.(asynchronous)
3. 커피 주문으로 알아보는 동기(전화) vs 비동기(문자)
- 동기는 요청에 대한 결과가 동시에 일어난다. 그로므로만일 커피 주문이 동기적으로 작동된다면?
- 손님1에게 주문받고 커피만들고 주고 손님2에게 또 주문을 받고.. 동시에 손님에게 커피를 주문받지 못한다.
- 비동기는 요청에 대한 결과가 동시에 일어나지 않는다. 그러므로 커피 주문이 비동기적으로 작동된다면?
- 손님1, 손님2에게 먼저 주문을 받고 만들 수 있다. 즉 요청에 blocking(동기, 막힘)이 없다.
- 응답(제조해서 커피 손님에게 주기)은 비동기적으로 이뤄진다. 즉 주문(요청)을 받으면서 동시에 제조도 가능하다.
- 주문한 커피가 완성 = 이벤트
- 주문한 손님을 부른다 = callback(함수가 리턴된다)
4. 동기적으로 함수 실전으로 코딩쳐보기!!
전체코드
// 동기적으로 지연시키는 함수
function waitSync(ms) {
var start = Date.now();
var now = start;
while(now - start < ms) {
now = Date.now();
}
} // 현재 시각과 시작 시간을 비교하며 ms범위 내에서 무한 루프를 도는 blocking함수입니다.
//사람과 커피를 인자로 넣어서 실행하는 함수
function drink(person, coffee){
console.log(person + '는 ' + coffee + '를 마십니다');
}
function orderCoffeeSync(coffee) {
console.log(coffee + '가 접수되었습니다');
waitSync(2000);
return coffee;
}
let customers = [{
name: 'Steve',
request: '카페라떼'
}, {
name: 'John',
request: '아메리카노'
}];
// call synchronously
//아래코드 실행하면
customers.forEach(function(customer) {
let coffee = orderCoffeeSync(customer.request);
drink(customer.name, coffee);
});
//실행결과
카페라떼가 접수되었습니다(2초뒤에)
Steve는 카페라떼를 마십니다
아메리카노가 접수되었습니다(2초뒤에)
John는 아메리카노를 마십니다
4-0 손님은 costomers라는 함수에 담겨있고, 요청하는 커피종류도 담겨있다.
let customers = [{
name: 'Steve',
request: '카페라떼'
}, {
name: 'John',
request: '아메리카노'
}];4-1 위에 손님 함수들은 대기열에 있으면서(forEach로 손님 한사람씩 주문을 받는다.)
orderCoffeeSync함수에 인자값으로customer.request(손님의 주문하는 커피)를 넣고 동기적(Sync)실행하고, 실행값이coffee변수에 담기면drink함수에 인자값으로customer.name와coffee를 넣어서 실행하면// call synchronously(비동기 호출) customers.forEach(function(customer) { let coffee = orderCoffeeSync(customer.request); drink(customer.name, coffee); }); function orderCoffeeSync(coffee) { console.log(coffee + '가 접수되었습니다'); waitSync(2000); return coffee; }- 아래
drink함수가 실행되어서 콘솔창에 커피주문자 는 요청한 커피를 마십니다라고 출력된다.
4-3function drink(person, coffee){ console.log(person + '는 ' + coffee + '를 마십니다'); }waitSync(2000)은 2초동안 blocking(동기)되버린다.function orderCoffeeSync(coffee) { console.log(coffee + '가 접수되었습니다'); waitSync(2000); return coffee; }```
5. 비동기적으로 함수 실전으로 코딩쳐보기!!
전체코드
function waitAsync(callback, ms) {
setTimeout(callback, ms); //특정 시간 이후에 callback 함수가 실행되게끔 하는 브라우저 내장 기능이다.
}
function drink(person, coffee){
console.log(person + '는 ' + coffee + '를 마십니다');
}
let customers = [{
name: 'Steve',
request: '카페라떼'
}, {
name: 'John',
request: '아메리카노'
}];
function orderCoffeeAsync(menu, callback) {
console.log(menu + '가 접수되었습니다');
waitAsync(function() {
callback(menu);
}, 2000);
}
// call Asynchronously
customers.forEach(function(customer) {
orderCoffeeAsync(customer.request, function(coffee){
drink(customer.name, coffee);
});
});
//실행결과
카페라떼가 접수되었습니다
아메리카노가 접수되었습니다(2초뒤에)
Steve는 카페라떼를 마십니다
John는 아메리카노를 마십니다
- 동기와 다르게 위에 비동기실행은 callback함수(callback(menu))가 설정한 시간 뒤에 실행되는것이 동기와 다른 점이다.
6. 비동기 함수 전달 패턴 1,2
1.callback패턴(bold part)
response -> 주문한 커피 결과를 말하다.
let request = 'caffelatte';
orderCoffeeAsynce(request, function(response) {
drink(response);
});
2.이벤트 등록 패턴
response -> 주문한 커피 결과를 말한다.
let request = 'caffelatte';
orderCoffeeAsync(request).onready = function(response) {
drink(response);
};
7. 비동기 주요 사례
- DOM Element의 이벤트 핸들러
- 마우스, 키보드 입력(click, keydownm등) -> DOM세션
- 페이지 로딩(DOMContentLoaded 등) -> DOM 런코 Note
- 타이머
- 타이머 API(setTimeout등) -> Timer API 세션
- 애니메이션 API(requestAnimationFrame)
-서버에 자원 요청 및 응답
- fetch API : 특정 서버에게 URL로 요청하는것 -> 서버에 요청하기 세션
- AJAX (XHR)
javascript 공부하는 sumiindaeyo