SSR 서버 만들기 (2) - 번들링과 트랜스파일

현재는 서버를 ts-node를 사용해 실행하고 있다. 서버를 프로덕션 환경에 배포하기 위해서는 TypeScript 파일과 JSX 문법이 적용된 파일을 순수 자바스크립트 문법으로 변환하는 과정을 거쳐야 한다.

그런데 프로덕션 환경에서도 ts-node로 서버를 실행하면 안 되는 걸까? ts-node issue에서는 ts-node의 —-transpile-only 옵션을 사용하면 transpile만 실행되기 때문에 프로덕션에서 사용 가능하다는 의견이 있다.

그러나 다른 코멘트에서 성능을 측정한 결과에 따르면, node 커맨드로 자바스크립트를 실행하는 것과 ts-node로 타입스크립트 파일을 실행하는 시간에는 차이가 없었으나, ts-node를 사용했을 때 메모리를 약 20배 더 많이 사용하는 것으로 나타났다.

1node app.js => 5.33MB Ram, 15.48 sec
2ts-node app.ts => 100.63MB Ram, 15.54 sec
3ts-node app.ts --transpile-only => 95.79MB Ram, 15.67 sec

따라서, 프로덕션 서버의 자원을 절약하고 싶다면 빌드 시점에 자바스크립트 파일로 변환하여 사용하는 게 좋다.

TypeScript와 React의 트랜스파일링을 위해 Babel을 사용할 것이다. 그리고 빌드 과정을 하나의 config 파일로 관리하고, 나중에 다른 Plugin과 Loader를 사용하기 위해 Webpack을 함께 사용할 것이다.

.babelrc

우선 아래 커맨드로 바벨 코어와 React, TypeScript용 프리셋을 설치한다.

1npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

바벨 프리셋을 설정하기 위해 .babelrc 파일을 아래와 같이 추가했다.

1{
2  "presets": [
3    "@babel/preset-typescript",
4    "@babel/preset-env",
5    "@babel/preset-react"
6  ]
7}

webpack.config.js

아래 커맨드로 웹팩과 바벨 로더를 설치한다.

1npm i -D webpack webpack-cli babel-loader

현재는 아래와 같이 간단한 webpack 설정으로 코드를 번들링할 수 있다.

1const path = require("path");
2
3module.exports = {
4  mode: "development",
5  target: "node", // node.js 서버를 번들링하고 있음
6  entry: "./src/index.ts", // ./src/index.ts 파일로부터 의존성 트리를 만들고, 이 의존성 트리를 하나의 파일로 번들링한다.
7  module: {
8    rules: [
9      {
10        test: /\.tsx?$/, // 번들링 도중 .ts 혹은 .tsx 파일을 만나면 babel을 실행해 트랜스파일링한다.
11        // 바벨은 .babelrc에 정의된대로 트랜스파일링을 수행한다.
12        exclude: /node_modules/,
13        loader: "babel-loader",
14      },
15    ],
16  },
17  resolve: {
18    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
19  },
20  output: {
21    filename: "bundle.js",
22    path: path.resolve(__dirname, "dist"), // 번들링 결과물을 dist 폴더에 bundle.js란 이름으로 저장한다.
23  },
24};