📝 동기와 비동기 | Promises, callbacks, async/await

 

 

동기(Synchronous) vs 비동기(Asynchronous)

 

카페 점원이라고 생각해보자. 손님에게 복숭아 아이스티를 주문받았다. 

 

그럼 아래와 같이 6 단계를 거쳐 손님에게 제공할 수 있다.

 

 

1. 주문받기 -> 2초 소요

 

2. 복숭아티 파우더를 컵에 넣는다(1 스푼) -> 2초 소요 

 

3. 따뜻한 물을 조금 붓고, 파우더를 녹여준다. -> 5초 소요

 

4. 파우더가 녹았다면, 얼음을 넣고 차갑게 저어준다. -> 3초 소요

 

5. 물을 적당량 넣어주고 섞어준다. -> 2초 소요

 

6. 손님에게 제공한다.  -> 2초 소요

 

 

 

동기적 실행(synchronous system) 은 하나의 테스크 실행이 완료될 때까지 다른 테스크들은 블로킹(작업 중단) 되는 방식이다. 

 

1명의 손님에게 음료를 제공하기 전까지 다른 손님의 주문을 받지 않는다. 

 

 

 

unsplash

 

이렇게 되면 일이 비효율적으로 진행되게 된다.

 

그에 반해, 비동기는 서로 영향을 받지 않고 각자의 일을 진행한다. 

손님 1의 주문을 받았다면 위의 6가지 스탭이 진행되고, 

동시에 손님 2의 주문을 받고 위의 6가지 스탭이 진행된다.

 

 

손님 1, 손님 2는 서로의 진행사항에 영향을 받지 않고 동시에 일을 진행하는 것이다. 비동기 처리는 이렇게 한 테스크가 종료되지 않은 상태여도 다음 테스크가 블로킹되지 않는다. 

 

 

 

 

 

console.log 로 비교해보는 동기/비동기

 

//synchronous
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

 

자바스크립트 코드는 위에서 아래로 순차적으로(동기적으로) 실행된다. 1부터 5까지 출력하는 코드를 위와 같이 적었을 때 하나의 코드가 실행될 동안 다른 코드들은 블로킹(실행중지)된다.  

 

 

 

 

이렇게 동기적으로 실행되는 자바스크립트 코드를 몇가지 방법을 통해 비동기적으로 조작할 수 있다. 

 

 

 

 

 

1. setTimeout 함수 사용하기 

* 자바스크립트에서는 setTimeout, setInterval, clearTimeout, clearInterval 타이머 함수를 제공한다. 

 

첫번째 방법은 자바스크립트 빌트인 함수인 setTimeout을 사용하는 방법이다. 

 

setTimeout은 내가 직접 코드를 언제 실행할 지 타이머를 맞출 수 있다. 

setTimeout(functionRef, delay, param1, param2,....)

 

[parameters]

functionRef  : 내가 지정해 준 타임이 지난 후에 실행할 함수이다. 

delay : 몇 초 후에 함수를 실행할 지 초를 지정해준다(밀리초 기준: 1000 = 1초)

param1, ...paramN  : functionRef로 넘겨줄 파라미터들이다. 

 

[return value]

고유한 id값을 담은 timeoutID값을 리턴값으로 준다. timeoutID를 통해 clearTimeout()으로 setTImeout함수를 제거할 수 있다.

 

//asynchronous setTimeout function
console.log(1);
console.log(2);
setTimeout(() => console.log(3), 3000);
console.log(4);
console.log(5);

 

결과를 보면 1, 2, 4, 5가 순차적으로 출력된 후에 3초 뒤에 3이 출력되는 것을 볼 수 있다.

 

 

 

2. callback 사용하기

콜백 함수는 인자값으로 전달된 함수이다. 

//예제1 
function greeting(name){
	console.log('hi' + name);
}
function userInput(callback){
	const name = prompt('enter your name.')
	callback(name);
}

userInput(greeting);

/*
userInput함수는 함수(콜백함수)를 인자값으로 받고 있다. 
*/

//예제2
setTimeout(() => console.log(1), 1000);

 

 

위에서 봤던 setTimeout 함수도 첫번째 파라미터로 함수를 전달받는다. setTimeout 의 첫번째 인자값으로 전해진 함수를 콜백함수라 할 수 있다. 

 

