Express + Typescript formData

저번 글에는 Express에서 라우팅을 설정하는 방법을 작성했는데 이번에는 실제로 유저가 formData를 요청했을때 데이터를 전달 받는 방법에 대하여 글을 적어보겠다...!

저번 코드에서 코드가 변경되는 부분이 크게 없다. 우선 아래 코드처럼 app.use(express.json())을 반드시 해줘야 한다.

1. app.use(express.json())

• app.use 함수는 Express 애플리케이션에 미들웨어를 설정하는 데 사용
• express.json 함수는 JSON 형식의 요청 본문을 파싱하여 JavaScript 객체로 변환하는 미들웨어
• app.use(express.json()); 코드는 모든 요청에 대해 express.json 미들웨어를 적용하도록 설정. 즉, 모든 요청의 본문은 JSON 형식으로 파싱되어 req.body 속성에 JavaScript 객체로 저장된다.

import express from "express";
import userRouter from "./router/userRouter";

const app: express.Application = express();

const hostname: string = "127.0.0.1";
const port: number = 5000;

//configure express to receive from data

app.use(express.json());


app.get("/", (request: express.Request, response: express.Response) => {
  response.status(200).send('<h3 style="color: blue">some html</h3>');
});

//router configuration
app.use("/users", userRouter);

app.listen(port, hostname, () => {
  console.log(`Express Server is started at http://${hostname}:${port}`);
});

2. req.body로 데이터 전달받기

import express from "express";

const userRouter: express.Router = express.Router();


/*
  @usage : to check the form data
  @url : http://127.0.0.1:5000/users/login
  @method : post
  @fields : name, password
  @access : Public
*/

userRouter.post("/login", (req: express.Request, res: express.Response) => {
  let formData = req.body; // 클라이언트로 부터 form data를 받는다
  res.status(200).json({
    msg: "form Data is received",
    formData: formData,
  });
});

export default userRouter;

insomnia를 이용한 데이터 요청 예시