TIL) 비동기, callback, promise, async/await 코드로 공부하기

 

동기화

코드자 짜여진 순서대로 결과값이 도출된다.  

function waitSyns(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 + '가 접수되었습니다');
    waitSyns(4000);
    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);
});

// 출력값: 
카페라떼가 접수되었습니다
Steve는 카페라떼를 마십니다
아메리카노가 접수되었습니다
John는 아메리카노를 마십니다

 

 

비동기 – 동시에 여러 작업을 해볼 수 있다!

비동기 처리란, 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

자바스크립트에서 비동기 처리가 필요한 이유는, 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문이다. 비동기 처리가 아니고 동기 처리라면 코드 실행하고 기다리고, 실행하고 기다리고.. 아마 웹을 실행하는데 수십 분은 걸릴 것이다.

 

 

비동기의 주요 사례

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

*더 공부하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop

 

function waitAsync(callback, ms) {
	setTimeout(callback, ms);
}
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);
    }, 4000);
}
// call asynchronously
customers.forEach(function(customer) {
	orderCoffeeAsync(customer.request, function(coffee) {
    	drink(customer.name, coffee);
    });
});

//출력값
카페라떼가 접수되었습니다
아메리카노가 접수되었습니다

Steve는 카페라떼를 마십니다
John는 아메리카노를 마십니다

---

setTimeout

 

setTimeout 함수의 첫번째 인자는 기다린 후에 실행시킬 함수, 그 다음은 기다릴 밀리초(delay) 이다. 

 

 

하지만 setTimeout의 delay인자가 delay ms 후에 실행 되는 것을 보장하지 않는다. 정확히는 delay ms 후에 Callback Queue에 들어가는 것을 보장한다.

 

 

---

비동기 함수 전달 패턴

비동기 함수 전달 패턴 1 : callback 패턴

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

 

비동기 함수 전달 패턴 2 : 이벤트 등록 패턴 // 이벤트 리스트를 가지고 있는 패턴이라면!

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

 

 

---

Callback = 비동기 함수의 순서를 제어하고 싶을때

const printString = (string) => {
    setTimeout(
        () => {
            console.log(string)
        },
        Math.floor(Math.random() * 100) + 1
    )
}

const printAll = () => {
    printString("a")
    printString("b")
    printString("c")
}
printAll() 

// 출력값
a
c
b
랜덤으로 나온다.

 

const printString = (string, callback) => {
    setTimeout(
        () => {
            console.log(string)
            callback()
        },
        Math.floor(Math.random() * 100) + 1
    )
}

const printAll = () => {
    printString("a", () => {
    	printString("b", () => {
        	printString("c", () => {}) // 콜백헬이라고 부른다. 
        })
    })
}
printAll() 

// 출력값 
a
b
c

언제나 a ,b, c 순서대로 나온다. 
그 이유는 printString 명의 함수에서 callback이 setTimeout 함수가 끝나는 setTimeout의 콜백에 이 callback을 실행해주기 때문이다.

 

 

---

callback error handling design & usage

const somethingGonnaHappen = callback => {
	waitingUnitlSomethingHappens()
    
    if(isSomethingGood) {
    	callback(null, something)
    }
    if(isSomethingBad) {
    	callback(something, null)
    }
}

somethingGonnaHappen((err, data) => {
	if(err) {
    	console.log('ERR!!');
        return;
    }
    return data;
})

 

 

---

Promise = 자바스크립트 비동기 처리에 사용되는 객체

callback을 인자로 받지 않고, 새로운 Promise를 리턴한다. 

이 Promise는 resolve와 reject를 인자로 받는 callback을 실행하게 된다. 

 

ES6/ES2015 에서 소개된 Job Queue는 Callback Queue와 다른 Queue이며 Promise를 사용할 경우 Job Queue를 사용한다. promise를 사용할 때 callback 함수 역할을 하는 .then 을 사용하게 되며, 이런 thenable한 함수들은 Job Queue에 추가된다.

 

Job Queue의 우선순위가 Callback Queue보다 높아서, Event Loop는 Call Stack이 비어있을 경우, Job Queue에서 기다리는 모든 작업을 처리하고 Callback Queue로 이동하게 된다.

const printString = (string) => {
	return new Promise((resolve, reject) => {
    	setTimeout(
        	() => {
            console.log(string)
            resolve()
            },
            Math.floor(Math.random() * 100) + 1
            )
        })
    }
    
    const printAll = () => {
    	printString('A')
        .then(() => {
        	return printString("B")
        })
        .then(() => {
        	return printString("C")
        })
    }

printAll()

// 출력값
A
B
C

 

Promise 는 첫 임무가 끝나고 .then으로 다음 임무를 진행할 수 있다. 

reject로 에러처리가 되는 경우에는 .catch를 이용해서 에러 핸들링을 마지막 체인에서 할 수 있다. 

 