*!주의 : setTimeout 함수가 콜백함수가 아니라, 인자값으로 전해진 함수가 콜백함수이다. 

 

 

function one(call_two){
  console.log(1);
  //1 다음에 two실행
  call_two(); 
}
function two(){
  console.log(2);
}

one(two);

 

 

복숭아 아이스티 제공 과정을 callback 함수로 작성해보자. 

let order = (call_production) => {
  setTimeout(() => {
    console.log('주문받기 완료');
    production(serve);
  }, 2000);
};

let production = (call_serve) => {
  setTimeeout(() => {
    console.log("주문전달 받았습니다. 만들기 시작합니다");
    
    setTimeout(() => {
      console.log("복숭아티 파우더 넣기 완료.");
      
      setTimeout(() => {
        console.log("따뜻한 물로 파우더 녹이기 완료.");
        
        setTimeout(() => {
          console.log("얼음 넣기 완료");
          
          setTimeout(() => {
            console.log("물 넣기 완료");
            console.log("다 만들었습니다. 서빙해주세요");
            serve();
          }, 2000);
        }, 3000);
      }, 5000);
    }, 2000);
  }, 0000);
};

let serve = () => {
  setTimeout(() => console.log('주문하신 음료 나왔습니다.'), 2000);
}

order(production);

 

 

callback hell

 

그러나 위의 코드에서 보여지듯, 함수에서 콜백함수를 호출하고 그 과정이 반복되어 나타나는 구조를 콜백 헬이라고 한다. 

 

 

 

 

프로미스를 활용하면 이와 같은 문제점을 커버하고, 더 유지보수하기 쉬운 비동기 코드를 짤 수 있다.  

 

 

 

 

 

 

 

2. Promise 활용하기 

부모와 자식간의 연결고리로 계속 종속되는 구조의 콜백함수와 달리, 프로미스는 구조가 깔끔하다. 코드를 실행한 후, 새롭게 다음 라인 코드가 실행되는 구조이다.

 

프로미스는 아래의 사이클을 거친다.

 

mdn 이미지

 

 

 

프로미스를 사용하려면 다음 4가지를 알아야 한다. 

- time과 work

- 프로미스 체이닝

- 에러 핸들링

- .finally 핸들러 

 

 

 

먼저 프로미스를 생성해보자. 프로미스를 사용하기 위해서는 먼저 사용자가 직접 약속(프로미스)을 생성해야 한다.

 

Promise() 생성자를 통해 생성할 수 있다. 

const promise = new Promise(실행함수);

 

이번 포스팅의 promise는 복숭아 아이스티를 서빙하는 것이다. 

 

 

프로미스는 셋 중 하나의 상태를 가지게 된다. 

 

- 대기상태(pending) : 아직 이행, 거부도 하지 않은 상태

- 이행(fulfilled) : 프로미스가 성공적으로 이행됨

- 거부(rejected) : 프로미스 이행 실패

 

아직 손님이 주문하지 않은 상태. 아직 아무것도 실행되지 않은 그 상태가 pending 이다. 

 

프로미스에서 pending 상태를 거친 뒤에는 성공적으로 이행이 되거나 실패하는 2가지 상태가 발생한다. 

resolve : 프로미스 이행 성공의 경우

reject : 프로미스 이행 실패의 경우 

 

 

 

 

 

1. time 과 work 

 

 

프로미스를 사용할 때는 먼저 time 과 work를 파악해야 한다. 

복숭아 아이스티의 예시의 경우 아래와 같이 time과 work가 나뉜다. 

 

time : 2초

work : 주문받기

 

 

복숭아 아이스티 과정을 프로미스를 사용해 아래와 같이 나타낼 수 있다.

let is_store_open = true;

let order = (time, work) => {
    return new Promise((resolve, reject) => {
        if(is_store_open){
            setTimeout(() => {
                resolve(work());
            }, time);
        }
        else {
            reject(console.log('the store was closed'));
        }
    });
}

 

 

 

1. is_shop_open은 resolve, reject의 조건이다. 

 

- 가게문이 열렸을 경우(is_shop_open = true) => resolve를 실행한다. 

- 가게문이 닫혔을 경우(is_shop_open = false) => reject를 실행한다.

 

