What you will learn today
- 동기&비동기적 통신의 원리
- blocking이 발생하는 이유
- async로 문제를 해결하기
✔ 동기 & 비동기적 통신이란?
동기적 통신은 무엇일까요? 말 그대로 동시에 일어난다는 의미입니다.
서버에게 request를 보내고, 서버가 response를 보내면, 기다려서 받습니다.
즉, 서버와의 Transaction 을 맞춘다는 얘기입니다.
예를 들면, 한 동아리에서 팀장이 30000원 가격의 치킨을 주문하려 할 때, 일을 동기적으로 처리한다면 문제가 발생합니다.
부원들이 송금을 모두 끝내야만 주문을 할 수 있기 때문입니다. 그럼 배달이 굉장히 늦게 진행될 것입니다.
각자 내야할 돈 계산 -> 부원 4명이 모두 돈을 송금 완료 -> 송금 진행 상태 확인 -> 팀장이 치킨 주문
이처럼 Response가 지연되게 된다면 Request를 보낸 Thread는 해당 Response를 무작정 기다리는 상태가 된다는 것입니다.
Synchronously하게 Response를 받고 Request를 받는 구조로 Response가 계속 지연되게 된다면 뒤에 들어오는 요청들은 Connection 가능한 Thread가 없어 연결을 맺지 못하는 성능 적인 이슈가 발생 할 수 있습니다.
이때 비동기적(Asynchronous) 통신을 통해 Response를 기다리지 않고 thread는 다른 일을 처리할 수 있게 됩니다.
이러한 상태를 Non Block 상태라고 합니다.
이전 예시에서, 동아리 팀장은 부원들의 송금(response)을 기다리지 않고 치킨 주문이라는 일을 asynchronously하게 처리할 수 있다는 거죠.
이처럼 처리결과에 의존하지 않고 빠른 처리가 가능한 ASynchronous(비동기식) 방법을 통해 성능을 향상시킬 수 있게 됩니다.
✔ Synchronous
javascript는 하나의 실행 컨텍스트 스택을 가집니다.
대기중인 태스크들은 현재 실행 중인 태스크가 pop되어 stack에서 제거되면 실행되기 시작합니다.
왜냐하면 javascript는 single thread방식으로 동작하기 때문입니다.
따라서 시간이 오래 걸리는 태스크를 실행하면 blocking이 발생합니다.
function sleep(func, delay) {
const delayUntil = Date.now() + delay;
while (Date.now() < delayUntil); // time delay...
func(); // callback function
}
function foo() {
console.log('foo');
}
function bar() {
console.log('bar');
}
sleep(foo, 3 * 1000);
bar(); - sleep function는 3초간 실행됩니다.
- 이후 foo -> bar가 실행된다.
- sleep이 완전히 종료된 후(3초 후) bar 함수가 호출된다 -> Blocking 발생!
이러한 문제는 비동기적 통신을 통해 해결할 수 있습니다.
✔ Asynchronous
function foo() {
console.log('foo');
}
function bar() {
console.log('bar');
}
setTimeout(foo, 3 * 1000);
bar()setTimeout()이후의 태스크를 blocking 없이 비동기적으로 바로 실행합니다.
bar가 먼저 실행 -> 3초 후 foo가 출력!
태스크가 blocking 되지 않는 장점은 있으나, 태스크의 순서가 보장되지 않는다는 단점이 있습니다.
또한 비동기 함수는 콜백 패턴을 사용하는데, 이는 callback hell을 발생시켜 가독성을 떨어뜨립니다.
