Promise와 async/await

breakfast_wu·2022년 3월 29일

📌 들어가며

이전 글에서 살펴봤듯 자바스크립트는 싱글 스레드로 동작하는 언어로서 한번에 하나의 작업만 수행할 수 있다.
이를 해결하기 위해 자바스크립트의 런타임 환경의 도움을 받아 비동기 작업을 수행함으로써
싱글스레드-논블로킹 모델을 구현할 수 있게 되었다.
이제부터 런타임 환경이 어떻게 비동기를 처리하는지 알아보자.

1. 콜백 함수 (callback function)

콜백 함수는 말 그대로 나중에 호출되는 함수다. 노드는 이벤트 기반(event-driven) 방식으로 동작하기 때문에, 이벤트가 발생하면 이벤트 리스너에 등록해둔 콜백 함수를 호출한다. 해당 동작이 완료될 때 까지 직접 기다릴 필요 없이 동작을 실행시켜 놓고, 완료됐을 때 결과를 받는 형식이다.호출된 콜백 함수는 libuv의 event queue로 넘어가고 이벤트 루프, 콜백 큐를 거쳐 최종 응답을 한다.

콜백 지옥 (callback hell)

단순한 콜백 처리라면 문제가 없겠지만, 실제 코드를 작성할 때 실행 순서를 신경 써야하는 상황이 대부분이다.
이럴때 마다 콜백이 중첩된다면 코드의 깊이가 계속해서 깊어지는 참사가 발생한다.
다음 코드를 보자. [코드 출처]

function 학생정보_조회(학생_학번, callback1) {
    ajax(
        baseUrl + "student-info/" + 학생_학번, function (response) {
        callback1(response);
    });
}

function 고교주소_조회(고교명, callback2) {
    ajax(
        baseUrl + "highschoolDB/" + 고교명, function (response) {
        callback2(response);
    });
}

function 고교_수업_조회(고교_DB_주소, callback3) {
    ajax(
        baseUrl + "classes/" + 고교_DB_주소, function (response) {
        callback3(response);
    });
}

function 수업_정보_조회(고3_수학수업_코드, callback4) {
    ajax(
        baseUrl + "class-info/" + 고3_수학수업_코드, function (response) {
        callback4(response);
    });
}


function 고3_수학교사_찾기(학생_학번) {
    학생정보_조회(학생_학번, 
        function(학생정보) {
            let 학생주민번호 = 학생정보["주민번호"];
            let 고교명 = 학생정보["고등학교명"];
            고교주소_조회(고교명, 
                function(고교_DB_주소) {
                    고교_수업_조회(고교_DB_주소, 학생주민번호, 
                        function(과목알람) {
                            let 고3_수학수업_코드 = 과목알람["고3수학"];
                            수업_정보_조회(고3_수학수업_코드, 
                                function(수업정보) {
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> console.log(`담당교사: ${수업정보["교사명"]}`);
                                }
                            )
                        }
                    )
                }
            )
        }
    )
}

고3_수학교사_찾기(123456);

학생의 학번으로 고3 시절 수학교사를 찾는 코드이다.
저 말도 안되는 코드의 깊이를 각자 뜯어보며 감상해보자.
이렇게 콜백이 중첩될 때 마다 코드가 안으로 들어가게 되고,
이는 코드의 가독성을 해칠 뿐 아니라 디버깅 작업 또한 지옥이 되어버린다.

2. Promise

콜백 지옥에서 벗어나기 위해 ES6부터 도입된 객체로, 자바스크립트와 노드의 API들이 콜백 대신 프로미스 기반으로 재구성 되었다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 미래의 어떤 시점에 결과를 제공하겠다는 "약속(프로미스)"를 반환하는 것이다. 그리고 이 약속은 then 을 통해 받는다.

function 학생정보_조회_Promise(학생_학번) {
    return new Promise((resolve, reject) => {
        ajax(
            baseUrl + "student-info/" + 학생_학번, function (response) {
            resolve(response);
        });
    })
}

function 고교주소_조회_Promise(학생주민번호, 고교명) {
    return new Promise((resolve, reject) => {
        ajax(
            baseUrl + "highschoolDB/" + 고교명, function (response) {
            resolve([학생주민번호,response]);
        });
    })
}

function 고교_수업_조회_Promise(학생주민번호, 고교_DB_주소) {
    return new Promise((resolve, reject) => {
        ajax(
            baseUrl + "classes/" + 고교_DB_주소 + "/" + 학생주민번호, function (response) {
            resolve(response);
        });
    })
}

function 수업_정보_조회_Promise(고3_수학수업_코드) {
    return new Promise((resolve, reject) => {
        ajax(
            baseUrl + "class-info/" + 고3_수학수업_코드, function (response) {
            resolve(response);
        });
    })
}

학생정보_조회_Promise(123456)
    .then(학생정보 => {
        let 학생주민번호 = 학생정보["주민번호"];
        let 고교명 = 학생정보["고등학교명"];
        return 고교주소_조회_Promise(학생주민번호, 고교명);
    })
    .then(학생주민번호_고교DB주소 => {
        return 고교_수업_조회_Promise(학생주민번호_고교DB주소[0], 학생주민번호_고교DB주소[1]);
    })
    .then(수강과목알람 => {
        let 고3_수학수업_코드 = 과목알람["고3수학"];
        return 수업_정보_조회_Promise(고3_수학수업_코드);
    })
    .then(수업정보 => {
        console.log(`담당교사: ${수업정보["교사명"]}`);
    })

