Js to Ts (app.js)

---

Javascript 프로젝트를 Typescript로 변환해보자.

참고글 : ts-migrate

---

변환 과정

.js 파일을 .ts 파일로 변환합니다.

1. 타입 정의 추가

JavaScript 코드에서는 동적 타입이였지만, TypeScript는 강력한 정적 타입을 요구합니다.

1. 외부 라이브러리 타입 정의

외부 라이브러리를 사용하고 있다면, 해당 라이브러리의 타입 정의 파일을 설치해야 사용할 수 있습니다.

타입 정의 파일이 없을 경우, 직접 작성해야함

npm i -D @types/express

---

app.js

app.js파일을 app.ts 파일로 변환해보겠습니다.

// app.js
import express, { Request, Response, NextFunction } from "express";
import cors, { CorsOptions } from "cors";
import cookieParser from "cookie-parser";
import path from "path";
import passport from "passports/index.js";
import morganMiddleware from "middleware/morgan.js";
import logger from "config/winston.js";
import "dotenv/config";

// router
import movieRouter from "routes/movie.route.js";
import userRouter from "routes/user.route.js";
import authRouter from "routes/auth.route.js";

const app = express();

const __filename = new URL(import.meta.url).pathname.replace(
  /^.*?([A-Za-z]:)/,
  "$1"
);
const __dirname = path.dirname(__filename);

app.set("port", process.env.PORT || 5000);

// middleware
const whitelist = ["http://localhost:3000", "http://127.0.0.1:3000"];

const corsOptions = {
  origin: (origin, callback) => {
    // callback (error : Error | null, allow : boolean)
    // allow : true 요청 허용
    if (!origin) {
      // origin이 없는 경우
      callback(null, true); // 허용
    } else if (whitelist.includes(origin)) {
      // 허용된 출처라면
      callback(null, true); // 허용
    } else {
      // 허용되지 않은 출처라면
      callback(new Error(`Not Allowed Origin: ${origin}`)); // 거부
    }
  },
  credentials: true, // 사용자 인증이 필요한 리소스(쿠키 ..등) 접근
};

app.use(cors(corsOptions)); // 옵션을 추가한 CORS 미들웨어 추가
app.use(express.static(`${dirname}/src/public`));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(morganMiddleware);

app.use(passport.initialize());

// router
app.use("/movie", movieRouter);
app.use("/user", userRouter);
app.use("/auth", authRouter);

// error handler
app.use((err, req, res, next) => {
  logger.error(err); // 전체 에러 로깅

  const statusCode = err.statusCode || 500;
  const errorMessage = err.message || "Internal server error";

  // 개발 환경에서만 스택 정보를 보냄
  if (process.env.NODE_ENV === "dev") {
    res.status(statusCode).json({ message: errorMessage, stack: err.stack });
  } else {
    res.status(statusCode).json({ message: errorMessage });
  }
});

export default app;

---

app.ts

express, cors, cookie-parser의 타입 정의 파일을 설치합니다.

npm i -D @types/express @types/cors @types/cookie-parser

// app.ts
import express, { Request, Response, NextFunction } from "express";
import cors, { CorsOptions } from "cors";
import cookieParser from "cookie-parser";
import path from "path";
import passport from "passports/index.js";
import morganMiddleware from "middleware/morgan.js";
import logger from "config/winston.js";
import "dotenv/config";

// router
import movieRouter from "routes/movie.route.js";
import userRouter from "routes/user.route.js";
import authRouter from "routes/auth.route.js";

const app = express();

const __filename = new URL(import.meta.url).pathname.replace(
  /^.*?([A-Za-z]:)/,
  "$1"
);
const __dirname = path.dirname(__filename);

app.set("port", process.env.PORT || 5000);

// middleware
const whitelist = ["http://localhost:3000", "http://127.0.0.1:3000", undefined];

const corsOptions: CorsOptions = {
  origin: (origin, callback) => {
    // callback (error : Error | null, allow : boolean)
    // allow : true 요청 허용
    if (!origin) {
      // origin이 없는 경우
      callback(null, true); // 허용
    } else if (whitelist.includes(origin)) {
      // 허용된 출처라면
      callback(null, true); // 허용
    } else {
      // 허용되지 않은 출처라면
      callback(new Error(`Not Allowed Origin: ${origin}`)); // 거부
    }
  },
  credentials: true, // 사용자 인증이 필요한 리소스(쿠키 ..등) 접근
};

app.use(cors(corsOptions)); // 옵션을 추가한 CORS 미들웨어 추가
app.use(express.static(path.join(__dirname, "..", "public")));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(morganMiddleware);

app.use(passport.initialize());

// router
app.use("/movie", movieRouter);
app.use("/user", userRouter);
app.use("/auth", authRouter);

// error handler
app.use((err: Error, req: Request, res: Response, next: NextFunction) => {
  logger.error(err); // 전체 에러 로깅

  const statusCode = (err as any).statusCode || 500; // 타입 단언
  const errorMessage = err.message || "Internal server error";

  // 개발 환경에서만 스택 정보를 보냄
  if (process.env.NODE_ENV === "dev") {
    res.status(statusCode).json({ message: errorMessage, stack: err.stack });
  } else {
    res.status(statusCode).json({ message: errorMessage });
  }
});

export default app;