Node.js + Express + TypeScript

환경 세팅하기

1) 폴더 생성하기 & 폴더로 이동

 

2) yarn init

 

3) yarn add express cors ~~body-parser~~ sequelize typescript

1. cors
   1. Express의 미들 웨어
   2. 헤더를 변경해주어 cors를 허용하는 방법이 있음 (하지만 CORS 미들웨어를 사용하는 것이 더 간단하고 편함)
   3. app.all('/*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); next(); });
   4. CORS 설정하기
   5. const cors = require('cors'); app.use(cors()); // CORS 설정
   6. https://beagle-dev.tistory.com/194
2. body-parser
   1. 클라이언트 POST request data의 body로부터 파라미터를 편리하게 추출함
   2. (+) req.body는 body-parser를 사용하지 않으면 디폴트 값으로 undefined임
   3. 사용하려면, 상단에app.use(bodyParser().json()) 를 작성하면 된다.
   4. https://medium.com/@chullino/1분-패키지-소개-body-parser를-소개합니다-하지만-body-parser를-쓰지-마세요-bc3cbe0b2fd
   5. → 하지만, Express를 쓰면 간단하게 app.use(express.json()) 으로 간단하게 구현할 수 있다. 따라서 Express를 쓰는 경우에는 body-parser 모듈을 설치할 필요가 없음!
3. sequelize
   1. Node.js의 대표적인 ORM. 자바스크립트 구문을 알아서 SQL로 변환해주는 모듈임.
   2. 다른 데이터베이스 전환시에도 유용하게 사용 가능
   3. MySQL, PostgreSQL, MariaDB 등 많은 RDBMS를 지원하고 프로미스 기반으로 구현되어 있기 때문에 비동기 로직을 편하게 작성할 수 있음
   4. https://velog.io/@alsrb5606/Node.js-Sequelize-정리

 

4) yarn add -D @types/express @types/node nodemon ts-node tslint

1. ts-node
   1. Node.js에서 TypeScript를 실행시키는 도구
   2. ts 파일을 미리 컴파일하지 않고 바로 실행시키는 엔진 (따라서 dev에서 필요)
   3. JIT(Just In Time)으로 TypeScript를 JavaScript로 변환하여 실행 가능
2. tslint : typescript 코드를 가독성 및 오류를 미리 검사하는 정적 분석 도구

 

5) nodemon 명령어 설정하기

"scripts": {
    "dev": "nodemon --watch 'src/**/*.ts' --exec ts-node src/app.ts",
    "start": "node dist/app.js",
		"build": "tsc",
  },

• yarn build : ts → js

package.json

{
  "name": "nodejs",
  "version": "1.0.0",
  "main": "index.js",
  "author": "nno3onn",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon --watch 'src/**/*.ts' --exec ts-node src/app.ts",
    "start": "node dist/app.js",
		"build": "tsc",
    "build:clean": "yarn clean:pack && yarn clean && yarn build",
    "clean": "rm -rf build",
    "clean:pack": "rm -f *.tgz",
    "lint": "tslint -p .",
    "package": "yarn build:clean && npm pack"
  },
  "dependencies": {
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "mysql2": "^3.3.2",
    "sequelize": "^6.31.1",
    "typescript": "^5.0.4"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/node": "^20.2.4",
    "nodemon": "^2.0.22",
    "ts-node": "^10.9.1",
    "tslint": "^6.1.3"
  }
}

 

6) tsconfig.json 생성하고 입력하기

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "paths": {
      "@/*": ["src/*"]
    },
    "strictNullChecks": true,
    "esModuleInterop": true,
    "baseUrl": "."
  },
  "ts-node": {
    "esm": true
  },
  "exclude": ["node_modules"],
  "include": ["./src/**/*.ts"]
}

• outDir : ts → js 바꿔서 저장할 디렉터리
• rootDir : ts파일들이 있는 루트 디렉터리
• paths : 절대 경로 설정. ts-config-paths 모듈을 사용하면 절대경로로 임포트할 수 있음
• ts-node
  • esm (ECMAScript Module)
    • ES6부터 자바스크립트 모듈 기능 추가됨
    • ECMAScript에서 지원하는 자바스크립트 공식 모듈 시스템

 

 

API 테스트

app.ts

import * as express from "express";

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

app.listen(port, () => {
  console.log("서버가 실행됩니다.");
});

app.get("/customer", (req: express.Request, res: express.Response) => {
  res.send("get");
});

app.post("/customer", (req: express.Request, res: express.Response) => {
  res.send("post");
});

app.all("/customer", (req: express.Request, res: express.Response) => {
  res.send("all");
});

yarn build 를 입력하면 dist 폴더 속에 js 파일들이 생성되고,

yarn start를 입력하면 서버가 실행된다.

localhost:3000/customer 접속 시 ‘get’이 뜬다.