자바스크립트 심화(12) promise 기본 사용법

최근 프로그레시브 웹이 들불처럼 번지고 있다. 프로그레시브 웹은 인터넷 연결이 끊어진 상태에서도 여전히 사용자의 데이터가 저장되고 앱이 그대로 작동한다. 어떻게 이런 일이 가능할까? 

"서비스 워커"

과거와 달리 웹 브라우저의 기능이 좋아지면 자체 DB를 활용할 수 있고, 기본적인 CRUD(쓰고, 저장하고, 변경하고, 지우는)가 가능하다. 그리고 자바스크립트는 비동기적인 방식(일단 작업하다가 나중에 연결되면 호출)으로 작업하는 데에 유리하다. 그래서 자체 기능이 많은 구글이나 페이스북과 같은 업체도 점차 프로그레시브 웹앱을 늘려나가는 추세다. 

프로그레시브 개발 방식을 활용하려면 'promise'에 대한 이해가 반드시 필요하다. promise는 자바스크립트의 콜벡함수를 대신하는 ES2015의 새로운 문법이다. 

1 『프로미스 기본 사용법』

function test1(callback){        setTimeout(function(){              callback()      },1000);  }  test1(function(){      console.log('test1');       test1(function(){          console.log('test2');      })  });

test1 함수에서 콜벡 함수에 집중해보자. test1함수를 실행하면, setTimeout()함수가 실행되면서 인자로 받는 콜벡함수가 1초 후에 자동으로 실행된다. callback이란 인수자리에 들어온 익명함수에서 다시 test1함수를 재귀(반복)시키면 1초 뒤에 새로운 익명함수(test2)가 실행된다. 

재귀방식으로 계속 콜벡함수를 실행시키면 test1()내부의 setTimeout()함수에서 설정한 1초 후 실행방식이 지속적으로 유지된다. 하지만 콜벡함수가 많아질수록 코드가 복잡해진다. 이를 콜벡지옥이라 부른다. 그리고 콜벡지옥을 벗어나기 위한 방법으로 promise가 등장했다.

var promise = new Promise(function(resolve,reject){      //①     setTimeout(function(){             let name = prompt('이름을 입력하세요');             resolve(name);   //②      },2000)   });   promise.then(function(nam){    //③        console.log("안녕하세요"+nam+"님!");     })

①에서 new Promise객체를 생성한다. promise의 파라미터 값으로 resolve와 reject를 넣어준다. resolve와 reject 기능은 프로미스에 정의돼 있다. resolve()인자를 실행하면, promise객체의 then메서드의 내용이 실행되고, reject()인자를 실행하면 promise객체의 catch메서드 내용이 실행된다. 

위에서 주목해야 할 부분은 ②이다. resolve()의 파라미터 값에 특정값을 넣으면 then메서드의 인자값으로 전달된다. ③을 보면, 익명함수의 인자값에 프로미스 객체 내부의 name 값이 그대로 nam에 전달되었음을 알 수 있다.

2 프로미스 :: 『catch구문』

let promise = new Promise(function(resolve,reject){     let num = prompt('5 이상의 숫자를 입력하세요');         if(num >=5){    //①             resolve(num);        }else{                         // ②            reject(`오류:${num}은 5미만 값입니다`);        }  });    promise.then(function(num){        console.log('입력한 숫자값은?'+ num+'입니다');   }).catch(function(err){            //③         console.log(err)    })

프로미스 객체를 만들 때, 조건문①을 넣었다. 숫자가 5이상이면 resolve()가 실행되고, num값이 then()메서드에 전달된다. 만일 숫자가 5보다 작다면② reject()가 실행되고, 인자는 ES2015문법의 `${}`양식으로 전달한다. reject()값은 .catch()메서드로 전달된다.

위의 코드는 아래와 같이 then의 인자값의 마지막에 reject()함수를 넣어서, 한번에 then과 catch를 정의할 수 있다.

let promise = new Promise(function(resolve,reject){     let num = prompt('5 이상의 숫자를 입력하세요');         if(num >=5){             resolve(num);        }else{            reject(`오류:${num}은 5미만 값입니다`);        }  });    promise.then(function(num){        console.log('입력한 숫자값은?'+ num+'입니다');   }, function(err){        console.log(err); })

다음 포스팅에서는 프로미스를 활용한 병렬처리와 비동기 방식을 알아보자.