express+typescript 기본 세팅하기2

express+typescript 기본 세팅하기1

 

저번 글에선 node+express+typescript로 백엔드를 세팅하는 방법에 대해 알아봤습니다.

이번엔 왜 그렇게 세팅했는지 하나하나 알아보겠습니다.

 

1. tsconfig.json

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./",
    "baseUrl": "./",
    "esModuleInterop": true
  }
}

 

target : 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'.

타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분입니다.

보통 es5로 세팅합니다.

 

module : 모듈을 위한 코드 생성 설정: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'.

자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳입니다. commonjs는 require문법 es2015이상은 import문법을 사용할 수 있습니다.

 

outDir : 해당 디렉토리로 결과 구조를 보냅니다. 

즉 yarn build를 한 후 js로 변환된 파일들이 저장되는 위치를 설정합니다.

 

rootDir : 모듈을 컴파일 한 이후 어떤 디렉토리를 루트로 하여 현재 구조를 유지할 것 인지를 결정합니다.

저번글에서 설정한 파일경로를 보고 설명드리자면

만약 rootDir을 설정하지 않았다면 기본적으로 rootDir을 ./server/src로 설정합니다.

때문에 src바깥에 있는 ./server에 있는 ts파일은 컴파일 대상에 포함하지 않기 때문에 문제가 생길 수 있습니다.

 

baseUrl : 상대 경로로 모듈의 경로를 지정할 때 기준이 되는 위치를 지정할 수 있는 옵션입니다.

예를들어 우리는 기본적으로 import를 할 때

import foo from './src/com';

과 같이 작성할 것입니다.

 이때 기준이 되는 ./를 설정하는 곳이 baseUrl입니다.

 

 

2. src/server.ts

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

const app = express();

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

app.listen(3000, () => {
  console.log('Application started on port 3000!');
});

express를 호출하고

app으로 express를 선언해줍니다.

 

'/'로 접속하면 'Application works!'를 브라우저에 출력하도록 한뒤

 

express가 열리는 포트를 3000번으로 지정해줍니다.

서버를 작동시키면 콘솔창에 'Application started on port 3000!'을 출력하도록 합니다.

 

위 코드로 우리는 localhost:3000/에 접속하면 'Application works!'가 출력되는 서버를 만들었습니다.