node.js express 미들웨어 심화, 미들웨어 별 사용처

내용 길고 저장용이기 때문에 따로 소스코드 간편하게 보기 하지 않음.

 

 

Middleware란 무엇인가?
**미들웨어(Middleware)**는 요청(request) 객체, 응답(response) 객체, 그리고 애플리케이션의 요청-응답 주기 동안 요청-응답 주기를 처리하는 함수입니다. 미들웨어 함수는 요청 객체(req), 응답 객체(res), 그리고 다음 미들웨어 함수를 실행할 수 있게 하는 next 함수를 가집니다.

Middleware의 종류
애플리케이션 레벨 미들웨어
라우터 레벨 미들웨어
내장 미들웨어
서드파티 미들웨어
각 종류별로 예제를 통해 학습해보겠습니다.


** 학습 전 npm install morgan 해서 morgan 설치


1. 애플리케이션 레벨 미들웨어
애플리케이션 레벨 미들웨어는 app.use() 또는 app.METHOD()를 사용하여 애플리케이션 객체에 바인딩됩니다.

예제: 로깅 미들웨어

///
// 파일명: app-level-middleware.js
const express = require('express');
const app = express();
const port = 3000;

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

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

app.listen(port, () => {
    console.log(`서버가 실행 중입니다. http://localhost:${port}`);
});
///
설명: 이 미들웨어는 모든 요청에 대해 요청의 HTTP 메소드와 URL을 콘솔에 로그로 출력합니다.


2. 라우터 레벨 미들웨어
라우터 레벨 미들웨어는 router.use() 또는 router.METHOD()를 사용하여 라우터 객체에 바인딩됩니다.

예제: 인증 미들웨어
///
// 파일명: router-level-middleware.js
const express = require('express');
const app = express();
const port = 3000;
const router = express.Router();

// 인증 미들웨어
router.use((req, res, next) => {
    if (req.headers['x-auth-token']) {
        next();
    } else {
        res.status(401).send('Unauthorized');
    }
});

router.get('/protected', (req, res) => {
    res.send('You have access to this route');
});

app.use('/api', router);

app.listen(port, () => {
    console.log(`서버가 실행 중입니다. http://localhost:${port}`);
});

///
설명: 이 미들웨어는 요청 헤더에 x-auth-token이 포함되어 있는지 확인하여 보호된 라우트에 대한 접근을 제어합니다.


3. 내장 미들웨어
Express에는 내장된 미들웨어가 있으며, express.static이 그 예입니다.

예제: 정적 파일 제공
///
// 파일명: built-in-middleware.js
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

// 정적 파일 제공 미들웨어
app.use(express.static(path.join(__dirname, 'public')));

app.listen(port, () => {
    console.log(`서버가 실행 중입니다. http://localhost:${port}`);
});

///

설명: public 디렉토리 안에 있는 모든 파일을 정적으로 제공하는 미들웨어입니다.



4. 서드파티 미들웨어
서드파티 미들웨어는 npm에서 설치하여 사용할 수 있습니다. 예로는 morgan이 있습니다.

예제: Morgan을 사용한 로깅
///
// 파일명: third-party-middleware.js
const express = require('express');
const morgan = require('morgan');
const app = express();
const port = 3000;

// Morgan 미들웨어
app.use(morgan('combined'));

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

app.listen(port, () => {
    console.log(`서버가 실행 중입니다. http://localhost:${port}`);
});
///

설명: morgan 미들웨어는 HTTP 요청 로그를 콘솔에 출력합니다.


///////////


실습 예제 프로젝트
이제 위의 내용을 종합하여 간단한 실습 프로젝트를 진행해보겠습니다. 프로젝트는 여러 가지 미들웨어를 사용하여 기능을 구현할 것입니다.

프로젝트 파일 구조:
/
├── express-middleware-demo.js
└── routers/
    └── middleware-api.js

///
// 파일명: express-middleware-demo.js
const express = require('express'); // Express 모듈을 가져옵니다.
const app = express(); // Express 애플리케이션을 생성합니다.
const port = 3005; // 서버가 실행될 포트를 설정합니다.

// 내장된 JSON 파싱 미들웨어
// 모든 요청의 본문을 JSON으로 파싱합니다.
// **주로 API 서버에서 클라이언트가 JSON 형식으로 데이터를 보낼 때 사용됩니다.
app.use(express.json()); // 내장된 JSON 파싱 미들웨어를 사용합니다.

