Koa.js 동기 처리 - 비동기 Node Promise 활용 방법

"Koa + Javascript + Node + Promise + 비동기(async await)" 이렇게 활용하여 자바스크립트 비동기를 구현하는 방법입니다. 당연히 프로미스를 사용했고, node 환경에선 가장 적절한 방법이라 생각합니다.

Node 비동기형 환경

Node는 비동기 환경이라 다른 언어랑 많이 다릅니다.

시간이 소요되는 함수 A가 존재한다고 칩시다. 동기형 환경에서는 A가 끝나기를 기다렸다가 다음 B를 실행합니다. 반면, 비동기 환경에서는 A를 건너뛰고 B를 실행합니다.

이는 아래의 간단한 실험으로 확인할 수 있습니다.

Python(동기형 환경)

// exe.py

import time

def sayHello():

  time.sleep(2)

  print("hello")

sayHello()

print("hello2")

Node(비동기형 환경)

// exe.js

function sayHello(){

  setTimeout(function(){

    console.log("hello");

  },2000);

}

sayHello();

console.log("hello2");

sayHello는 시간이 걸리는 함수입니다.

Python에선 sayHello() 함수가 완료될 때까지 기다립니다. 그래서 2초 후에 다음 동작을 실행합니다.

2초 대기 > hello 출력 > hello2 출력

Node에서는 sayHello() 함수를 한 번 호출하고 바로 다음 동작을 실행합니다.

hello2 출력 > 2초 경과 > hello 출력

Java PHP Python 등 많은 언어는 동기식입니다. 반면, Node, 자바스크립트는 비동기형입니다.

비동기 환경 : 웹 개발에서의 문제점

비동기형 Web 개발하다 보면 곤란한 경우가 발생합니다. 대표적인 게 지연 처리입니다. 지연 처리가 끝나기 전에 화면 렌더링이 되는 현상 종종 목격합니다.

1. 다른 API에서 값을 얻기 위해 지연
2. DB에서 데이터를 얻기 위해 지연

위의 2가지 경우가 대표적입니다.

// app.js

const Koa = require('koa');

const app = new Koa();

app.use(async ctx => {

  setTimeout(()=>{

    ctx.body="hello"

  },2000);

});

app.listen(3000);

// 브라우저 화면에는 Not Found 표시

// hello로 표시되지 않음

Promise 동기 처리

Promise는 이 문제를 해결해 줍니다. Promise는 처리가 끝나기를 기다렸다가 끝나면 결과를 돌려주는 오브젝트(객체)입니다. 처리에 성공하면 resolve(), 실패하면 reject()를 호출합니다.

Promise 객체는 then()에서 시작합니다.

// promiseHello.js

const delayHello = new Promise((resolve,reject)=>{

  setTimeout(()=>{

    resolve("hello!");

  },2000);

});

delayHello.then((value)=>{

  console.log(value);

})

// 2초 후에 hello 출력

Koa에서 Promise를 이렇게 사용하면 됩니다!

// app.js

const Koa = require('koa');

const app = new Koa();

const  sayHello  =  new  Promise((resolve,reject)=>{

  setTimeout(()=>resolve("hello!"),5000);

})

app.use(async ctx => {

  sayHello.then((value)=>{

    ctx.body = value;

  );

  // 아니면, await 를 사용해도 됨

  // const value = await sayHello;

  // ctx.body = value;

});

app.listen(3000);