미들웨어

서버 측 프레임워크에서 사용되며, 클라 요청과 서버 응답 사이에 추가적인 작업을 할 수 있음

 

특징

1. 요청-응답의 중간 단계 역할
   • 요청 데이터를 가공하거나 인증, 로깅 등의 작업을 수행한 뒤 다음 단계로 넘김.
2. 연속적인 호출 구조
   • 미들웨어는 일반적으로 req, res, 그리고 next 객체를 인자로 받아 실행되며, next()를 호출하여 다음 미들웨어로 제어를 넘김
3. 다양한 용도
   • 요청 데이터의 파싱
   • 인증 및 권한 부여
   • 로깅 및 에러 처리
   • 정적 파일 제공

 

// 기본구조

const middleware = (req, res, next) => {
    // 요청(req) 처리 로직
    console.log('Middleware executed');
    
    // 다음 미들웨어 또는 라우트 핸들러 호출
    next();
};

// 순서대로 실행됨

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

app.use((req, res, next) => {
    console.log('Middleware 1');
    next(); // 다음 미들웨어로 이동
});

app.use((req, res, next) => {
    console.log('Middleware 2');
    next(); // 다음 미들웨어로 이동
});

app.get('/', (req, res) => {
    res.send('Hello, World!');
});

 

종류

• 어플리케이션 레벨 미들웨어 - app.use() 또는 특정 경로에만 사용
• 라우터 레벨 미들웨어 - 특정 라우트에만 적용

const router = express.Router();
router.use((req, res, next) => {
    console.log('Router-level middleware');
    next();
});

• 내장 미들웨어 - Express.js 기본 기능
  • express.json() : Json 데이터 파싱
  • express.urlencoded() : URL-encoded 데이터 파싱
• 서드파티 미들웨어 - 외부 라이브러리에서 제공

const morgan = require('morgan');
app.use(morgan('dev')); // 요청 로깅

 

사용예시

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

// JSON 파싱 미들웨어
app.use(express.json());

// 요청 로깅 미들웨어
app.use((req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next();
});

// 라우트 핸들러
app.post('/data', (req, res) => {
    console.log(req.body); // JSON 데이터
    res.send('Data received');
});

app.listen(3000, () => console.log('Server running on port 3000'));

import { jsonParser } from '../utils/JsonParser.js';

const app = express();

// 미들웨어 등록
app.use(cors());
app.use(jsonParser)

// 데이터를 파싱하여 req.body에 저장

export const jsonParser = (req, res, next)=>{
    let data = '';
    //클라 요청이 들어왔을때
    req.on("data", (chunk)=>{
    	// 클라로부터 들어오는 청크를 누적 (메모리 효율성)
        data += chunk;
    })
    // 클라이언트 요청 수신이 완료되었을때
    req.on("end", ()=>{
        try{
            req.body= JSON.parse(data)
            console.log('jsonParser', req.body)
        }catch(e){
            console.log('err : ', e)
            req.body = {};
        }
        next(); // 미들웨어 호출 or route() 호출   
    })
}

 

 

- 추가 axios 사용 예시

import axios from 'axios';
const API_SERVER_HOST = 'http://localhost:5000'

// API 요청 - 게시글 목록 조회 요청
export const getArticleList = async()=>{
    const response = await axios.get(`${API_SERVER_HOST}/list`)

    return response.data;
}// Promise 객체 반환

export const postArticle = async(form)=>{
    const request = await axios.post(`${API_SERVER_HOST}/writer`,form)

    return request.data;
}

- 추가 핸들러 함수 사용 예시

app.get('/list', (req, res) => {
    const sql = `SELECT id, title, contents, writer, reg_date 
                FROM article 
                ORDER BY id DESC`

    db.query(sql, (e, data) => {
        if (e) {
            console.log('error : ', e)
            res.status(500).json({ message: 'db error' })
        }
        else {
            res.status(200).json(data)
        }
    })
})

app.post('/writer', (req, res) => {
    const sq = `INSERT INTO article(title, contents, writer) 
            VALUES(?,?,?)`

    const params = [req.body.name, req.body.content, req.body.title]
    console.log('req body : ', req.body)
    db.query(sq, params, (e) => {
        if (e) {
            console.log('erro :', e)
        }
        else {
            console.log('succ')
        }
    })
})