‘[Node.js] 자바스크립트 비동기 개념에 익숙해지기‘는 총 3편에 걸쳐서 콜백 함수, 프로미스, async await 구문을 소개할 예정입니다.
2편에서는 Promise 객체를 알아봅시다.
1. Promise 객체
Promise는 자바스크립트에서는 비동기 실행을 동기화하는 구문으로 사용합니다.2 Promise의 뜻인 약속을 떠올리면 프로미스 개념을 이해하기가 편합니다. 현실 세계에서 약속은 미래에 어떤 것을 할 거라고 정하는 겁니다. 약속은 이행, 불이행, 대기 3가지의 상태를 가질 수 있습니다.
자바스크립트에서는 ‘이 코드는 미래의 어느 시점에 실행할 거야’라고 약속하는 객체로 Promise 를 사용합니다. Promise는 각각 이행, 거절, 대기 세 가지 상태를 가질 수 있습니다. Promise는 객체이므로 new 연산자로 인스턴스를 생성할 수 있습니다.
▼ Promise 상태 변경
01 콜백으로 만든 회원 가입 예제를 프로미스로 변경하겠습니다.
▼ Promise 예제
const DB = [];
function saveDB(user) {
const oldDBSize = DB.length;
DB.push(user);
console.log(`save ${user.name} to DB`);
return new Promise((resolve, reject) => { // 콜백 대신 Promise 객체 반환
if (DB.length > oldDBSize) {
resolve(user); // 성공 시 유저 정보 반환
} else {
reject(new Error("Save DB Error!")); // ❶ 실패 시 에러 발생
}
});
}
function sendEmail(user) {
console.log(`email to ${user.email}`);
return new Promise((resolve) => { // Promise 객체를 반환. 실패 처리 없음
resolve(user);
});
}
function getResult(user) {
return new Promise((resolve, reject) => { // Promise 객체 반환
resolve(`success register ${user.name}`); // 성공 시 성공 메시지와 유저명 반환 });
}
function registerByPromise(user) {
// ❷ 비동기 호출이지만, 순서를 지켜서 실행
const result = saveDB(user).then(sendEmail).then(getResult);
// ❸ 아직 완료되지 않았으므로 지연(pending) 상태
console.log(result);
return result;
}
const myUser = { email: "andy@test.com", password: "1234", name: "andy" };
const result = registerByPromise(myUser);
// 결괏값이 Promise이므로 then() 메서드에 함수를 넣어서 결괏값을 볼 수 있음
result.then(console.log);
saveDB( ), sendEmail( ), getResult( ) 함수들에 추가한 콜백 함수가 Promise 객체로 바 뀌었습니다. Promise는 객체이므로 new로 생성할 수 있고 그 안에 resolve( ), reject( ) 함 수가 있으며 성공하면 resolve( )를, 실패하면 reject( )를 실행시켜줍니다. 또한 Promise 에는 then(Promise) 메서드가 있어서 비동기 호출이지만 promise1.then(promise2). then(promise3) 이런 식으로 순서대로 함수를 호출할 수 있습니다.
* Note: Promise 객체에만 then을 사용할 수 있습니다.
예를 들어 registerByPromise( ) 함수 내부에는 saveDB( ) 함수에 user를 넣는데 그 결과가 Promise입니다. 그러므로 then을 쓸 수 있습니다.
then( ) 함수의 사용법은 다음과 같습니다. 매개변수로 함수를 이행 또는 거절 시에 실행할 함수를 넣어주면 됩니다.
then(onFulfilled)
then(onFulfilled, onRejected)
then(
(value) => { /* fulfillment handler */ },
(reason) => { /* rejection handler */ },
)
❶ Promise 객체의 실행 결과로 실패를 주어야 하는 경우 reject( ) 함수를 사용합니다. 본문 코드 에서는 에러를 발생시켰습니다.
❷ saveDB( ) 함수가 Promise를 반환하고, sendEmail도 Promise를 반환하므로 다음과 같 이 saveDB(user) 함수 이후에 .then(sendEmail)처럼 연속 호출할 함수를 지정해줄 수 있 습니다. 그러면 saveDB( ) → sendEmail( ) 순서대로 실행됩니다. 또한 sendEmail의 결괏 값도 Promise이므로 saveDB(user).then(sendEmail).then(getResult) 이런 식으로 연 결이 가능합니다. Promise에서 발생하는 에러에는 .catch( )를 사용합니다. saveDB(user). then(sendEmail).then(getResult).catch(error => new Error(error))와 같이 연결하여 사용할 수 있습니다.
❸ console.log(result)의 실행 결과로 ‘Promise { <pending> }’이 출력되었습니다. const result = saveDB(user).then(sendEmail).then(getResult); 실행이 완료되지 않았는데 result 를 출력해버려서 그렇습니다. 그 덕분에 Promise가 아직 실행 중임을 알게 되었습니다.
마지막으로 registerByPromise( )의 결과는 어떤 타입일까요? registerByPromise( )에 서 then으로 연결한 마지막 함수가 getResult( )인데 이 함수도 Promise를 반환합니다. 즉 Promise 타입이므로 그냥 console.log로 출력을 하면 다시 ‘Promise { <pending> }’ 메시지 를 볼 수 있습니다.
02 제대로 동작하는지 테스트합니다.
$ node promise-test.js
save andy to DB
Promise { <pending> }
email to andy@test.com
success register andy
1.1 동시에 여러 Promise 객체 호출하기
동시에 여러 Promise 객체를 호출해 결괏값을 받고 싶을 때는 어떻게 할까요? Promise.all([ Promise1, Promise2, … PromiseN])처럼 쓰면 됩니다. 그러면 나열된 순서와 상관없이 다음 과 같이 동시에 실행됩니다. 결과는 배열로 반환됩니다.
01 다음과 같이 테스트 코드를 수정 및 추가합니다.
▼ Promiseall 테스트
// 이전 코드의 결과를 출력하지 않도록 주석 처리
// const result = registerByPromise(myUser);
// result.then(console.log);
// 기존 코드의 하단에 붙이면 됩니다.
const myUser = { email: "andy@test.com", password: "1234", name: "andy" };
allResult = Promise.all([saveDB(myUser), sendEmail(myUser), getResult(myUser)]);
allResult.then(console.log);
02 수정한 코드를 실행해봅니다(깃허브의 파일 저장소에는 수정한 파일을 promise-test2.js로 저장 해두었습니다).
$ node promise-test.js save andy to DB
email to andy@test.com [
{ email: 'andy@test.com', password: '1234', name: 'andy' },
{ email: 'andy@test.com', password: '1234', name: 'andy' },
'success register andy'
]
allResult.then(console.log)으로 Promise의 결괏값을 얻었습니다. 변수명이 이미 allResult인데 다시 then을 사용해 결괏값을 얻는 방식이 약간 어색하긴 합니다만, Promise의 사용법을 익히기 위함입니다. 이런 어색함들을 개선하기 위해 async await가 나왔습니다. async await는 5.4절 ‘async await 구문’에서 함께 살펴봅시다.
* Note: Ctrl + F5 , F5 로 실행 시 VSCode의 내장 디버그 콘솔에 결과 문자열이 나옵니다. 배열이나 객체를 프린트하면 생략해서 보여주고, 상세를 누르면 다음과 같이 디버거 설정이 없다고 나옵니다. 이렇게 나오는 원인은 해당 변수의 값은 디 버거가 가지고 있는데, 디버거가 먼저 종료되었기 때문입니다.
해결하는 방법으로 launch.json을 만드는 방법이 있습니다만, 실행 파일마다 설정을 추가해야 해서 추천드리지 않습니다. 예제 코드는 터미널에서 실행 시 책과 동일한 결과가 나오게 되니, 터미널에서 실행해주세요. VSCode에 내장된 터미널도 상관없습니다.
1.2 Promise 예외 처리하기
01 saveDB( ) 함수의 로직을 약간 변경하고 테스트를 해봅시다. 주석 처리했던 registerByPromise( ) 코드의 주석을 풀어주세요. 그리고 oldDBSize 코드를 다음과 같이 변경해주세요.
▼ Promiseall 테스트
function saveDB(user) {
const oldDBSize = DB.length + 1;
// ... 생략 ...
}
promise-test.js 파일을 구현하면서 saveDB( ) 함수의 Promise의 이행 조건으로 DB.length 가 oldDBSize보다 커야 한다고 명시했습니다. 그러므로 일부러 oldDBSize를 더 크게 해주면 Promise 로직이 실패합니다.
* Note: oldDBSize를 DB.length보다 큰 숫자로 변경해줘야 실패합니다. 다음의 코드를
oldDBSize를 DB.length보다 큰 숫자로 변경해줘야 실패합니다. 다음의 코드를
매우 큰 숫자로 변경하거나 DB.length + 1로 변경하면 됩니다.
const oldDBSize = DB.length + 1;
02 다음으로 registerByPromise( ) 함수에 catch 부분을 추가해줍시다.
▼ registerByPromise()에 catch 추가
function registerByPromise(user) {
const result = saveDB(user)
.then(sendEmail)
.then(getResult)
.catch(error => new Error(error))
console.log(result);
return result;
}
03 이제 node promise-test.js로 실행합니다.
그러면 다음과 같은 에러가 납니다.
$ node promise-test.js
save andy to DB
email to andy@test.com /Users/gyus/VSCode/jsbackend/chapter5/callback-promise-async-await/promise-test.js:13
reject(new Error("Save DB Error!"));
^
Error: Save DB Error!
at /Users/gyus/VSCode/jsbackend/chapter5/callback-promise-async-await/
promise-test.js:13:14
at new Promise (<anonymous>)
at saveDB
//... 생략 ...
Node.js v18.7.0
oldDBSize를 DB.length + 1로 변경했거나 매우 큰 숫자로 변경했다면, registerByPromise( ) 에서 에러가 날 겁니다. 이유는 DB.length값이 oldDBSize보다 커야만 resolve( )가 실행되 면서 성공하는데, DB.length값이 oldDBSize보다 작다면 reject( )가 실행되면서 실패하도록 Promise를 반환하는 함수를 작성했기 때문입니다.
에러가 난 부분을 특정하는 로그에 reject(new Error(“Save DB Error!”));라고 정확히 알려주고 있습니다.
▼ registerByPromise()에 finally 추가
// ... 생략 ...
function registerByPromise(user) {
const result = saveDB(user)
.then(sendEmail)
.then(getResult)
.catch(error => new Error(error))
// 성공, 실패 여부에 관계없이 실행
.finally(() => console.log("완료!"));
console.log(result);
return result;
// ... 생략 ...
finally( ) 메서드에 있는 console.log(“완료”) 프로미스의 성공, 실패 여부와 관계없이 실행됩니 다. 자원 회수 관련된 코드를 finally( )에 넣어두면 편리합니다.
1.3 프로미스의 문제점
자바스크립트에서 비동기 처리를 하는 데 사용하는 Promise 객체는 콜백보다는 확실히 편리합니다만, then( )과 catch( ) 함수를 연결하는 체이닝 방식을 사용하기가 만만하지는 않습니다. 거기에 더 복잡한 로직을 추가하고 예외 처리까지 해야 되는 상황이면 더욱 힘들어집니다.
이상적인 상황의 Promise 코드라면 다음과 같을 겁니다.
* 체이닝(Chaining): a( ).b( ).c( ).d( )와 같이 함수를 연결해서 계속 호출하는 방식을 말합니다.
▼ 이상적인 Promise 코드
function goodPromise(val) {
// ❶ Promise를 생성 후 반환
return new Promise((resolve, reject) => {
resolve(val);
});
}
goodPromise("세상에")
// ❷ Promise에서 resolve 이후에는 then 호출 가능
.then((val) => {
return val + " 이런";
})
.then((val) => {
return val + " 코드는";
})
.then((val) => {
return val + " 없습니다. ";
})
.then((val) => {
console.log(val);
})
.catch((err) => { // ❸ Promise에서 reject가 호출되었을 경우 실행
console.log(err);
});
$ node ideal-promise-code.js 세상에 이런 코드는 없습니다.
❶ goodPromise( ) 함수를 실행하면 Promise 객체를 생성 후 반환해줍니다. ❷ goodPromise (“세상에”)를 실행하면 resolve(val)에 “세상에”가 들어가고 결괏값으로 Promise를 반환해주므로 then() 함수를 다시 쓸 수 있습니다. 이런 식으로 계속 연결해 then을 쓸 수 있습니다. ❸ then() 으로 처리 중 예외가 발생한다면 console.log로 err를 찍고 종료합니다.
아쉽게도 이렇게 깔끔한 Promise 코드는 실전에서는 거의 없습니다. 실전에서는 더욱 복잡하고, 더욱 까다로운 로직을 수행해야 하는 경우가 많으므로 로직이 복잡해집니다.*
* 실무에는 기상천외한 코드가 많습니다. 물론 필요에 의해서지만 then 안에 콜백을 넣는다든지, Promise 안에 Promise를 중첩해서 넣는다 든지, catch를 여기저기서 하는 코드를 사용하는 경우도 있습니다. 이렇게 코드를 작성하면 어디서 에러가 났는지 찾기 어렵게 됩니다.
2. 복잡한 프로미스 예제
01 이제 node promise-test.js로 실행합니다.
조금 더 복잡한 예제를 다뤄보기 위해 영화 API를 호출해 영화 상위 20위까지 출력하는 코드를 작성하겠습니다. 예제를 실행하려면 axios라는 http 클라이언트 패키지가 필요합니다. axios 설치부터 진행하겠습니다. 참고로 예제 코드는 [chapter5/callback-promise-async-await] 디렉터리에 있으니 해당 디렉터리에서 axios를 설치해줍니다.
▼ axios설치
$ cd callback-promise-async-await $ npm install axios
* Note: Node.js 17.5 버전에는 브라우저에 있는 fetch API가 Node.js에도 들어갔습니다. Node.js를 실행할 때 –experimental-fetch 플래그를 붙여주면 됩니다. 다음과 같은 방식입니다.
node app.js --experimental-fetch
아직 fetch API는 실험 단계로 코드의 안정성이 보장되었다고 할 수는 없기에, 책에서는 fetch API를 사용하지 않습니다. 대신 HTTP 클라이언트 라이브러리로 가장 많이 사용하는 axios를 사용했습니다. Node.js에 들어간 fetch API는 undici4를 기반으로 하기에 해당 라이브러리를 참고하는 것도 좋습니다.
02 현재 상영 영화 순위를 20위까지 보여주는 코드를 구현합시다.
예외 처리, if문, for문도 들어 있는 코드입니다. 다음과 같은 로직으로 되어 있습니다.
▼ 현재 상영 영화 순위를 20위까지 프로미스를 사용해 확인하기
const axios = require("axios"); // axios 임포트
// 1 영화순위정보URL
const url = "https://raw.githubusercontent.com/wapj/musthavenodejs/main/movieinfo.json";
axios
.get(url) // 2 GET 요청
.then((result) => { // 결괏값 처리
if (result.status != 200) {
throw new Error("요청에 실패했습니다!"); // 상태가 200이 아니면 에러
}
if (result.data) { // 3 result.data가 있으면 결과를 반환
return result.data;
}
throw new Error("데이터 없습니다."); // data가 없으면 에러
})
.then((data) => { // 4 에서는 3 에서 받은 데이터 처리
if (!data.articleList || data.articleList.size == 0) { // 5 크기가 0이면 에러
throw new Error("데이터가 없습니다.");
}
return data.articleList; // 6 영화 리스트 반환
})
.then((articles) => {
return articles.map((article, idx) => { // 7 영화 리스트를 제목과 순위 정보로 분리
return { title: article.title, rank: idx + 1 };
});
})
.then((results) => {
for (let movieInfo of results) { // 받은 영화 리스트 정보 출력
console.log(`[${movieInfo.rank}위] ${movieInfo.title}`);
}
})
.catch((err) => { // 8 중간에 발생한 에러들을 여기서 처리
console.log("<<에러발생>>");
console.log(err);
});
❶ 영화 순위 정보 URL입니다. ❷에서는 ❶에 있는 정보로 GET 요청을 보냅니다. ❸ 결과가 있으면 반환해줍니다. ❹에서는 ❸에서 받은 데이터를 처리합니다. 데이터에는 articleList가 있고 영화가 순위대로 리스트 안에 들어 있습니다. ❺ 받은 데이터 크기가 0이면 보여줄 데이터가 없는 것이므로 에러입니다. ❻ 영화 리스트를 반환합니다. 반환한 데이터는 다음 then( ) 함수에서 처리합니다. ❼ HTTP 요청으로 받은 데이터를 보기 편하게 가공을 해야합니다. 제목과 순위 정보만 분리해서 다시 리스트로 저장합니다. ❽ 중간 과정에서 에러가 발생했다면여기서 처리합니다.
* Note: 현실에서 영화 순위는 시시각각 변동되지만, 학습을 위해서 고정된 값을 특정 URL에 저장 해두었습니다.
03 예제 코드를 실행하겠습니다.
$ node top20-movie-async-await.js [1위] 처음부터 잘했으면 얼마나 좋니 [2위] <본즈 앤 올> 궁지로 내몰린 10대를 보는 시선 [3위] 경이로운 생生의 의지로 창조해낸 '페르시아어' ... 생략 ... [18위] <오늘 밤, 세계에서 이 사랑이 사라진다 해도> 리뷰 [19위] <더 메뉴> 180만 원짜리 먹으러 와서 사레 걸린기분 [20위] 닭장을 나온 백호
2.1 문제점 및 대안 찾기
프로미스가 콜백보다는 깔끔한 코드를 유지할 수 있지만, 잘못 사용될 수 있는 여지가 남아 있습니다. 첫 번째 예로는 프로미스의 then( ) 함수에 성공 시와 실패 시 처리할 함수를 둘 다 넘기는 경우를 들 수 있습니다. 이렇게 둘 다 넘기면 프로미스는 장식에 불과하며 기존의 콜백 함수에 결과와 에러를 동시에 넘기는 myWork(function(result, error)) 형태와 다를 바가 없습니다. 좋은 방법은 catch( ) 함수로 예외 처리를 하는 겁니다.
function myWork(work) {
return new Promise((resolve, reject) => {
if (work === 'done') {
resolve('게임 가능');
} else {
reject(new Error("게임 불가능"));
}
})
}
myWork('done').then(function (value) { console.log(value) }, function (err) { console.error(err) });
myWork('doing')
.then(function (value) { console.log(value) })
.catch(function (err) { console.error(err) });
}
❶의 코드는 프로미스를 사용하긴 했지만, 콜백 방식에서 사용하던 습관이 그대로 들어있습니다. 이런 식으로 then()을 사용하면 에러가 나는 경우 확인해야 할 곳이 많아집니다. ❷에서는 catch( ) 구문에 에러 처리를 하였습니다. then( )에서는 프로미스가 이행되는 경우만 처리합니다.
두 번째 예로는 프로미스를 중첩해서 사용하는 경우입니다. 콜백에는 익숙한데 프로미스에 익숙하지 않은 때 이런 실수를 할 수 있습니다. 코드로 살펴보겠습니다.
function myWork(work) {
return new Promise((resolve, reject) => {
resolve(work.toUpperCase())
})
}
function playGame(work) {
return new Promise((resolve, reject) => {
if (work === 'DONE') {
resolve('GO PLAY GAME');
} else {
reject(new Error("DON'T"));
}
})
}
// ❶ 프로미스를 중첩해서 사용
myWork('done')
.then(function (result) {
playGame(result).then(function (val) {
console.log(val);
});
})
// ❷ 결과를 then으로 넘김
myWork('done')
.then(playGame)
.then(console.log)
❶의 코드에서 프로미스를 중첩해서 사용했습니다. 콜백 사용 시 가독성이 안 좋아지는 문제 때문 에 프로미스를 사용하는데 이것은 콜백보다 가독성이 더 나쁩니다. ❷ 프로미스는 resolve( )의 실 행 결과를 then( )으로 넘길 수 있습니다. 이런 점을 이용해 playGame의 결과를 then( )으로 받 아서 console.log( )를 실행하면 됩니다. 이전보다 훨씬 깔끔한 로직이 되었습니다.
조금 더 좋은 방법이 없을까요? 있습니다! 자바스크립트가 발전하면서 사용하기 까다로운 Promise를 사용이 간편한 async await로 발전시켰습니다.
async await를 사용하면 동기 방식의 코드처럼 코드를 작성하면서 비동기 코드를 순서대로 실행 할 수 있습니다. 3편에서는 async await를 문법을 알아보고 영화 랭킹 코드를 async await로 변경 해봅니다.
1 Comment