Typescript로 Koa 서버 구축하기

hello, KOA?

 타입 스크립트로 Koa 서버를 띄우는 간단한 글이다. 

사실 원래는 API 서버가 필요해서, 기존에 해보기도 했고 Javascript 기반인 NodeJS의 Express로 서버를 구축하려고 했다. 하지만 이번에는 Koa를 선택했다. 왜냐하면 async/await 문법을 정식적으로 지원하기 때문에도 있고, 기존 Express 개발팀이 Express에서 개선점들을 고치면서 내부 설계가 많이 다른 프레임워크를 개발한 게 Koa이기 때문이다(사실 단순히 정식 지원이 문제가 아니다. 내부적으로 발생하는 비동기 관련 오류를 Express는 잡아내지 못한다 - try, catch를 사용해야함; 이 부분은 다른 블로그를 참고하자). 또한 Koa는 미들웨어로서 충실하다. 반면 Express는 미들웨어, 라우팅, 템플릿 등 수많은 기능을 내장하고 있어, 필요한 기능을 기반으로 내가 원하는 라이브러리를 붙여 만들 수 있는 Koa가 더 매력적이었다. 

 물론 Express는 Koa보다 다운로드 수가 약 30배 이상 많은 아주 좋은 프레임워크이다(^^;;). 

서론이 길었으나, 본론은 짧으니 안심하시고 글을 읽어 주길 바란다. 빠르게 Koa 서버를 구축해 보겠다. (NodeJS는 설치되어 있다는 전제하에 진행한다.)

---

1. 필요한 패키지를 설치해 보자.

> npm init --y
> npm i koa
> npm i --save-dev typescript ts-node nodemon @types/koa @types/node
> npm i --save-dev eslint eslint-config-prettier @typescript-eslint/parser

보다시피 특별한건 없다. 자동 서버 재시작을 위한 nodemon, 타입스크립트의 타입 정의를 위한 여러 @types~, 타입스크립트 트랜스 파일을 메모리에서 바로 할 수 있게 해주는 ts-node가 전부이다.  그리고 eslint 관련 패키지.

 

 2. Prettier 설정(최상위 디렉터리에. prettierrc를 만드세요)

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

 

3. eslint 설정(최상위 디렉터리에. eslintrc.json를 만드세요, eslint --init을 통해 만드셔도 되지만, 귀찮잖아요.)

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": ["eslint:recommended", "prettier"],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
        "no-console": "warn" // console.log 사용 여부인데, "off"하셔도 됩니다.
    }
}

 

4. Typescript 설정(최상위 디렉터리에tsconfig.json를 만드세요, tsc --init을 통해 만드셔도 됩니다. 일단 rough 하게 설정.)

{
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["ES5", "ES6"],
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "baseUrl": "./",
    "esModuleInterop": true,
    "experimentalDecorators": true
  }
}

 

5. package.json 설정

{
	...,
  "scripts": {
    "start": "nodemon --exec ts-node src/index.ts",
    "test": "NODE_ENV=test jest"
  },
  ...,
}

 

6. src 폴더 및 src폴더 아래에 index.ts 파일 생성

 

7. 이제 Koa 서버를 띄어보겠습니다. inex.ts 파일에 아래와 같이 적어 주세요! 

import { Context } from 'koa';

const Koa = require('koa');

const app = new Koa();

app.use((ctx: Context) => {
  ctx.body = 'hello, Jacob!';
});

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

 

8. npm start -> http://localhost:4000/ 접속

hello, Jacob!

완료!^^

---

Reference

근데 여담이지만, 위 코드를 자세히 보면, 기존에 NodeJS 유저였으면 신기한 부분이 하나 있다.

바로 new Koa()가 뉴코아? 가 아니라...

import { Context } from 'koa';

웅?? import/export 문법이 된다!??

Node.js v12부터는 ES Module 기능을 정식으로 지원해 준다. 즉 아래와 같이 바꿔도 서버를 잘 작동하며, 프론트엔드와 백엔드의 import/export 구문까지 통일할 수 있게 되었다.

import { Context } from 'koa';
import Koa from 'koa';

// 당연히 아래와 같이 작성해도 된다.
import Koa, { Context } from 'koa';

2019-12-28 기준 Node.js 버전

---

만약 express로 타입스크립트를 이용하고 싶다면 모든 설정은 동일하고 Koa 대신,

> npm i express
> npm i --save-dev @types/express

 설치해 주면된다. 참고로 나는 위에서는 koa를 사용할 것처럼 말했으나, 이것저것 해본 후에 다시 express로 바꿨다. 

이유는 koa 자체는 좋지만, 추가해야 되는 라이브러리들의 업데이트 주기가 너무 느렸다. 요즘 세상에 마지막 배포가 3년 전, 4년 전이라니... 막대한 커뮤니티를 이용할 수 없고 업데이트가 느린 상태라면, 굳이 express를 포기하고 갈 이유는 없다고 생각이 들었다. 하루동안 삽질 및 실험하고 내린 결론이다.