TypeScript 타입스크립트로 Koa 초기 설정하기

 

Koa

'Node.js 웹 프레임워크'

 

대표적인 Node.js 웹 프레임워크인 Express 개발팀에서 새로 개발한 프레임워크입니다. 많은 메모리를 차지하는 Express 에 비해 가볍고, async/await 문법을 사용하여 편하게 비동기 코드를 작성할 수 있다는 장점이 있습니다.

 

---

 

이번 글에서는 TypeScript 타입스크립트를 이용하는 Koa 서버 초기 환경 설정을 진행해보도록 하겠습니다.

 

1. 프로젝트 생성하기
2. 모듈 설치하기
3. 타입스크립트 설정파일 생성하기
4. 서버 코드 작성하기
5. script 명령 추가하기
6. 서버 실행하기

 

참고로 Koa 는 위에서 언급된 async/await 최신 문법을 사용하기 때문에 ES6 문이상을 지원하는 Node.js v7 이상 버전에서 사용되어야 합니다. 버전 관리도구인 nvm 을 이용하여 v7 이상으로 버전을 설정해주세요.

 

---

 

1. 프로젝트 생성하기

 

디렉토리 생성 후 이동하여 프로젝트 생성 명령어인 yarn init (혹은 npm init) 를 입력합니다.

 

$ mkdir ts-koa
$ cd ts-koa
$ yarn init

question name (ts-kpa): 
question version (1.0.0):
question description:
...

 

위의 question name 과 같은 대화형 인터페이스에 따라 내용을 입력하면 package.json 파일이 생성됩니다. (내용을 입력하지 않고 그냥 엔터를 쳐서 넘어가면 기본 값으로 설정됩니다.)

 

---

 

2. 모듈 설치하기

 

먼저 프로젝트에 필요한 패키지들을 설치합니다.

아래 명령어로 설치된 패키지들은 package.json 파일의 dependencies 에 추가됩니다.

배포 후 런타임에도 계속 쓰이는 패키지들을 dependencies 에 설치합니다.

 

$ yarn add koa
$ yarn add koa-router
$ yarn add koa-bodyparser

 

* koa-router : Express 와 달리 Koa 는 라우터 모듈이 내장되어 있지 않아 별도로 설치해주어야 합니다.

* koa-bodyparser : 클라이언트 요청 body 를 파싱해줍니다.

 

 

이어서 개발시 필요한 패키지들을 설치합니다.

아래 명령어로 설치된 패키지들은 devDependencies 에 추가됩니다.

테스트, lint 등 컴파일(빌드)에 타임에 필요한 패키지들을 devDependencies 에 설치합니다.

 

$ yarn add -D typescript
$ yarn add -D ts-node
$ yarn add -D nodemon
$ yarn add -D @types/koa
$ yarn add -D @types/koa-router
$ yarn add -D @types/koa-bodyparser

 

* ts-node : 메모리 상에서 타입스크립트로 작성된 파일을 자바스크립트로 transpile 해줍니다.

* nodemon : 코드가 변경될 때 마다 자동으로 서버를 재시작시킵니다.

* @types : koa, koa-router 등의 타입스크립트 타이핑 정보를 포함하고 있습니다.

 

---

 

3. 타입스크립트 설정파일 생성하기

 

아래 명령어를 입력하여 루트 디렉토리에 타입스크립트 설정파일인 tscongif.json 파일을 생성시킵니다.

 

$ tsc --init

 

저는 tsconfig.json 파일의 속성들을 아래와 같이 수정해주었습니다.

 

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es2017",
        "noImplicitAny": true,
        "outDir": "./dist",
        "sourceMap": true
    },
    "include": [
        "./src/**/*"
    ]
}

 

tsconfig.json 파일과 각 속성별 세부 정보는 아래 링크를 참고해주세요.

https://typescript-kr.github.io/pages/tsconfig.json.html

TypeScript 한글 문서

---

 

4. 서버 코드 작성하기

 

초기 설정을 완료하였습니다.

서버를 열기 위해 src 디렉토리를 생성 후 index.ts 파일을 작성합니다.

 

src/index.ts

import * as Koa from 'koa';
import * as Router from 'koa-router';
import * as bodyParser from 'koa-bodyParser';

const app = new Koa();
const router = new Router();
const port: number = 3000;

app.use(bodyParser());

router.get('/*', async (ctx) => {
    ctx.body = 'Hello World!';
});

app.use(router.routes());

app.listen(port, ()=> {
	console.log(`Koa server is listening on port ${port}`);
});

 

주의해야 할 것이 있습니다. app 인스턴스에 라우터를 적용하기 전에 bodyParser 를 적용해주어야 합니다. 즉 app.use(bodyParser()) 를 app.use(router.routes()) 보다 먼저 작성해야 합니다.

 

 

---

 

5. script 명령 추가하기

 

서버를 실행하기 전 package.json 파일의 scripts 에 script 명령을 추가합니다.

 

package.json

"scripts": {
  "start:dev": "nodemon --watch 'src/**/*' -e ts --exec ts-node ./src/index.ts"
}

 

start:dev 명령어를 입력하면 nodemon 이 src 디렉토리 내 ts 파일들을 주시하다 해당 파일들이 변경, 저장될 때마다 src 디렉토리의 index.ts 파일을 ts-node 로 transpile 하여 다시 실행시키도록 작성해주었습니다.

 

---

 

6. 서버 실행하기

 

이제 모든 준비가 완료되었습니다! 위에서 추가한 script 로 서버를 실행시킵니다.

 

$ yarn start:dev