이번 포스트에서는 타입스크립트와 Babel을 사용하여 Express.js 프로젝트를 설정하는 방법에 대해 알아보겠습니다. 우선, Express.js는 Node.js를 위한 웹 애플리케이션 프레임워크로, API 서버 구축 등에 널리 사용됩니다. 타입스크립트는 정적 타입을 지원하는 JavaScript의 수퍼셋으로, 개발자가 코드를 더 안정적으로 유지하고 실수를 줄일 수 있도록 도와줍니다. Babel은 최신 JavaScript 코드를 하위 버전으로 변환해주는 도구로, 여러 브라우저와 환경에서의 호환성을 확보할 수 있게 도와줍니다.

1. 프로젝트 초기화

가장 먼저 프로젝트 폴더를 생성하고, 다음 명령어를 실행하여 package.json 파일을 생성합니다.

npm init -y

그 후, Express.js 및 타입스크립트와 Babel을 설치합니다.

npm install express
npm install typescript @babel/core @babel/preset-env @babel/preset-typescript @babel/register @types/express @types/node --save-dev

2. 타입스크립트 설정

프로젝트 루트 폴더에 tsconfig.json 파일을 생성하고, 다음과 같이 내용을 작성합니다.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts"
  ]
}

3. Babel 설정

프로젝트 루트 폴더에 .babelrc 파일을 생성하고, 다음과 같이 내용을 작성합니다.

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
  "plugins": []
}

4. Express 애플리케이션 구성

이제 Express 애플리케이션을 작성합니다. src 폴더에 app.ts 파일을 생성하고, 다음과 같이 내용을 작성합니다.

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

const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

5. 빌드 및 실행

타입스크립트 파일을 빌드하기 위해 package.json 파일의 scripts 부분을 다음과 같이 수정합니다.

"scripts": {
  "start": "npm run build && node dist/app.js",
  "build": "tsc && babel src --out-dir dist --extensions \".ts\""
}

이제 프로젝트를 빌드하고 실행할 수 있습니다.

npm start

결론

이제 타입스크립트와 Babel을 사용하여 Express.js 프로젝트를 설정하는 방법을 알아보았습니다. 이러한 설정을 통해 더 안정적이고 호환성있는 애플리케이션을 개발할 수 있게 될 것입니다.