[javascript] 비동기 이해하기1
[JavaScript] 비동기 이해하기 (1)
자바스크립트에서 함수는 어떻게 실행될까?
자스크립트의 코드를 실행하는 프로그램인 자바스크립트 엔진은 단 하나의 실행 컨텍스트를 스택을 가진다. 실행 컨텍스트? 스택? 너무 어렵지만 함수를 실행할 수 있는 창구가 단 하나다! 라고 생각하면 쉽다. 창구가 단 하나이기 때문에 동시에 여러개의 함수를 실행할 수 없는 것이다. 이 방식을 싱글 스레드라고 하는데 하나의 함수를 실행할 때 처리시간동안 다른 함수를 실행하지 못하게 블로킹(blocking)을 한다.
blocking VS non-blocking
blocking: 요청 작업이 끝날때까지 다른 작업을 하지 않고 기다림non-blocking: 요청 작업이 수행하는 동안 다른 작업도 수행 가능
동기(synchronously) VS 비동기 (asynchronously)
-
동기 (
synchronously) : 현재 실행중인 태스크가 종료될 때까지 다음 태스크가 대기하는 방식 -
비동기 (
asynchronously) : 비동기란 동시에 발생하는 둘 이상의 개체 또는 이벤트 (또는 이전 항목이 완료될 때까지 기다리지 않고 발생하는 여러 관련 작업)를 나타낸다 (MDN)
카페에서 아르바이트 한 경험을 떠올려보면 혼자 아르바이트 하는 경우를 동기적이라고 할 수 있을 것 같다. 1. 주문을 받고 2. 음료를 만들고 3. 손님께 음료를 드리고 그 다음 1. 주문을 받고 2. 음료를 만들고 3. 손님께 음료를 드리고 …. 순서대로 하나의 동작이 끝나면 그 다음 과정을 할 수 있었다. (순차적으로)
하지만 여러명이 함께 아르바이트를 하는 경우를 비동기적이라고 할 수 있을 것 같다. 한명은 1-1. 주문을 받고 한명은 1-2. 음료를 만들고 한명은 1-3. 음료를 드리고 또 다시 2-1. 주문을 받고 한명은 2-2. 음료를 만들고 한명은 2-3. 음료를 드리고 ….. 1번 과정을 동시에, 2번 과정을 동시에 할 수가 있다.
아래 코드를 보면 이해가 조금(?) 더 간다.
- 동기적
function firstFunc() {
console.log('첫번째 실행');
SecondFunc();
}
function SecondFunc(){
console.log('두번째 실행');
thirdFunc();
}
function thirdFunc() {
console.log('세번째 실행');
}
firstFunc(); // 첫번째 실행 -> 두번째 실행 -> 세번째 실행
// 순차적으로 실행 됨
- 비동기적
function firstFunc(){
console.log('첫번째 실행');
func2();
}
function SecondFunc(){
setTimeout(function(){
console.log('1초 뒤에 실행되겠다!');
}, 1000);
func3();
}
function thirdFunc(){
console.log('몇번째 실행?');
}
func1(); // 첫번째 실행 -> 몇번째 실행? -> (1초 뒤) -> 1초 뒤에 실행되겠다!
// 비동기적으로 실행 됨
잠깐, 갑자기 setTimeout ?
setTimeout()은 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정한다. 위에 코드에서는 1000ms 뒤에 지정한 함수를 실행한다. (‘1초 뒤에 실행되겠다!’) setTimeout()은 비동기 함수로서, 함수 스택의 다른 함수 호출을 막지 않는다. 달리 말하자면, setTimeout()을 사용해서 다음 함수 호출을 “일시정지” 할 수는 없다.
위의 비동기적 코드를 보면 익숙한 코드의 형태를 볼 수 있다. 바로 콜백패턴이다!하지만 비동기 처리를 위한 콜백 패턴은 콜백헬(callback hell)을 발생시킨다. 이름만 들어도 지옥같은 이 현상은 가독성을 나쁘게 하고 비동기 처리 중 발생한 에러의 처리가 곤란하며, 여러개의 비동기 처리를 하는 데에도 한계가 있다. 이를 막기 위해서는 프로미스(promise)에 대해 알아야 한다. (다음에서 계속….)