프로미스를 반환하도록 하여, then 메서드의 체이닝을 통해 좀 더 깔끔하 코드를 만들 수 있게 되었다.
프로미스 내부에서 resolve가 호출되면 then이 실행되고, reject가 호출되면 catch가 실행된다.
하지만 아직도 일련의 종속적인 작업들이 하나의 프로미스 체인에 묶여있다.

3. async/await

async/await를 사용하면 비동기 함수를 마치 동기적인 코드인 것 처럼 동작하도록 구현할 수 있다.

function 학생정보_조회_Promise(학생_학번) {
    return new Promise((resolve, reject) => {
        ajax(
            baseUrl + "student-info/" + 학생_학번, function (response) {
            resolve(response);
        });
    })
}

function 고교주소_조회_Promise(학생주민번호, 고교명) {
    return new Promise((resolve, reject) => {
        ajax(
            baseUrl + "highschoolDB/" + 고교명, function (response) {
            resolve([학생주민번호,response]);
        });
    })
}

function 고교_수업_조회_Promise(학생주민번호, 고교_DB_주소) {
    return new Promise((resolve, reject) => {
        ajax(
            baseUrl + "classes/" + 고교_DB_주소 + "/" + 학생주민번호, function (response) {
            resolve(response);
        });
    })
}

function 수업_정보_조회_Promise(고3_수학수업_코드) {
    return new Promise((resolve, reject) => {
        ajax(
            baseUrl + "class-info/" + 고3_수학수업_코드, function (response) {
            resolve(response);
        });
    })
}

async function 고3_수학교사_찾기(학생_학번) {
    let 학생정보 = await 학생정보_조회_Promise(학생_학번);
    let 고교_DB_주소 = await 고교주소_조회_Promise(학생정보["주민번호"], 학생정보["고등학교명"]);
    let 수강과목알람 = await 고교_수업_조회_Promise(학생정보["주민번호"], 고교_DB_주소);
    let 수업정보 = await 수업_정보_조회_Promise(수강과목알람["고3수학"]);
    console.log(`담당교사: ${수업정보["교사명"]}`);
}

놀라울 정도로 코드가 짧아졌다.
함수에 async 키워드를 붙이면 자동으로 Promise를 리턴하는 함수로 만들어준다.
그리고 await을 붙이면 해당 프로미스가 resolve 될 때 까지 기다렸다가 결과를 받으면 다음 로직으로 넘어간다.
즉, Promise 객체의 then 결과를 바로 받는 것이다.

async가 붙은 함수는 프로미스를 반환하고, 프로미스가 아닌 것은 프로미스로 감싸 반환한다.
await 키워드를 만나면 프로미스가 처리될 때 까지 기다린다.
await 키워드는 async가 붙은 함수 안에서만 사용 가능하다. ( Promise.then( ) 을 합쳐놓은 놈이라고 봐도 된다. )

async/await 을 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요하지 않다.
또한 promise.catch 대신 try/catch를 사용할 수 있게 된다.

async 최적화

🚀 각 비동기 작업이 실행 순서에 영향을 준다면 await을 통해 기다리는 것이 합당하지만 순서와 관계없는, 동시에 처리될 수 있는 작업이라면 최대한 동시에 실행 될 수 있도록 해야한다.

function delay(){
	return new Promise( (resolve, reject) => {
		setTimeout(() => resolve(), 1000);
	})
}

async function getApple(){
	await delay(); // 1초 딜레이 주기
	return "apple";
}

async function getBanana(){
	await delay(); // 1초 딜레이 주기
	return "banana";
}

async function getFruites(){
	let getApplePromise = getApple(); // async함수를 실행시킨다. 논블록킹으로 백단에서 실행되게 된다.
	let getBananaPromise = getBanana(); // 리턴으로 프로미스 객체로 감싸진 결과값을 받는다.
	
  	let a = await getApplePromise; // 리턴으로 받은 프로미스객체를 done(data)를 await으로 빼서 변수에 넣음
	let b = await getBananaPromise;

	console.log(`${a} and ${b}`);
}

getFruites(); // 결과 : apple and banana

getApple과 getBanana는 서로 영향을 주지 않는 관계이다.
따라서 두 함수를 논 블로킹 방식으로 호출하고 각각의 함수는 프로미스를 반환한다. (pending 상태)
그리고 결과는 await 키워드를 통해 아래쪽에서 받는다.
이렇게 병렬적으로 처리한다면 await getApple(), await getBanana() 를 했을 때 보다 훨씬 더
성능 좋은 코드를 작성할 수 있다.

출처: https://inpa.tistory.com/entry/JS-📚-비동기처리-async-await [👨‍💻 Dev Scroll]

정리

Node.js는 V8엔진 기반으로 동작하며 내부의 Event Loop는 Single-Thread 기반에서 비동기 작업을 처리한다.
이러한 이벤트 루프는 고성능의 병렬처리를 보장하도록 설계되어 있다. 따라서 이벤트에 의해 처리해야 할 단위 작업이
아주 짧은 시간 안에 처리된다면 Node.js의 장점을 극대화 할 수 있다.

그렇기 때문에 Node 애플리케이션은 가능한 한 전부 비동기로 처리해야 하며 동시에 처리될 수 있는 I/O 작업이라도
논 블로킹 방식으로 코딩하지 않으면 의미가 퇴색된다. 따라서 동시처리가 가능한 작업은 최대한 묶어서 해결할 수 있도록 코딩하는 습관을 들여야 한다.

[참고자료]

breakfast_wu

이전 포스트