TypeScript와 Express로 Node.js 서버 구축하기

타입 스크립트는 JS의 확장 언어다.

타입스크립트로 작성한 코드를 JS로 컴파일하여 컴파일 된 JS 코드가 Node.js(JS의 런타임 환경)에서 실행되면서 프로그램이 움직인다.

 

 

package.json 설정

package.json에 다음과 같은 스크립트를 추가했다.

{
  "scripts": {
    "build": "tsc", -> npm run build 시 실행 tsc -> (루트 경로에서 tsconfig.json을 읽어서 옵션에 맞게 컴파일해라)
    "start:dev": "tsc-watch --onSuccess \"node dist/app.js\"", -> npm run start:dev 실행 시 해당 명령어 실행 tsc로 계속 컴파일을 했을 때 성공했다면 다음 명령어 실행 node 로 dist 폴더 안에 있는 app.js를 실행해라 (dist는 tsconfig에서 컴파일 옵션에 따라 컴파일 하는데 이때 설정해준 폴더임)
    "prestart": "npm run build", -> npm run start 실행 시 가장 먼저 실행 
    "start": "node dist/app.js" -> npm run start 할시 (build 실행돼서 컴파일, -> 컴파일 결과를 노드를 통해 실행)
  },
  "devDependencies": {
    "@types/node": "^15.3.0", -> 노드라는 js 런타임의 타입
    "prettier": "^2.2.1", -> 코드 포멧팅
    "tsc": "^2.0.3", -> ts 컴파일러
    "tsc-watch": "^4.2.9", -> 개발단계에서 tsc -watch 파일 변경시 계속 컴파일해줌
    "typescript": "^4.3.4" -> 
  }
}

 

tsconfig.json 설정

ts.config에서는 TypeScript 컴파일러 옵션을 설정하여 코드가 어떻게 컴파일될지를 정의한다.

{
    "compilerOptions": {
      "strict": true,
      "module": "commonjs",
      "declaration": true,
      "removeComments": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "allowSyntheticDefaultImports": true,
      "target": "ES5",
      "sourceMap": true,
      "outDir": "./dist", -> 이 dist 안에 ts를 컴파일 해서 나온 결과물인 js 파일들이 생성 이 파일들을 node를 통해 실행
      "baseUrl": "./src",
      "incremental": true
    },
    "include": ["src/**/*"]-> 컴파일 대상
  }

tsconfig 설정 문서

 

 

 

설정 결과

해당 설정을 마치고 터미널에 npm run start:dev 명령어를 실행하자 dist 폴더가 생성되었다.

 

npm run start:dev -> src 폴더 전부 컴파일 -> 컴파일 결과 dist 에 옮김 -> dist에 있는 app.js를 실행

 

 

Express 설치

 

express는 Node.js 환경에서 서버를 쉽게 구축할 수 있게 해주는 웹 프레임워크다

express 공식 문서

 

Express - Node.js web application framework

 

 

express 설치해보자!

 

 

 

 

package.json 에 express 디펜더시가 추가된 것을 확인할 수 있다.

 

express 위에서 js가 아닌 ts 를 사용하기 위해서 추가 설치해야 하는 것이 있다.

 

 

 

express 공식 문서에 있는 예제를 app.ts에 추가해보자 (최신 문법을 반영하였다.)

 

1. express 모듈 불러오기

import * as express from "express";

express 모듈을 TypeScript 스타일로 불러온다. 이 모듈은 웹 앱 서버를 쉽게 만들기 위한 다양한 기능을 제공한다.

 

2. Express 앱 생성

const app: express.Express = express();

app 이라는 이름의 express 애플리케이션을 생성한다. app객체는 서버를 설정하고 요청을 처리하는데 사용된다. 

 

3.포트 설정

const port: number = 8000;

 

4. 라우팅 설정

app.get("/", (req, res) => { console.log(req); res.send("Hello World!" });

 

app.get("/", (req, res) => {...}): 루트 URL(/)에 GET 요청이 들어오면 실행되는 코드이다.

 

• req: 요청 객체(request object)로, 클라이언트의 요청 관련 정보를 포함한다.
• res: 응답 객체(response object)로, 서버가 클라이언트에 응답을 보낼 때 사용하는 객체이다.
• console.log(req): 콘솔에 요청 객체(req)의 내용을 출력하여 요청 정보를 확인할 수 있다.
• res.send("Hello World"): 클라이언트에게 String 형식의 응답"Hello World"을 보낸다.

 

5. 서버 시작

app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); });
app.listen(port, () => {...}): 지정한 포트(port)에서 서버를 시작한다.

 

 

 

 

서버 실행 결과

 

npm run start:dev 명령어로 서버를 실행한 후

localhost 8000에 접속하면 서버에서 저정한 응답을 얻을 수 있다.

app.send메서드를 사용해 다양한 데이터 형식으로 응답을 보낼 수 있으며, 프론트엔드는 이런 데이터를 받아 원하는 형식으로 가공하여 표시할 수 있다.

 

잘뜸^-^

 

 

응답을 json으로 변경하면 json  응답을 보낼 수 있음

 

 

 

이렇게 TypeScript와 Express를 사용해 Node.js 서버를 설정하는 방법을 정리해봤다. ଘ(੭ꆤᴗꆤ)━☆ﾟ.*･ 

 

 

 

 

참고

 

탄탄한 백엔드 NestJS 강의

tsconfig 설정 문서

express 공식 문서