3. time과 work 

 

order 함수는 time과 work를 인자값으로 받아서 time만큼 딜레이 한 후 work를 실행하는 함수이다.

위와 같이 time, work를 받는 order 함수를 사용해 프로미스를 실행한다면 훨씬 깔끔하고, 재사용성 높은 코드를 작성할 수 있다.

 

 

 

 

2. 프로미스 체이닝 

 

프로미스는 각 과정을 .then을 통해 잇는다.

order(2000, () => console.log("주문받기 완료"))

.then(() => order(0000, () => console.log("주문전달 받았습니다. 만들기 시작합니다.")))

.then(() => order(2000, () => console.log("복숭아티 파우더 넣기 완료")))

.then(() => order(5000, () => console.log("따뜻한 물로 파우더 녹이기 완료")))

.then(() => order(3000, () => console.log("얼음 넣기 완료")))

.then(() => order(2000, () => console.log("물 넣기 완료")))

.then(() => order(0000, () => console.log("다 만들었습니다. 서빙해주세요.")))

.then(() => order(2000, () => console.log("주문하신 음료 나왔습니다.")))

 

then으로 줄줄이 연결된 이러한 구조를 프로미스 체이닝이라고 한다.

 

- then과 then 사이에는 ; 세미콜론 사용이 불가능하다. 

 

- then과 then 사이에는 스페이스 간격을 많이 사용해도 상관없다. 

 

- then은 첫번째 인자값으로 전의 프로미스 이행 값(리턴 값)을 받는다. 

.then(() => order(2000, () => {
    console.log("주문하신 음료 나왔습니다.");
    return 11;
}))

.then((value) => console.log(value));

 

 

 

 

 

 

 

3. 에러 핸들링

 

프로미스에서는 catch 메서드를 사용해서 에러를 핸들링한다. catch 핸들러는 오직 프로미스가 reject 되는 경우에만 실행된다. 

 

프로미스 이행 중 문제가 생기면 모든 과정(.then으로 이어진)을 무시하고 catch 가 실행된다.

.then(() => order(2000, () => console.log("주문하신 음료 나왔습니다.")))

.catch(() => console.log('customer left'))

 

 

4. finally 핸들러 

 

finally 핸들러는 프로미스의 resolve, reject 여부에 상관없이 모든 .then 과정이 끝난 후 실행된다. 

 

resolved

let is_store_open = true;

let order = (time, work) => {
    return new Promise((resolve, reject) => {
        if(is_store_open){
            setTimeout(() => {
                resolve(work());
            }, time);
        }
        else {
            reject(console.log('the store was closed'));
        }
    });
}

order(2000, () => console.log("주문받기 완료"))

.then(() => order(0000, () => console.log("주문전달 받았습니다. 만들기 시작합니다.")))

.then(() => order(2000, () => console.log("복숭아티 파우더 넣기 완료")))

.then(() => order(5000, () => console.log("따뜻한 물로 파우더 녹이기 완료")))

.then(() => order(3000, () => console.log("얼음 넣기 완료")))

.then(() => order(2000, () => console.log("물 넣기 완료")))

.then(() => order(0000, () => console.log("다 만들었습니다. 서빙해주세요.")))

.then(() => order(2000, () => console.log("주문하신 음료 나왔습니다.")))

.catch(() => console.log('customer left'))

.finally(() => console.log("프로미스 카페 입니다."));

 

 

rejected

let is_store_open = false;

let order = (time, work) => {
    return new Promise((resolve, reject) => {
        if(is_store_open){
            setTimeout(() => {
                resolve(work());
            }, time);
        }
        else {
            reject(console.log('the store was closed'));
        }
    });
}

order(2000, () => console.log("주문받기 완료"))

.then(() => order(0000, () => console.log("주문전달 받았습니다. 만들기 시작합니다.")))

.then(() => order(2000, () => console.log("복숭아티 파우더 넣기 완료")))

.then(() => order(5000, () => console.log("따뜻한 물로 파우더 녹이기 완료")))

.then(() => order(3000, () => console.log("얼음 넣기 완료")))

.then(() => order(2000, () => console.log("물 넣기 완료")))

.then(() => order(0000, () => console.log("다 만들었습니다. 서빙해주세요.")))

