기본 콘텐츠로 건너뛰기

[node.js] promise와 async비교 - 1

비동기의 특성을 가진 javascript에서 이런 문제점을 해결하기위해 promise패턴과 혹은 async모듈을 사용한다.

그럼 이둘의 차이점은 무엇일까??

우선 이름에서부터 차이가 존재한다 promise는 패턴이라는 수식어가 붙고 async는 모듈이라는 수식어가 붙는다.
이 둘이 어떤 차이가 있을까???

우선 간단하게 확인하는 방법으로는 웹브라우저의 개발자 도구를 이용하는 방법이다.











Promise를 입력하면 function이라고 뜬다. 그러나 async는 정의가 되지 않았다고 뜬다.

node에서도 마찬가지이다. Promise는 바로 사용이 가능하지만 async는 모듈을 require해야만 사용할 수 있다.

이러한 이유가 발생하는 이유는 async는 비동기를 처리를 하는 프레임워크이다 이러한 비동기적인 문제를 해결하기 위해 만들어진 큰 모듈이다. 하지만 Promise는 단순한 패턴이다. 

그렇기 때문에 노드에서 async를 사용하기 위해서는 

$ npm install async -g
모듈을 설치를 해주고 require하면 된다.

이 두경우 중에 개인적으로는 async가 먼가 더 정감이 가는건 사실이다.


이유는 promise같은 경우는 Promise를 new통해 생성해내야 한다. 해당 객체를 then으로 이어지는 방식이라 쓸때마다 new Promise를 해야하는 귀차니즘이 존재한다 그에반면에 async는 모듈 호출과 동시에 즉각적으로 쓸수있다.

promise이용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var _promise = function (param) {
    return new Promise(function (resolve, reject) {
            if (param) {
                resolve("pass");
            }
            else {
                reject(Error("eeeeeerrrrrooooorrrr"));
            }
    });
};
//Promise 실행
_promise(true)
.then(function (text) {
    // 성공시
    console.log('success');
    console.log(text);
    return text;
}, function (error) {
    // 실패시
    console.log('error');
    console.error(error);
}).then(function (text) {
    // 성공시
    console.log('success');
    console.log(text);
}, function (error) {
    // 실패시
    console.log('error');
    console.error(error);
});
cs

async이용
1
2
3
4
5
6
7
8
9
10
11
12
13
async.waterfall([
    function(cb){
        console.log('test')
        cb('a', 'data'); // 첫번째 인자에 따라 다음 함수가 실행될지 않될지 결정 됨
    },
    function(d, cb){
        console.log('test1', d)
        // console.log(cb)
        cb();
    }
],function(err){
    console.log('test3',err)
})
cs

위 둘의 작동방식은 거의 비슷하다.(약간의 차이점이 존재한다. 에러를 처리하는 방식, 에러인자를 넘기는 방식, task를 받는방식 등 )

우선 가장 큰 차이점은 코드의 흐름이 완전히 분리되냐 그렇지 않냐의 차이가 있다. promise같은 경우는 then으로 이전의 처리를 콜백인자로 전해받지만, async는 처리할 부분이 리스트로 들어가 있다. 

promise도 all인자를 쓰면 호출될 function들을 async처럼 리스트로 받을 수 있다. 이럴경우 각각의 함수의 return값을 promise의 콜백으로 받게 된다. 이경우 async의 parallel와 비슷한 역할을 하게된다. 만약에 하나라도 reject가 발생할 경우 콜백함수의 error인자를 받게되어 error처리를 해주면 된다. 순서에 상관없이 동시에 실행되어도 문제가 없을떄 promise.all 또는 async.parallel을 사용하면 좀더 빠른속도로 처리가 가능하다.

두 코드다 중간에 에러가 발생하면 그 다음으로 더이상 지나가지 않고 에러 코드를 호출을 하게된다. 그리고 해당 async구문과 promise구문을 탈출을 하게된다.

promise가 하나하나의 처리구문마다 error function을 구현이 가능하기 때문에 좀더 견고한 코드를 짤 수 있을것 같지만 async는 가볍게 쓸수 있는 장점이 있는것 같다. 그때그떄 상황에 맞춰서 짜면 될것같다..

댓글

이 블로그의 인기 게시물