// 애플리케이션 레벨 로깅 미들웨어
// 모든 요청을 로깅하여 어떤 요청이 들어왔는지 확인할 수 있습니다.
// **주로 디버깅 및 요청 추적에 사용됩니다.
// 애플리케이션 레벨 로깅 미들웨어
app.use((req, res, next) => {
    console.log(`${req.method} ${req.url}`); // 요청 메서드와 URL을 콘솔에 출력합니다.
    next(); // 다음 미들웨어 또는 라우터로 이동합니다.
});

// 라우터를 가져와서 애플리케이션에 적용합니다.
// 라우터 실행
const middlewareRouter = require('./routers/middleware-api'); // 라우터 모듈을 가져옵니다.
app.use('/middleware-api', middlewareRouter); // '/middleware-api' 경로에 라우터를 적용합니다.

app.listen(port, () => { // 서버를 지정된 포트에서 실행합니다.
    console.log(`서버가 실행 중입니다. http://localhost:${port}`); // 서버 실행 메시지를 콘솔에 출력합니다.
});
///

///
// 파일명: routers/middleware-api.js
const express = require('express');
const router = express.Router();

// 서드파티 미들웨어 morgan
// 요청을 로깅하여 서버에 들어오는 모든 요청의 정보를 기록합니다.
// **주로 디버깅 및 서버 로그 분석에 사용됩니다.
// 서드파티 미들웨어 morgan
const morgan = require('morgan');
router.use(morgan('combined')); // 요청을 로깅하기 위해 morgan 미들웨어를 사용합니다.

// 정적 파일 제공 미들웨어
// '/static' 경로로 들어오는 요청에 대해 'public' 디렉토리의 파일을 제공합니다.
// **주로 이미지, CSS 파일, JavaScript 파일 등 정적 리소스를 제공하는 데 사용됩니다.
// 정적 파일 제공 미들웨어
router.use('/static', express.static('public')); // '/static' 경로에서 정적 파일을 제공합니다.

// 인증 미들웨어
// 요청 헤더에 'x-auth-token'이 포함되어 있는지 확인하여 인증을 처리합니다.
// **주로 로그인된 사용자만 접근할 수 있는 보호된 라우트에서 사용됩니다.
// 인증 미들웨어
router.use((req, res, next) => {
    if (req.headers['x-auth-token']) { // 요청 헤더에 'x-auth-token'이 있는지 확인합니다.
        next(); // 토큰이 있으면 다음 미들웨어 또는 라우터로 이동합니다.
    } else {
        res.status(401).send('승인되지 않았습니다. Unauthorized'); // 토큰이 없으면 401 상태 코드를 응답합니다.
    }
});

// 예제 라우트
// 인증된 사용자만 접근할 수 있는 보호된 라우트입니다.
// **주로 로그인된 사용자가 접근할 수 있는 페이지에서 사용됩니다.
router.get('/protected', (req, res) => {
    res.send('You have access to this route 이 경로에 접근 할 수 있습니다.'); // 인증된 요청에 대해 응답을 보냅니다.
});

module.exports = router; // 라우터 모듈을 내보냅니다.


///

설명:

express-middleware-demo.js

JSON 파싱 미들웨어 사용.
모든 요청에 대해 로깅하는 애플리케이션 레벨 미들웨어.
/api 경로로 들어오는 요청을 api 라우터로 위임.


routers/middleware-api.js
인증 미들웨어 사용: x-auth-token 헤더가 있는지 확인.
/protected 라우트 제공.
/static 경로로 정적 파일 제공.
서드파티 미들웨어 morgan을 사용한 요청 로깅.


//////////

****Express.js 애플리케이션에서 미들웨어와 라우터의 순서는 중요****
1. 서드파티 미들웨어 morgan

const morgan = require('morgan');
router.use(morgan('combined'));
이유:
morgan은 요청을 로깅하는 미들웨어입니다. 요청이 들어올 때마다 콘솔에 로그를 남기기 위해 가장 먼저 위치합니다.
모든 요청에 대해 로그를 남겨야 하므로, 다른 모든 미들웨어나 라우트보다 먼저 실행됩니다.

2. 정적 파일 제공 미들웨어
router.use('/static', express.static('public'));
이유:
정적 파일 제공 미들웨어는 /static 경로로 들어오는 요청을 처리하여, public 디렉토리의 파일을 제공합니다.
정적 파일은 일반적으로 인증이 필요 없는 리소스이므로, 인증 미들웨어 앞에 위치시켜 인증 없이 접근할 수 있도록 합니다.
정적 파일 요청을 처리한 후, 나머지 미들웨어나 라우트를 건너뛰므로 성능 최적화 측면에서도 유리합니다.

