npm package 설치

필요한 패키지들을 설치한다.

npm i express bcrypt dotenv helmet hpp jsonwebtoken morgan multer passport

npm i --save-dev @types/morgan @types/hpp @types/express

express : 서버를 구성하는 패키지.

bcrypt : 암호를 암호화 해준다.

dotenv : 설정 파일을 process.env.변수명의 형태로 사용할 수 있게 해준다.

helmet, hpp : production 환경에서 보안을 위해 설치

jsonwebtoken : jwt를 사용하기 위한 패키지.

morgan : log를 출력하기 위한 패키지.

multer : 이미지를 다루기 위한 패키지.

passport : 로그인과 소셜 로그인을 다루기 위한 패키지.

app.ts

src 폴더에 app.ts 파일을 만들자.

일단 간단한 형태의 서버를 만들어 보자.

import express, { Request, Response, NextFunction } from "express";
import morgan from "morgan";
import dotenv from "dotenv";
import hpp from "hpp";
import helmet from "helmet";

const port = process.env.PORT || 8080;
const env = process.env.NODE_ENV || "development";

dotenv.config();

const app = express();

if (process.env.NODE_ENV === "production") {
  app.use(hpp());
  app.use(helmet());
  app.use(morgan("combined"));
} else {
  app.use(morgan("dev"));
}

app.set("json spaces", 2);

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use("/api", (req: Request, res: Response) => {
  res.status(200).json({ message: 'Hello, TS!' });
});

interface Err extends Error {
  status: number;
  data?: any;
}

// 여기까지 왔으면 라우트를 찾지 못했다는 것이므로 ststus 404를 세팅
app.use(function (req: Request, res: Response, next: NextFunction) {
  let err = new Error("Not Found") as Err;
  err.status = 404;
  next(err);
});

// render the error page
app.use((err: Err, req: Request, res: Response, next: NextFunction) => {
  res.status(err.status || 500);
  if (process.env.NODE_ENV === "development") {
    res.json({
      message: err.message,
      data: err.data,
    });
  } else {
    // production 환경에서는 에러를 감춤.
    res.json({ message: "무언가가 잘못되었습니다.", status: 500 });
  }
});

const server = app.listen(port, () => {
  console.log(`App listening on port ${port}!`);
});

먼저 Request나 Response 처럼 미리 정의가 되어 있는 express 타입스크립트 객체를 사용하고 있는 것을 알 수 있을 것이다.

express server 에러 타입

그 다음으로는 typescript에서 에러를 정의하는 모습이다.

interface Err extends Error {
  status: number;
  data?: any;
}

interface를 통해 내장된 Error 객체를 확장해서 사용을 하고 우리가 따로 사용할 status 나 data 속성을 정의한다.

기본 js 랑 비교할 때 크게 바뀐 것은 없다. 속성 옆에 타입을 지정해주는 과정이 추가되었다고 보면 될 것 같다.

타입을 지정하는 데 드는 시간이 늘기는 하지만 이 후 타입스크립트의 인텔리센스로 코드 완성 기능이나 실수 방지 및 타입 에러 방지를 생각하면 좋은 선택인것 같다. 요즘 채용 시장에서도 타입스크립트는 많이 사용하고 있고 말이다.

서버의 최상위 폴더에 .env 파일을 만들고 다음과 같이 설정해보자.

NODE_ENV=development

yarn dev로 서버를 기동해 보자.

http://127.0.0.1:8080/api

{
  "message": "Hello, TS!"
}

이렇게 잘 나오면 성공이다.

다음 시간에는 route를 만들어 보자!