[javascript] 자스민(Jasmine)을 이용하여 TDD 작성후 웹 페이지에 적용해보자.

 다음 코드는  멍개의 코드 저장소 에 있습니다. 코드를 확인하고 싶으면 여기를 click 하세요 시작하기 전에... 책을 시작하기 전에 책에서 사용하는 자스민을 어떤식으로 이용하여 테스트 코드를 작성할 수 있는지 봐보자. 자스민 사용방법 테스트 러너파일 작성 테스트 러너란 자스민 코드와 소스파일, 스펙을 참조하는 html 파일 app_spec.html 테스트 코드를 작성하기 전에 첫째로 js 파일을 UI에서 완전히 분리하여 작성하는 것이 중요하다. 모듈패턴 테스트 코드가 가능한 코드를 작성하기 위해서는  모듈패턴 을 사용하도록 합니다. 모듈패턴이란? 함수로 데이터를 감추고, 모듈 API를 담고있는 객체를 반환하는 형태다. 모듈패턴은 자바스크립트에서 가장 많이 사용하는 패턴입니다. 두 가지 형태로 모듈패턴을 사용할 수 있습니다. 첫 번째는 호출하는 방식으로 사용합니다. 두 번째는 즉시 실행 함수 기반으로 사용할 수 있습니다. 여기서 즉시 실행 함수를  IIFE(Immediately Invoked Function Expression) 라고 합니다. 모듈 패턴 코드를 어떤식으로 작성할 수 있는지 간단하게 확인해보겠습니다. // 공간생성 let App = App || {}; // 생성된 공간에 함수를 추가한다. 인자로 함수를 넘긴다.( == 의존성 있는 함수를 주입) App.Person = function(God){ let name = God.makeName(); // API 노출 return { getName: function(){return name;}, setName: function(newName){name = newName;} } }; App 변수를 생성합니다. 생선된 변수에 Person() 함수를 만듭니다. person() 함수는 첫 번째 인자로 함수를 전달받습니다. retur...

[알고리즘] snake게임 알고리즘

막무가네로 알고리즘을 공부하면 재미가 없으니 게임을 접목하여 다루어 보도록 하겠습니다. 게임의 대상은 스네이크 게임입니다. 많은 사람들은 어릴 때 뱀게임을 많이 해봤을 것 입니다. 이번에 다뤄볼 주제는 뱀이 움직임을 어떻게 구현을 할지 알아보겠습니다. 뱀은 크게 3가지의 경우가 있습니다 1. 가장 중요한 뱀을 움직이기 2. 음식먹기 이때 뱀은 크기가 늘어나야 합니다. 3. 뱀이 움직이는 정책   - 뱀이 움직이지 못하는 경우는 : 우측방향에서 좌측 방향으로 OR 위에 아래 방향고 같이 180도 반전되는 움직임은 막겠습니다. 순수한 알고리즘을 만드는 과정이기 때문에 음식을 먹었는지 안먹었는지 판단하는 부분은 랜덤으로 판단을 하도록 하겠습니다. def is_eat(): return random.choice([1, 0]) 랜덤으로 1, 0을 반환을 해줍니다. 실제로 게임을 만든다면 해당 함수는 뱀의 머리가 음식의 좌표와 같은지 검사를 해주면 되겠습니다. key_position_map = { 'w': [-1, 0], # up 's': [1, 0], # down 'a': [0, -1], # left 'd': [0, 1] # right } direction = key_position_map.get('d') 다음으로는 키맵핑을 한 오브젝트 입니다. direction은 현재 뱀의 방향을 나타냅니다. snake_body = [[2, 3], [1, 3],[1, 2], [1, 1]] 주인공이 되는 뱀의 좌표들 입니다. while True: key = input() new_direction = key_position_map.get(key) if new_direction and direction_check(direction, new_direction): directi...

[react] react 작업환경 설정

react-boilerplate 사용방법 해당 프로젝트는 일반적인 react를 사용하기 전에 이런저런 환경설정을 미리 셋팅을 해둔 프로젝트 입니다. 해당 프로젝트는 아래의 설정들을 거쳐 해당 명령어만 실행을 해주면 일반적인 react 프로젝트를 실행 시킬 수 있습니다. 1. git clone https://github.com/pjt3591oo/react-boilerplate.git - 프로젝트 클론하기 2. npm install – Dependency 설치하기 3. npm start – 개발 서버 실행하기 (포트: 7777) 위 명령어를 실행 하였으면 http://localhost:7777로 접속해보기 해당 프로젝트의 자세한 설명은 아래에 작성하였습니다. 시작하기 앞서서 npm 3.10.6이상 버전 설치 권장 : npm의 버전마다 설치 방식이 달라 2.x버전에서 아래에 나와있는 모듈을 설치 할 때 상당히 오래 걸릴 수 있습니다. 1. Global Package 설치하기 babel  : 아직 ECMAScript6를 지원하지 않는 환경에서 ECMAScript6 Syntax를 사용할 수 있게 해줌. webpack  : 모듈 번들러로서, Browserify처럼 브라우저 위에서 import(require)을 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐준다. webpack-dev-server  : webpack에서 지원하는 간단한 개발서버로서 별도의 서버를 구축하지 않고도 웹서버를 열 수 있으며 hot-=loader를 통하여 코드가 수정될때마다 자동으로 리로드 되게 할 수 있다. $ npm install -g babel webpack webpack-dev-server 2. project생성 $ mkdir react-tutorial && cd react-tutorial $ npm init 3. Dependency 및 Plugin 설치 react사용을 위한 ...