3. 인증 미들웨어
router.use((req, res, next) => {
    if (req.headers['x-auth-token']) {
        next();
    } else {
        res.status(401).send('승인되지 않았습니다. Unauthorized');
    }
});
이유:
인증 미들웨어는 보호된 라우트에 접근하기 전에 요청을 검사하여, 인증이 필요한 요청만을 처리합니다.
이 미들웨어는 정적 파일 제공 미들웨어 다음에 위치하여, 보호된 라우트에만 적용됩니다.
인증이 필요한 요청은 이 미들웨어를 통과해야 하므로, 라우트 정의 앞에 위치시킵니다.

4. 라우트 접근 안내 메시지
router.get('/protected', (req, res) => {
    res.send('You have access to this route 이 경로에 접근 할 수 있습니다.');
});
이유:
이 라우트는 인증된 요청에 대한 응답을 제공합니다.
인증 미들웨어를 통과한 후에 실행되므로, 인증된 요청만이 이 라우트에 접근할 수 있습니다.
이 라우트는 최종적으로 클라이언트에게 응답을 보내는 역할을 합니다.


"""
최종 정리
1. morgan 로깅 미들웨어: 모든 요청을 로깅하여 개발 및 디버깅에 도움이 됩니다.
2. 정적 파일 제공 미들웨어: 인증이 필요 없는 정적 파일을 제공하여 성능을 최적화합니다.
3. 인증 미들웨어: 보호된 라우트에 대한 요청을 검사하여 인증된 요청만 통과시킵니다.
4. 라우트: 보호된 라우트에 대한 실제 응답을 제공합니다.
"""


1. 서버 실행 및 예제 요청 과정
서버 실행: 터미널에서 프로젝트 디렉토리로 이동한 후, 다음 명령어를 입력합니다.

node express-middleware-demo.js
Postman 또는 브라우저를 사용하여 요청 보내기:

- Protected 라우트 접근:
URL: http://localhost:3005/middleware-api/protected
Headers: x-auth-token: your-token-value
Method: GET
- 정적 파일 제공:
URL: http://localhost:3005/middleware-api/static/example.txt
Method: GET
정적 파일은 로컬 -> public 폴더 안에 있어야함



*** 각 미들웨어의 사용처
서드파티 미들웨어 morgan:
사용처: 서버에서 들어오는 모든 요청을 로깅하여 디버깅 및 요청 분석에 유용합니다.
예시:
서버에 어떤 요청이 들어왔는지 추적할 때
로그 파일을 분석하여 서버 상태를 모니터링할 때

정적 파일 제공 미들웨어:
사용처: 웹사이트에서 이미지, CSS, JavaScript 파일 등 정적 리소스를 제공할 때 사용됩니다.
예시:
웹 페이지에 포함된 이미지 파일 제공
스타일시트(CSS) 제공
클라이언트 사이드 스크립트(JavaScript) 제공

인증 미들웨어:
사용처: 보호된 라우트에 접근하기 전에 사용자의 인증 여부를 확인할 때 사용됩니다.
예시:
로그인된 사용자만 접근할 수 있는 페이지
사용자 정보 수정, 삭제 등의 중요한 작업을 수행할 때

라우트 접근 안내 메시지:
사용처: 특정 라우트에 접근이 가능한지 여부를 클라이언트에게 알려줄 때 사용됩니다.
예시:
로그인된 사용자가 접근할 수 있는 보호된 페이지
특정 권한이 필요한 작업 페이지

- 오늘 배운 내용 정리

1. 서드파티 미들웨어 morgan:
모든 요청을 로깅하여 개발 및 디버깅에 도움을 줍니다.
2. 정적 파일 제공 미들웨어:
서버에서 정적 파일을 제공하여 이미지, CSS, JavaScript 파일을 클라이언트에게 전달합니다.
3. 인증 미들웨어:
요청 헤더에 'x-auth-token'이 포함되어 있는지 확인하여 인증을 처리합니다.
인증된 사용자만 보호된 라우트에 접근할 수 있도록 합니다.
4. 라우트:
인증된 사용자만 접근할 수 있는 보호된 라우트에 대한 실제 응답을 제공합니다.