비동기 처리를 위한 Promise

Promise 란?

Javascript는 기본적으로 동기(Synchronous) 로 실행된다.

동기 실행이란 쉽게 말해서 한 줄 한 줄 읽어나가며 실행시킨다는 의미이며, 현재의 코드가 실행을 완료해야 다음의 코드가 실행이 된다. 기본적으로 자바스크립트는 단일 스레드에 의해 실행되며 인터프리터 언어라 위와 같이 동기 방식의 프로그래밍 언어이다.

하지만 Promise는 이러한 Javascript를 비동기 방식으로 실행시킨다. 흔히 Ajax 통신과 비슷하다고 보면 된다. Ajax 통신과 마찬가지로 클라이언트에서 서버가 응답했을 때의 처리를 사전에 정의해두면, 서버가 응답했을 때 정의한 코드가 자동으로 실행되듯, Promise는 쉽게 얘기해서 일종의 약속과 같이 ‘A라는 것이 끝나면 B를 실행시킬거야’와 같이 사전에 전/후에 대한 처리를 정의해놓는 개념이다. 이전에는 Q와 같은 라이브러리를 통해 Promise 패턴을 구현했으나, 현재는 ECMA 6 스펙에 정식으로 포함되었다.

Promise 를 사용하는 이유

ECMA Script 를 알기 이전에는 사실 Ajax 통신과 같은 비동기 처리를 callback 함수를 이용하여 처리하였다. 그러다보니 사실 callback 지옥에 빠지는 경우도 많았고, 코드를 이해하기도 쉽지 않았다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let count = 1;

let foo1 = (params, callback) => {
callback(params+1);
}
let foo2 = (params, callback) => {
callback(params+2);
}
let foo3 = (params, callback) => {
callback(params+3);
}

foo1(count, function(count){
foo2(count, function(count) {
foo3( count, function(count){
console.log(count)
})
})
})

위의 코드와 같이 count 변수 및 foo[n] 함수를 선언하여 각 함수 별로 +1, +2, +3 으로 증감시키는 기능을 구현했다.

현재 이커머스회사에서 frontend 개발자로 업무를 진행하고 있는 Martin 입니다. 글을 읽으시고 궁금한 점은 댓글 혹은 메일(hoons0131@gmail.com)로 연락해주시면 빠른 회신 드리도록 하겠습니다. 이 외에도 네트워킹에 대해서는 언제나 환영입니다.:Martin(https://github.com/martinYounghoonKim
Javascript Array 타입 Methods
Javascript에 날개를 날아줘!