MEVN+Typescript를 이용한 새 프로젝트

이번 글에서는 백엔드에서 Express, MongoDB, Mongoose, Jest와 Typescript를 사용하는 프로젝트 셋업 방법에 대해 다루려고 합니다. 처음 프로젝트를 시작하려고 할 때 위 프레임워크들과 함께 Typescript를 사용하기 위한 setup중에 삽질을 많이 했어서 누군가는 삽질을 하지 않기를 바라는 의미에서 글을 씁니다.

Install

우선 express를 설치해 줍니다.

npm install express

Npm 모듈을 사용할 때 npm에 DT아이콘이 있으면 타입스크립트 지원을 위해서는 @types/<Module Name>을 설치해 줘야합니다. (반면에 TS아이콘이 있는경우 추가 설치 없이 타입스크립트를 지원합니다.) @types/express를 devDependency로 설치해 줍니다.

npm install --save-dev @types/express

이제 타입스크립트를 설치해 줄건데 Node.js에서 타입스크립트를 사용하기 위해서는 @types/node를 설치해줘야합니다.

npm install --save-dev typescript @types/node

타입스크립트 설정

Node.js에서 타입스크립트를 사용하기 위해서 먼저 사용하고 있는 node버전의 tsconfig프리셋을 설치해줍니다. 저는 node.js 버전 14를 사용중이기 때문에 @tsconfig/node14를 설치했습니다.

npm install --save-dev @tsconfig/node14

그리고 루트 디렉토리에 tsconfig.json파일을 아래와 같이 만들어줍니다.

{
    "extends": "@tsconfig/node14/tsconfig.json",
    "exclude": ["./node_modules/", "./dist/"],
    "compilerOptions": {
        "outDir": "dist"
    }
}

그리고 package.json파일의 scripts 아래에 start와 build스크립트를 추가해줍니다.

    ...
    "scripts": {
        "start": "node dist/app",
        "build": "tsc"
    }
    ...

이제 npm run build명령어를 통해 src/아래에 있는 타입스크립트를 dist폴더로 빌드해줄 수 있습니다. 실험해보기 위해 src폴더를 만들고 app.ts파일을 만들어줍니다. Request와 Response는 각각 request와 response에 대응하는 타입입니다.

import express, { Request, Response } from 'express';

const app = express();

app.get('/', (req: Request, res: Response) => {
    res.send('Hello, world!');
});

app.listen(process.env.PORT || 3000, () => {
    console.log(`Server listening on port ${process.env.PORT || 3000}`);
});

그러면 dist/폴더 아래 app.js 파일이 생성될텐데 npm start명령어를 이용해 앱을 실행하고 localhost:3000으로 접속하면 Hello, world를 볼 수 있습니다.

Nodemon 설정

2021-11 기준으로 현재는 ts-node-dev를 사용하고 있습니다. Nodemon을 사용해도 문제는 없지만 ts-node-dev와 transpile-only 옵션을 사용해 타입 체크를 생략하는 것이 속도가 더 빨라 고려해보는 것도 좋을것 같습니다.

타입스크립트와 함께 nodemon을 쓰려면 ts-node를 설치해야 합니다.

npm install --save-dev nodemon ts-node

루트 디렉토리에 nodemon.json파일을 아래같이 생성해줍니다. 저는 루트 디렉토리가 너무 복잡해져서 package.json의 nodemonConfig 아래에 설정을 저장했습니다.

{
    "restartable": "rs",
    "ignore": [
        ".git",
        "node_modules/",
        "dist/",
        "coverage/"
    ],
    "watch": [
        "src/"
    ],
    "execMap": {
        "ts": "node -r ts-node/register"
    },
    "env": {
        "NODE_ENV": "development"
    },
    "ext": "js,json,ts"
}

그리고 package.json파일의 scripts 아래에 dev 스크립트를 추가해줍니다.

    ...
    "scripts": {
        ...
        "dev": "nodemon src/app.ts"
    }

그러면 npm run dev명령어로 nodemon을 사용할 수 있습니다.

Jest 설정

마지막으로 테스팅 프레임워크 jest 설정을 해주기 위해서 ts-jest를 설치해줍니다.

npm install --save-dev jest ts-jest @types/jest

역시 루트 디렉토리에 jest.config.js 파일을 만들어줍니다. 이번에는 ts-jest의 명령어를 사용해 만들어줍니다.

npx ts-jest config:init

그리고 package.json에 test 스크립트를 추가해줍니다.

    ...
    "scripts": {
        ...
        "test": "jest"
    }

이제 npm run test 또는 npm t명령어로 jest를 실행할 수 있습니다.