미들웨어

미들웨어 (middleware)

Express.js 의 요청(request)과 응답(response) 사이의 작업을 수행하는 함수

미들웨어는 Express 애플리케이션의 요청-응답 사이클 동안 다양한 작업을 처리할 수 있으며, 각 미들웨어는 요청 객체(req), 응답 객체(res), 그리고 애플리케이션 요청-응답 주기를 제어하기 위해 호출되는 다음 미들웨어 함수를 나타내는 next 함수를 받습니다.

미들웨어의 특징

순차적 실행: 미들웨어는 코드에서 정의된 순서대로 순차적으로 실행됩니다.

요청-응답 주기 제어: 각 미들웨어는 요청과 응답 객체에 대한 제어를 가지며, 다음 미들웨어로 제어를 전달하거나 요청-응답 주기를 종료할 수 있습니다.

중간 처리 작업: 미들웨어는 요청과 응답을 중간에서 가로채어 수정하거나 추가 작업을 수행할 수 있습니다.

자주 사용되는 미들웨어

미들웨어	설명
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
복사

사용 목적

요청 데이터 파싱: 클라이언트가 폼을 통해 전송한 데이터나 JSON 형식의 데이터를 Express 애플리케이션에서 사용하려면 해당 데이터를 파싱해야 합니다. body-parser를 사용하면 이러한 데이터를 쉽게 파싱할 수 있습니다.

데이터 형식 지원: body-parser는 JSON 및 URL-encoded 형식의 데이터를 지원하며, 필요에 따라 옵션을 조절하여 다양한 데이터 형식을 처리할 수 있습니다.

미들웨어 형태: 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
복사

사용 목적

상태 추적: 쿠키는 클라이언트와 서버 간의 상태를 추적하는 데 사용됩니다. 사용자의 로그인 상태, 세션 관리, 사용자 선호 설정 등을 저장하여 유지할 수 있습니다.

개인화된 경험 제공: 쿠키를 사용하면 사용자에게 맞춤형 경험을 제공할 수 있습니다. 사용자의 선호, 테마, 언어 등을 저장하여 다음 방문 시에 반영할 수 있습니다.

인증 및 보안: 쿠키는 사용자를 식별하고 인증하기 위해 사용될 수 있습니다. 또한, 암호화된 쿠키를 사용하여 보안을 강화할 수 있습니다.

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();	모든 세션 데이터를 제거하여 로그아웃 등에 사용합니다.

사용 목적

인증 및 사용자 식별: 세션은 사용자를 식별하고 인증하기 위해 사용됩니다. 로그인한 사용자의 정보를 서버에 저장하고 세션 식별자를 클라이언트에 제공하여 사용자를 식별합니다.

세션 데이터 저장: 서버 측에 사용자와 관련된 데이터를 저장합니다. 예를 들어 로그인 상태, 사용자 선호 설정, 장바구니 등을 유지할 수 있습니다.

보안: 세션은 쿠키에 저장되는 정보를 서버 측에서 관리하므로, 보안상의 이점이 있습니다. 클라이언트에서는 세션 식별자만을 가지고 있습니다.

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
복사

넌적스 템플릿 엔진 사용

프로젝트 경로로 이동

HTML
복사

의존성 설치

npm install
HTML
복사

서버 실행

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 폴더 생성

사용 목적

파일 업로드 처리: Multer는 파일 업로드를 쉽게 처리할 수 있도록 도와줍니다. 클라이언트가 서버로 파일을 안전하게 전송하면, Multer는 이를 받아 저장하고 관련된 정보를 서버에 제공합니다.

파일 업로드 설정: Multer를 사용하면 업로드된 파일의 저장 경로, 파일명 등을 사용자가 원하는 대로 설정할 수 있습니다.

폼 데이터 다루기: Multer는 multipart/form-data 형식의 폼 데이터를 다룰 수 있어, 이미지, 동영상, 문서 등 다양한 파일 형식을 처리할 수 있습니다.

다중 파일 업로드: Multer는 여러 파일을 동시에 업로드할 수 있도록 지원하며, 이를 통해 다중 파일 업로드를 구현할 수 있습니다.