개요.
●Callback과 Promise 패턴을 이야기 앞서 동기식과 비동기식 프로그래밍을 소개하겠습니다.
1. 동기식 프로그래밍 vs 비동기식 프로그래밍
1-1) 동기식 프로그래밍
● 어떤 작업을 요청한 후 그 작업이 완료되기까지 기다렸다가 응답을 받아 처리하는 것을 말합니다.
<예제 코드>
<예제 결과>
| 동기식 프로그래밍 |
| function addition(x){ return x+x; } var num = addition(2); console.log(num); //4 |
* 순차적으로 해당 덧셈작업이 완료되기 까지 기다렸다가 결과 값을 보여주게 됩니다.
1-2) 비동기식 프로그래밍
● 어떤 작업을 요청한 후 다른 작업을 수행하다가 이벤트가 발생하면 그에 대한 응답을 받아 처리하는 것을 말합니다.
<예제 코드>
<예제 결과>
| 비동기식 프로그래밍 |
|
function addition(x, callback){
|
* setTimeout은 비동기를 표현하기 위해 사용하였습니다.
* 0.1초 후 callback 함수가 실행되는 코드입니다.
해당 코드를 동기식으로 바라보면, console.log에는 4라는 결과 값이 출력되어야 하지만, 결과는 0이 됩니다.
그 이유로 console.log로 0으로 초기화된 num 값을 먼저 출력하고, 0.1초가 지난 뒤, 콜백함수 안에 num = x로 num 값이 저장됩니다.
2. Callback 패턴 이란?
2-1) 개념
● 자바스크립트 코드의 실행환경은 싱글쓰레드 기반으로 동작하고, 동기적인 코드를 사용할 때 블록킹(blocking) 현상이 발생합니다.
이러한 현상을 방지하기 위해 비동기식 프로그래밍을 사용하게 됩니다.
● 비동기식 프로그래밍을 하기 위해 Callback 패턴을 이용하게 되는데, 콜백(Callback)이란 옵저버(Observer) 디자인 패턴에서 나온 개념으로
객체의 상태 변화(이벤트)가 발생하였을 경우에 이러한 사실을 함수를 통해 전달하는 것을 의미합니다.
3. Callback 패턴의 문제점
3-1) Callback Hell
● 자바스크립트에서 비동기 식으로 개발을 하다 보면, Callback 함수로 인해 코드의 복잡성이 증가하고 가독성이 떨어지는 경우가 종종 생기게 됩니다.
이를, Callback Hell이라고 부릅니다.
3-2) Callback Hell 예제
<예제 코드>
<예제 결과>
| Callback Hell |
| function addition(x, callback) { setTimeout(callback, 100, x+x); } addition(2, function(x) { addition(x, function(x2) { addition(x2, function(x3) { console.log(x3); //16 }); }); }); |
* Callback Hell을 설명해 드리기 위해 addition 함수를 3번 사용한 간단한 Callback Hell 예제입니다.
addition 함수를 비동기로 처리하면서 콜백 안에 콜백을 계속 무는 형식으로 코딩이 되, 이러한 코드 구조는 가독성을 떨어트리고 로직을 변경하기 어렵습니다.
4. Promise 패턴
4-1) promise란
● callback 함수의 문제를 해결하기 위해 사용하게 됩니다. 그 이유로 Promise의 3가지 states로 Promise의 처리 과정을 소개하겠습니다.
① pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
② fulfilled(이행) : 비동기 처리가 완료되어 Promise가 결과 값을 반환해준 상태
③ rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
* 다음과 같은 3가지 상태를 이용해 비동기 작업을 순차적으로 진행하거나, 병렬로 진행하는 등의 컨트롤이 보다 수해지고 코드의 가독성이 좋아지며,
내부적으로 예외처리에 대한 구조가 탄탄해져 오류가 발생했을 때 오류 처리 등에 대해 보다 가시적으로 관리해 줄 수 있는 장점이 있습니다.
4-2) promise 예제
<예제 코드>
<예제 결과>
| promise |
|
var addition = function(flag, num) {
// resolve()의 결과 값 num를 result 받음 |
* addition 함수에 new Promise() 메소드를 호출하여 Pending(대기) 상태가 되며, Promise의 인자인 resolve를 실행하면 Fulfilled(이행) 상태가 됩니다.
그리고 .then()을 이용하여 처리 결과 값을 받을 수 있습니다.
* 반대로, Promise의 인자인 reject를 실행하면 Rejected(실패) 상태가 되며, 실패 처리의 결과 값을 .catch()로 받을 수 있습니다.
4-3) Promise API 소개
● Promise API 세 종류 소개하겠습니다.
① Constructor
- new 연산자를 선언하여 Promise 인스턴스 객체를 생성해 사용한다.
var promise = new Promise(function(resolve, reject) {
// 비동기 처리 작성
// 처리가 끝나면 두 가지 인자를 호출하여 사용할 수 있습니다.
// 1) resolve: 해당 인자로 resolve() 메소드를 실행하면 Fulfilled(이행) 상태가 됩니다.
// 2) reject: 해당 인자로 reject() 메소드를 실행하면 Rejected(실패) 상태가 됩니다.
})
② Instance Method
- new 연산자로 생성한 Promise의 인스턴스 객체에는 성공(resolve) 또는 실패(reject)했을 때 호출될 콜백 함수를 등록하는
promise.then(onFulfilled, onRejected)이라고 하는 인스턴스의 메소드가 있습니다.
- 만약 오류만 처리하려면 promise.catch(onRejected)를 사용하면 됩니다.
③ Static Method
- 전역 객체인 Promise에는 Promise.all()이나 Promise.resolve() 같은 정적 메소드가 있으며, 이 메소드는 Promise를 다루는 데 필요한 보조 메드입니다.
5. 여러 개의 Promise 연결하기 (Promise Chaining)
● then과 catch를 이용하여 여러개의 비동기 동작을 연결 할 수 있습니다.
5-1) Promise Chaining 예제
<예제 코드>
<예제 결과>
| Promise Chaining |
| var addition = function (flag, num) { return new Promise(function (resolve, reject) { if (flag) { resolve(num+num); } else { reject("실패"); } }); }; addition(true, 2) // addition1 .then(function (num) { console.log("First Success : " + num); return addition(true, num); // addition2 }) .then(function (num) { console.log("Second Success : " + num); return addition(false, num); // addition3 }) .catch(function (e) { console.log("First Fail : " + e); return addition(true, 0); // additionFail1 }) .then(function (num) { console.log("Third Success : " + num); return addition(true, num); // addition4 }) .catch(function (e) { console.log("Second Fail : " + e); // additionFail2 }) .then(function (num) { console.log("Complete : " + num); //complete }); |
* 초록색 선은 resolve 되었을 때, 빨간색 선은 reject 되었을 때, 보라색 선은 addition4에서 reject 되었을 경우의 흐름을 나타냅니다.
* 이상 3탄에서는 동기와 비동기식 프로그래밍, Callback과 Promise 패턴의 간단한 개념을 소개했습니다.
다음 마지막 4탄에서는 Node.js에서 커넥션풀(Connection Pool)을 이용해 CUBRID와 연동하는 방법을 소개하겠습니다.