.then(() => order(2000, () => console.log("주문하신 음료 나왔습니다.")))

.catch(() => console.log('customer left'))

.finally(() => console.log("프로미스 카페 입니다."));

 

 

 

 

 

 

4.  Async / Await 사용하기

 

async / await vs promise 

 

async/await 과 promise 를 비교해보면 아래와 같다. 

 

 

 

 

 

 

async function 

 

await을 사용하기 위해서는 async function 선언을 해야한다. async function은 이 함수가 비동기 함수라는 것을 의미한다.

 

사용법은 간단하다. 그저 function 앞에 async 키워드를 붙어주면 된다.

async function example(){
  console.log(1);
}

 

await을 사용하지 않은 async 함수는 동기적으로 작동한다.

 

 

 

await 

 

await 은 오직 async 함수 안에서만 동작하며, 프로미스를 비동기적으로 제어할 때 사용하는 연산자이다. 

 

let promise1 = (value, time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(value))
    }, time);
  });
}

let async1 = async () => {
  await promise1(1, 1000);
  await promise1(2, 2000);
  await promise1(3, 3000);
}

async1();

 

1. await은 프로미스를 제어하는 키워드이기 때문에 먼저 프로미스를 return 하는 함수 promise1을 정의한다. 

2. async 함수를 선언하고 await을 통해 프로미스를 실행한다. 

 

 

1초 뒤, 1, 

2초 뒤, 2

3초 뒤, 3 이 찍히는 것을 확인할 수 있다. 

 

 

 

 

 

 

try, catch, finally 

 

try, catch는 resolve 됐을 때, reject 됐을 때를 나눠줄 수 있는 핸들러이다. 

finally 는 promise에서의 역할과 같다. 

 

resolve가 되었을 때는 try 구문이 실행되고, reject 되었을 때는 catch 구문이 실행된다. 

 

let promise1 = (value, time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(value))
    }, time);
  });
}

let async1 = async () => {
  try{
    await promise1(1, 1000);
  	await promise1(2, 2000);
  	await promise1(3, 3000);
  }
  catch(e){
    console.log("rejected!");
  }
  finally{
    console.log("finally");
  }
}

async1();

 

 

 

 

 

.then 핸들러 

 

프로미스에서 사용하였던 .then 핸들러 역시 async 함수 뒤에 사용할 수 있다.

async 함수는 항상 프로미스를 반환하기 때문에 Promise.then을 사용할 수 있는 것이다. 

 

함수 실행(프로미스 반환) + .then 키워드

let promise1 = (value, time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(value))
    }, time);
  });
}

let async1 = async () => {
  try{
    await promise1(1, 1000);
  	await promise1(2, 2000);
  	await promise1(3, 3000);
  }
  catch(e){
    console.log("rejected!");
  }
  finally{
    console.log("finally");
  }
}

async1().then(() => console.log("then!"));
async1();

 

 

.then과 마찬가지로 .catch, .finally 모두 사용할 수 있다. 

 

 

 

 

복숭아 아이스티 async / await 버전 

let is_shop_open = true;

let time = (ms) => {
    return new Promise((resolve, reject) => {
        if(is_shop_open){
            setTimeout(resolve, ms);
        } 
        else{
            reject(console.log("the store was closed"));
        }
    });
}

let kitchen = async () => {
    try{
        await time(2000);
        console.log("주문받기 완료");
    
        await time(0000);
        console.log("주문전달 받았습니다. 만들기 시작합니다.");
    
        await time(2000);
        console.log("복숭아티 파우더 넣기 완료");
    
        await time(5000);
        console.log("따뜻한 물로 파우더 녹이기 완료");
    
        await time(3000);
        console.log("얼음 넣기 완료");
    
        await time(2000);
        console.log("물 넣기 완료");
    
        await time(0000);
        console.log("다 만들었습니다. 서빙해주세요");
    
        await time(2000);
        console.log("주문하신 음료 나왔습니다.");   
    }
    catch(e){
        console.log("customer left", e);
    }
    finally{
        console.log("the store was closed");
    }
}

kitchen();

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고자료 

 

async function - JavaScript | MDN

Promise - JavaScript | MDN

[JS] 📚 자바스크립트 콜백 함수 💯 총정리