[Express] 3장 - 미들웨어 적용

✅ Express 미들웨어(MiddleWare)란?

Expresds에서 미들웨어는 요청(req)과 응답(res) 사이에서 실행되는 함수로 요청을 가로채 전처리/후처리 역할을 담당합니다. 미들웨어는 next()를 호출하면 다음 미들웨어로 이동하고 호출하지 않으면 요청 처리가 멈춥니다.

app.use((req, res, next) => {
  console.log("MiddleWare Start!");
  next(); // 다음 미들웨어로 이동
});

---

✅ express.json()

express.json은 요청의 JSON 형식 Body를 파싱하는 내장 미들웨어로 POST/PUT 요청 시, req.body에 파싱된 객체가 생성됩니다, 이전에는 body-parser 모듈을 사용했으나, Express 4.16.0부터는 내장되었습니다.

app.use(express.json());

app.post("/user", (req, res) => {
  console.log(req.body); // JSON 파싱된 데이터
  res.send("JSON 데이터 받음");
});

---

✅ 3.express.urlencoded()

HTML form 데이터(application/x-www-form-urlencoded)를 파싱하며 주로 form 태그로 보내는 데이터를 처리하는 역할을 담당합니다.

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

app.post("/form", (req, res) => {
  console.log(req.body); // { name: "James", age: "20"}
  res.send("From 데이터 받음");
});

---

✅ 4. 내장 미들웨어 (Built-in Middleware)

Express가 기본 제공하는 미들웨어로 다음과 같은 내장 미들웨어 종류가 있습니다.

• express.static(root) -> 정적 미들웨어 제공
• express.json() -> JSON 파싱
• express.urlencoded() ->  URL-encoded 데이터 파싱

// public 폴더 파일을 / 로 제공
app.use(express.static("public"));

---

✅ 5. 커스텀 미들웨어 (Custom Middleware)

커스텀 미들웨어는 직접 미들웨어를 정의합니다. 

const myLogger = (req, res, next) => {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
  next(); // 다음 미들웨어로 이동
};

app.use(myLogger);

---

✅ 6. 전체 예시

const express = require("express");
const app = express();

// 내장 미들웨어 적용
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static("public"));

// 커스텀 미들웨어
app.use((req, res, next) => {
  console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
  next();
});

// 라우터
app.post("/user", (req, res) => {
  res.json({ message: "JSON 데이터 받음", data: req.body });
});

app.post("/form", (req, res) => {
  res.json({ message: "폼 데이터 받음", data: req.body });
});

// 서버 실행
app.listen(3000, () => console.log(`서버 실행: http://localhost:3000`));

node server.js

• curl로 테스트

curl -X POST http://localhost:3000/user -H "Content-Type: application/json" -d "{\"name\":\"홍길동\"}"

• Postman / Insominia 로 테스트
  
  • Post: http://localhost:3000/user
  • Body -> raw -> JSON 선택
  • { "name": "홍길동" } 입력 후 엔터
• HTML 폼으로 테스트

<form action="/form" method="POST">
  <input type="text" name="username" value="홍길동" />
  <button type="submit">전송하기</button>
</form>

 

저장 후 public 폴더에 넣고 localhost:3000/index.html로 접속합니다. 동일하게 POSTMAN이나 다른 프로그램으로 데이터를 넣고 조회할 수 있습니다.

---

 

GitHub - Koras02/express-bloging: https://thinky.tistory.com/category/Back-End/Express