[NodeJS & Express] 타입스크립트(TypeScript) 환경에서 API 구현

이번 포스트에서는 TypeScript를 사용해 NodeJS, Express 프레임워크 환경에서 API 서버 구축 기초 내용을 공유한다. 지금까지 순수 자바스크립트로 작업을 했던 나에게 타입스크립트를 적용하는 건 좋은 공부가 되었다.

 

 

1. 개발 환경 세팅

먼저 작업할 워크 스페이스와 node, npm이 잘 설치되어 있는지 확인한다. 설치가 확인되면 작업 공간에 node 초기화를 진행한다.

 

# 워크 스페이스 생성
mkdir ts-node && cd ts-node

# node, npm 설치확인
node -v
npm -v

# node 초기화 (package.json)
node init

 

2. 의존성 패키지 설치 ( Dependency )

기본적인 서버 구동에 필요한 패키지만 설치한다. 이번에 설치한 라이브러리들은 아래와 같다.

 

• express
  • node의 웹 프레임워크
  • API 개발 환경 구축
• nodemon
  • node 실행 모니터링 도구
  • 실행 전반에 대한 로그 확인 가능
•  typescript
  • 타입스크립트 기본 모듈
• ts-node
  • 타입스크립트 파일(.ts) 파일을 읽고 실행하는 라이브러리
  • node 환경에서 .ts 파일 실행되지 않기 때문에 사용
• @types/node
  • node 환경에서 타입스크립트 문법이 적용되게끔 도와주는 라이브러리
  • 타입스크립트에 대한 정보(definitions)를 입힘
  • 순수 자바스크립트로 만들어진 node 모듈 내부의 변수와 함수에 타입을 정의한 내용을 담고있음
• @type/express
  • express 환경에서 타입스크립트 문법이 적용되게끔 도와주는 라이브러리
  • 마찬가지로, 타입스크립트에 대한 정보(definitions)를 입힘

 

# 패키지 설치 명령어
npm install --save-dev express nodemon typescript ts-node @types/node @types/express @types/node

# 설치 확인 (package.json)
"devDependencies": {
  "@types/express": "^4.17.17",
  "@types/node": "^18.13.0",
  "express": "^4.18.2",
  "nodemon": "^2.0.20",
  "ts-node": "^10.9.1",
  "typescript": "^4.9.5"
}

 

3. 타입스크립트 설정 파일 생성 ( tsconfig.json )

타입스크립트와 의존성 패키지 설치가 끝나면, 타입스크립트 초기화(init)를 진행한다. 여기서 초기화란 우리가 구착할 API 서버에 타입스크립트 설정을 적용시키는 단계다. 해당 설정은 소스 내부에 tsconfig.json을 생성함을 뜻한다.

 

생성 명령어는 아래 코드와 같다. 기본 옵션으로 설정하는 방법과 사용자가 미리 지정한 옵션을 주입해 설정하는 방법이 있다. 실행자가 지정하지 못한 값은 생성될 파일에 주석으로 표기되니 나중에 필요한 옵션을 따로 적용해도 된다. 기본적인 설정 옵션 정보도 함께 공유한다.

 

• rootDir
  • 시작 경로
  • 내부 명령어 실행 시, 해당 경로를 베이스로 실행
• outDir
  • 빌드 시, 생성될 js 파일 디렉토리 경로
• target
  • 타입스크립트에서 컴파일될 자바스크립트 버전 정보 ( es5, es2015, es2016, es2017, esnext ... )
• lib
  • 빌드 시, 함께 묶을 라이브러리가 저장된 경로
• module
  • js 파일 import에 관한 문법 정의
  • commonjs는 require 문법
  • es2015와 esnext는 import 문법
• strict
  • 전체적으로 엄격한 타입 체크
• strictPropertyInitialization
  • class 내부에서 엄격한 타입 체크
• esModuleInterop
  • 모듈을 가져올 경우(require, import) 편의성 제공 ( export default 없이 가져올 수 있음 )

 

# Default 설정으로 진행
npx tsc --init

# 사용자 설정으로 진행
npx tsc --init --rootDir src --outDir dist --esModuleInterop --module commonjs

 

tsconfig.json 관한 추가 정보
https://yamoo9.gitbook.io/typescript/cli-env/tsconfig

 

4.  실행 파일 작성 ( app.ts )

타입스크립트에 대한 전반적인 설정이 끝나면, 메인이 되는 app.ts 파일을 작성한다. 나의 경우 루트 경로(rootDir)를 src 디렉토리로 지정했기에 아래와 같은 구조로 진행했다.

 

# 워크 스페이스 구조
ts-node
├── dist
│   └── app.js
├── package-lock.json
├── package.json
├── src
│   └── app.ts
└── tsconfig.json

 

# app.ts 파일
import express, { Request, Response, NextFunction } from "express";

const app = express();

app.get("/", (req: Request, res: Response, next: NextFunction) => {
  res.send("Hello TypeScript");
});

app.listen("3000", () => {
  console.log("Listening on Port ::: " + 3000);
});

 

5. 실행

서버를 실행하고, '/' 경로에 대한 get 요청을 보내본다. package.json에 내용과 함께 결과를 공유한다.

 

# package.json 파일
...
"main": "src/app.ts",
"scripts": {
  "start": "nodemon src/app.ts",
  ...
}
...

# 서버 실행
npm start

> temp@1.0.0 start
> nodemon src/app.ts
...
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node src/app.ts`
Listening on Port ::: 3000

실행 테스트 (VS Code - Thunder Client 사용)