미들웨어 (middleware)
Express.js 의 요청(request)과 응답(response) 사이의 작업을 수행하는 함수
미들웨어는 Express 애플리케이션의 요청-응답 사이클 동안 다양한 작업을 처리할 수 있으며, 각 미들웨어는 요청 객체(req), 응답 객체(res), 그리고 애플리케이션 요청-응답 주기를 제어하기 위해 호출되는 다음 미들웨어 함수를 나타내는 next 함수를 받습니다.
미들웨어의 특징
1.
순차적 실행: 미들웨어는 코드에서 정의된 순서대로 순차적으로 실행됩니다.
2.
요청-응답 주기 제어: 각 미들웨어는 요청과 응답 객체에 대한 제어를 가지며, 다음 미들웨어로 제어를 전달하거나 요청-응답 주기를 종료할 수 있습니다.
3.
중간 처리 작업: 미들웨어는 요청과 응답을 중간에서 가로채어 수정하거나 추가 작업을 수행할 수 있습니다.
자주 사용되는 미들웨어
미들웨어 | 설명 |
morgan | HTTP 요청 로깅을 위한 미들웨어 |
express.static | 정적 파일을 제공하는 데 사용되는 미들웨어 |
body-parser | POST 요청의 body를 파싱하는 데 사용되는 미들웨어 |
cookie-parser | 쿠키를 파싱하는 데 사용되는 미들웨어 |
express-session | 세션 관리를 위한 미들웨어 |
multer | 파일 업로드를 처리하는 데 사용되는 미들웨어 |
라우팅 미들웨어 | 특정 경로에 대한 요청을 처리하는 데 사용되는 미들웨어
app.get(), app.post() |
Error Handling 미들웨어 | 에러 처리를 위한 미들웨어 |
미들웨어 기본사항
•
기본 구조
app.use(미들웨어)
app.use(’주소’, 미들웨어)
•
미들웨어는 app.use() 메소드와 함께 사용
•
첫 번째 인수인 ‘주소’를 지정하지 않으면, 모든 요청에 대하여 미들웨어가 실행됨
•
하나의 라우터에 여러 미들웨어를 연결할 수 있음
morgan
HTTP 요청 로깅을 위한 미들웨어
- 개발 및 디버깅 시에 사용됩니다.
설치
npm install morgan
Shell
복사
예시 코드
const morgan = require('morgan');
app.use(morgan('dev'));
JavaScript
복사
const express = require('express');
const morgan = require('morgan');
const app = express();
const port = 3000;
// 'dev' 포맷을 사용하여 로그 생성
app.use(morgan('dev'));
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
JavaScript
복사
기존 로그들 외에 추가적인 로그들을 볼 수 있다.로그 예시
GET / 200 7.189 ms - 13
Plain Text
복사
body-parser
HTTP 요청의 body를 파싱하기 위한 미들웨어
주로 POST나 PUT 요청과 같이 클라이언트가 데이터를 서버로 전송할 때 사용됩니다.
웹 애플리케이션에서 클라이언트가 서버에 데이터를 전송하면, 이 데이터는 HTTP 요청의 body에 담겨 전송됩니다. body-parser는 이러한 요청의 body를 쉽게 해석하고 사용할 수 있도록 도와줍니다.
설치
npm install body-parser
Shell
복사
예시코드
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
// body-parser를 사용하여 JSON 형식의 데이터 파싱
app.use(bodyParser.json());
// body-parser를 사용하여 URL-encoded 데이터 파싱
app.use(bodyParser.urlencoded({ extended: false }));
// POST 요청 처리
app.post('/submit', (req, res) => {
// req.body를 통해 파싱된 데이터에 접근 가능
const username = req.body.username;
const password = req.body.password;
// 처리 로직
res.send(`Received data: ${username}, ${password}`);
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
JavaScript
복사
사용 목적
1.
요청 데이터 파싱: 클라이언트가 폼을 통해 전송한 데이터나 JSON 형식의 데이터를 Express 애플리케이션에서 사용하려면 해당 데이터를 파싱해야 합니다. body-parser를 사용하면 이러한 데이터를 쉽게 파싱할 수 있습니다.
2.
데이터 형식 지원: body-parser는 JSON 및 URL-encoded 형식의 데이터를 지원하며, 필요에 따라 옵션을 조절하여 다양한 데이터 형식을 처리할 수 있습니다.
3.
미들웨어 형태: body-parser는 Express.js 미들웨어로 사용되므로, app.use()를 통해 간편하게 적용할 수 있습니다.
즉, body-parser를 사용하면 Express 애플리케이션에서 클라이언트로부터 전송된 데이터를 효과적으로 파싱하여 사용할 수 있습니다.
cookie-parser
Express.js 애플리케이션에서 쿠키를 파싱하기 위한 미들웨어
cookie-parser를 사용하면 클라이언트에서 서버로 전송된 쿠키를 쉽게 해석하고, 서버에서 클라이언트로 쿠키를 설정할 수 있습니다.
웹 브라우저는 쿠키를 사용하여 사용자의 상태를 추적하고 정보를 저장합니다. cookie-parser는 Express.js 애플리케이션에서 클라이언트로부터 전송된 쿠키를 파싱하고, 서버에서 클라이언트로 쿠키를 설정하기 위한 도구로 사용됩니다.
설치
npm install cookie-parser
JavaScript
복사
예시 코드
const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();
const port = 3000;
// cookie-parser를 사용하여 쿠키 파싱
app.use(cookieParser());
// 라우트에서 쿠키 설정 및 읽기
app.get('/set-cookie', (req, res) => {
// 쿠키 설정
res.cookie('username', 'john-doe', { maxAge: 900000, httpOnly: true });
// 쿠키 읽기
const username = req.cookies.username;
res.send(`Username from cookie: ${username}`);
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
JavaScript
복사
사용 목적
1.
상태 추적: 쿠키는 클라이언트와 서버 간의 상태를 추적하는 데 사용됩니다. 사용자의 로그인 상태, 세션 관리, 사용자 선호 설정 등을 저장하여 유지할 수 있습니다.
2.
개인화된 경험 제공: 쿠키를 사용하면 사용자에게 맞춤형 경험을 제공할 수 있습니다. 사용자의 선호, 테마, 언어 등을 저장하여 다음 방문 시에 반영할 수 있습니다.
3.
인증 및 보안: 쿠키는 사용자를 식별하고 인증하기 위해 사용될 수 있습니다. 또한, 암호화된 쿠키를 사용하여 보안을 강화할 수 있습니다.
cookie-parser를 사용하면 이러한 쿠키와 관련된 작업을 간단하게 처리할 수 있습니다.
express-session
Express.js 애플리케이션에서 세션 관리를 위한 미들웨어
세션은 서버 측에 사용자의 정보를 저장하고 클라이언트에는 세션 식별자를 제공하여 사용자 상태를 유지하는 데 사용됩니다.
세션은 서버 측에 데이터를 저장하여 클라이언트와 상호작용하는 데 사용됩니다. express-session은 Express 애플리케이션에서 세션을 쉽게 구현하고 관리할 수 있도록 도와줍니다. 이 미들웨어는 각 사용자에게 고유한 세션을 제공하고, 세션 데이터를 서버 측에 저장합니다.
설치
npm install express-session
Shell
복사
예시 코드
const express = require('express');
const session = require('express-session');
const app = express();
const port = 3000;
// express-session을 사용하여 세션 설정
app.use(session({
secret: 'your-secret-key',
resave: false,
saveUninitialized: true
}));
// 세션 등록
app.get('/set-session', (req, res) => {
req.session.username = 'john-doe';
res.send('Session is set');
});
// 세션 확인
app.get('/get-session', (req, res) => {
const username = req.session.username;
res.send(`Username from session: ${username}`);
});
// 세션 모두 제거 (로그아웃)
app.get('/logout', (req, res) => {
req.session.destroy();
res.send('Logged out');
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
JavaScript
복사
세션 주요 동작
동작 | 코드 | 설명 |
세션 등록 | req.session[key] = value; | 특정 키에 대한 세션 데이터를 등록합니다. |
세션 확인 | const value = req.session[key]; | 특정 키에 대한 세션 데이터를 확인합니다. |
세션 모두 제거 | req.session.destroy(); | 모든 세션 데이터를 제거하여 로그아웃 등에 사용합니다. |
사용 목적
1.
인증 및 사용자 식별: 세션은 사용자를 식별하고 인증하기 위해 사용됩니다. 로그인한 사용자의 정보를 서버에 저장하고 세션 식별자를 클라이언트에 제공하여 사용자를 식별합니다.
2.
세션 데이터 저장: 서버 측에 사용자와 관련된 데이터를 저장합니다. 예를 들어 로그인 상태, 사용자 선호 설정, 장바구니 등을 유지할 수 있습니다.
3.
보안: 세션은 쿠키에 저장되는 정보를 서버 측에서 관리하므로, 보안상의 이점이 있습니다. 클라이언트에서는 세션 식별자만을 가지고 있습니다.
express-session은 이러한 세션 관리와 관련된 작업을 쉽게 처리할 수 있도록 도와주는 유용한 미들웨어입니다.
multer
Node.js 서버에서 파일 업로드를 처리하기 위한 미들웨어
클라이언트에서 서버로 파일을 안전하게 전송하고 서버에서 이를 받아 처리할 때 사용됩니다. 주로 HTML 폼을 통해 이미지, 동영상, 문서 등 다양한 파일을 업로드할 때 유용합니다.
Multer는 multipart/form-data 형식의 폼 데이터를 처리하며, 이를 통해 파일 업로드를 가능케 합니다. 클라이언트가 파일을 서버로 전송하면 Multer가 이를 받아 저장하고, 서버에서는 업로드된 파일에 대한 정보를 제공합니다.
설치
npm install multer
Shell
복사
예시 코드
•
./routes/upload.js
•
./views/upload.ejs
•
app.js
•
./uploads 폴더 생성
프로젝트 생성
npm install -g express-generator
Shell
복사
express --view=ejs upload
Shell
복사
넌적스 템플릿 엔진 사용프로젝트 경로로 이동
cd upload
HTML
복사
의존성 설치
npm install
HTML
복사
서버 실행
npm start
HTML
복사
./routes/upload.js
const express = require('express');
const router = express.Router();
const multer = require('multer');
const path = require('path');
// 파일 업로드를 위한 Multer 설정
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/'); // 업로드된 파일의 저장 경로
},
filename: function (req, file, cb) {
cb(null, file.originalname); // 업로드된 파일의 원래 파일명으로 저장
}
});
const upload = multer({ storage: storage });
/* GET upload page. */
router.get('/', function(req, res, next) {
res.render('upload', { title: 'upload' });
});
// 파일 업로드를 처리하는 라우트
router.post('/', upload.single('image'), (req, res) => {
console.log(req.file);
res.send('ok');
});
module.exports = router;
JavaScript
복사
./views/upload.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" />
<button type="submit">Upload</button>
</form>
</body>
</html>
HTML
복사
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload'); // ✅ upload 라우터 추가
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/upload', uploadRouter); // ✅ upload 라우터 추가
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
JavaScript
복사
./uploads 폴더 생성
사용 목적
1.
파일 업로드 처리: Multer는 파일 업로드를 쉽게 처리할 수 있도록 도와줍니다. 클라이언트가 서버로 파일을 안전하게 전송하면, Multer는 이를 받아 저장하고 관련된 정보를 서버에 제공합니다.
2.
파일 업로드 설정: Multer를 사용하면 업로드된 파일의 저장 경로, 파일명 등을 사용자가 원하는 대로 설정할 수 있습니다.
3.
폼 데이터 다루기: Multer는 multipart/form-data 형식의 폼 데이터를 다룰 수 있어, 이미지, 동영상, 문서 등 다양한 파일 형식을 처리할 수 있습니다.
4.
다중 파일 업로드: Multer는 여러 파일을 동시에 업로드할 수 있도록 지원하며, 이를 통해 다중 파일 업로드를 구현할 수 있습니다.