03. Koa 기본 사용법

Hello World

먼저, 서버를 여는 방법부터 알아봅시다. 기존에 src/index.js 파일에 작성했던 코드를 지우고, 다음 코드를 입력하세요:

`src/index.js`

const Koa = require('koa');

const app = new Koa();

app.use((ctx) => {
  ctx.body = 'hello world';
});

app.listen(4000, () => {
  console.log('listening to port 4000');
});

서버를 4000 포트로 열고, 서버에 접속을 하게되면 ‘hello world’ 라는 텍스트를 반환하도록 설정하였습니다.

서버를 한번 실행해볼까요?

$ node src
listening to port 4000

이제, 브라우저로 http://localhost:4000/ 에 접속해보세요.

hello world 가 잘 나타났나요?

미들웨어

Koa 애플리케이션은, 미들웨어의 배열로 구성되어있습니다. 우리가 위 코드에서 app.use 라는 함수를 사용했었지요? 이 함수는, 미들웨어를 애플리케이션에 등록을 해주는 함수입니다.

app.use((ctx) => {
  ctx.body = 'hello world';
});

여기서, app.use의 파라미터로 함수가, 하나의 미들웨어입니다. Koa 의 미들웨어 함수에선, 두가지의 파라미터를 받습니다. 첫째는, 위 코드에서도 나오는 ctx 이며, 두번째는 next 입니다.

ctx 는 웹 요청과, 응답에 대한 정보를 지니고있습니다. 그리고 next 는, 현재 처리중인 미들웨어의 다음 미들웨어를 호출하는 함수입니다. 만약에, 미들웨어를 등록하고, next 를 실행하지 않는다면, 그 다음 미들웨어를 처리하지 않게 됩니다.

그리고, 미들웨어는 app.use 로 등록을 하는 순서대로 처리가 됩니다. 이해를 돕기 위하여, 다음과 같이 기록을 하는 미들웨어 두개를 기존의 미들웨어 상단에 넣어보세요.

`src/index.js

const Koa = require('koa');

const app = new Koa();

app.use(() => {
  console.log(1);
});

app.use(() => {
  console.log(2);
});

app.use((ctx) => {
  ctx.body = 'hello world';
});

app.listen(4000, () => {
  console.log('listening to port 4000');
});

이제, 터미널 창에서 Ctrl + C 를 눌러서 서버를 종료한 다음, 다시 실행해보세요. 그 다음에, http://localhost:4000/ 에 브라우저로 다시 접속을 하면, 브라우저 응답으로는 Not Found 가 뜨고, 터미널쪽에선 다음과 같이 기록이 됩니다:

$ node src
listening to port 4000
1

첫번째 미들웨어만 처리됐고, 나머지는 무시가 됐지요? 이는, next 를 호출하지 않았기 때문입니다. 이번에는, 함수의 파라미터에서 next 를 받아와서 호출을 해볼까요?

`src/index.js

const Koa = require('koa');

const app = new Koa();

app.use((ctx, next) => {
  console.log(1);
  next();
});

app.use((ctx, next) => {
  console.log(2);
  next();
});

app.use((ctx) => {
  ctx.body = 'hello world';
});

app.listen(4000, () => {
  console.log('listening to port 4000');
});

서버를 재시작하고, 브라우저로 페이지를 새로고침 해보면, 다시 hello world 가 잘 나타나고, 콘솔쪽엔 다음과 같이 기록이 될 것입니다:

$ node src
listening to port 4000
1
2

next() 는 프로미스 입니다.

next 를 실행하면, 프로미스를 반환합니다. 따라서, 다음 작업들이 끝나고 난 다음에 특정 작업들을 수행 할 수도 있습니다. 한번 첫번째 미들웨어를 다음과 같이 수정하고, 서버를 재시작 후 페이지를 새로고침 해보세요:

`src/index.js` - 첫번째 미들웨어

app.use((ctx, next) => {
  console.log(1);
  next().then(() => {
    console.log('bye');
  });
});

그러면, 콘솔에서 다음과 같은 결과물이 나타납니다:

listening to port 4000
1
2
bye

그 다음 처리될 미들웨어들의 작업이 끝나고, 다시 첫번째 미들웨어에서 next.then 부분에 설정한 코드들이 실행됐지요?

async / await 사용하기

Koa 에선 async/await 를 정식적으로 지원하기 때문에, 아주 편하게 사용 할 수 있습니다. (Express 에선, 아직 정식 지원이 되지 않는 상태여서, 에러를 처리하는 부분이 제대로 작동하지 않아서 편법을 사용해야 합니다.)

서버측에서는, async/await 는 매우 유용하게 사용됩니다. 특히, 데이터베이스에 요청을 할 때 콜백을 사용 할 필요 없으므로, 코드를 깔끔하게 작성 할 수 있게 됩니다.

방금 우리가 만들었던 작업이 끝나면 bye 라고 콘솔에 기록하는 미들웨어를, async/await 를 사용하여 구현해보겠습니다.

`src/index.js` - 첫번째 미들웨어

app.use(async (ctx, next) => {
  console.log(1);
  await next();
  console.log('bye');
});

코드를 저장후, 서버를 다시시작하고 페이지를 새로고침 해보세요. 아까와 동일하게 작동하나요?

03. Koa 기본 사용법