만약 callback에서 에러를 넘겨주는 함수가 있었다면 콜백을 처리할 때마다 에러처리를 해야한다. 

 

 

---

Promise Hell

function gotoCodestates() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`1. go to codestates`)}, 100)
    })
}
function sitAndCode() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`2. sit and code`)}, 100)
    })
}
function eatLunch() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`3. eat lunch`)}, 100)
    })
}
function gotoBed() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`4. gotoBed`)}, 100)
    })
}

gotoCodestates()
.then(data => {
	console.log(data)
    
    sitAndCode()
    .then(data => {
    	console.log(data)
    
    	eatLunch()
        .then(data => {
        	console.log(data)
            
            gotoBed()
            .then(data => {
            	console.log(data)
            })
        })
    })
})

// 출력값
1. go to codestates
2. sit and code
3. eat lunch
4. gotoBed

 

 

---

Promise Chaining

return을 통해서 해당 비동기를 다시 다음으로 넘긴다. 

promise의 깔끔함을 유지할 수 있고, 콜백을 피할 수 있다. 

function gotoCodestates() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`1. go to codestates`)}, 100)
    })
}
function sitAndCode() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`2. sit and code`)}, 100)
    })
}
function eatLunch() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`3. eat lunch`)}, 100)
    })
}
function gotoBed() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`4. gotoBed`)}, 100)
    })
}

gotoCodestates()
.then(data => {
	console.log(data)
    return sitAndCode()
})
.then(data => {
	console.log(data)
    return eatLunch()
})
.then(data => {
	console.log(data)
    return gotoBed()
})
.then(data => {
	console.log(data)
})

// 출력값
1. go to codestates
2. sit and code
3. eat lunch
4. gotoBed

 

---

async await

 

await라는 것으로 비동기 함수들을 마치 동기적인 프로그래밍인 것처럼 쓸 수 있다. 

실제로 돌아가는 것은 promise와 동일하게 돌아가는데 표현자체를 동기적을 쓸 수 있다. 표현 가독성이 좋다.

순차적으로 돌아간다. 기다린다는 것이다. 

 

 

function gotoCodestates() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`1. go to codestates`)}, 100)
    })
}
function sitAndCode() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`2. sit and code`)}, 100)
    })
}
function eatLunch() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`3. eat lunch`)}, 100)
    })
}
function gotoBed() {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {resolve(`4. gotoBed`)}, 100)
    })
}

const result = async () => {
	const one = await gotoCodestates();
    console.log(one);
    
    const two = await sitAndCode();
    console.log(two);
    
    const three = await eatLunch();
    console.log(three);
    
    const four = await gotoBed();
    console.log(four);
};

result();

// 출력값
1. go to codestates
2. sit and code
3. eat lunch
4. gotoBed

 

 

 

---

정리

 

1. 자바스크립트가 왜 비동기로 돌아가야할까? 

비동기 처리란, 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

자바스크립트에서 비동기 처리가 필요한 이유는, 화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문이다. 비동기 처리가 아니고 동기 처리라면 코드 실행하고 기다리고, 실행하고 기다리고.. 아마 웹을 실행하는데 수십 분은 걸릴 것이다.

 

2. callback = 비동기로 돌아가는 자바스크립트를 제어하는 방법 

3. promise = 사용하기 어려운 callback을 대신하여 쉽고 편하게 비동기 함수를 처리할 수 있다. 

4. promise도 promise hell에 빠질 수 있기에 promise chaining을 적절히 사용해야한다. 

5. async await를 써서 promise를 일반함수처럼 쓸 수 있게 된다. 

 

 

간단한 이벤트 루프의 작동 원리

 

이것은 스택이 비어있을때까지 기다리게 하기 위해서이다. 

setTimeout 0이 실행되면 Web API는 바로 종료하고 큐에 콜백을 집어넣는다. 이벤트 루프는 스택이 비워질때까지 기다린 후에 큐에 있는 콜백을 스택에 쌓을 수 있다. 스택은 계속해서 실행을 한다. console.log('hailie')를 실행하고 스택이 정리가 된다. 이제 이벤트 루프가 개입해서 콜백을 호출한다. 이것이 setTimeout 0이 이 코드 실행을 어떤 이유에선가 스택에 마지막까지 지연시키는 이유이다. 정확히는 스택이 비워질때까지겠지.

콜백은 다른 함수가 부르는 함수이다. 혹은 앞으로 큐에 쌓일 비동기식 콜백이라고 묘사할 수 있다. 

 

 

 

참조 "event loop"

https://www.youtube.com/watch?v=8aGhZQkoFbQ

 

참조 *call stack*

https://medium.com/sjk5766/call-stack%EA%B3%BC-execution-context-%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-3c877072db79

 

참조"js비동기"

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/