[Express 웹 서버 만들기] (2) 미들웨어 종류 & multer 사용하기

<본 블로그는 Node.js 교과서를 참고해서 공부하며 작성하였습니다 :-)>

 

🎀 다양한 미들웨어

🌈 dotenv

: .env 파일을 읽어서 process.env로 만든다

 

🌈 morgan

: 로그 출력

ex) combined, common, short, tiny

// dev
[HTTP 메서드] [주소] [HTTP 상태 코드] [응답 속도]-[응답 바이트]

 

🌈 static

: 정적인 파일들을 제공하는 라우터 역할

: 함수의 인수로 정적 파일들이 담겨 있는 폴더를 지정한다

 

🌈 body-parser

: 요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만들어주는 미들웨어

: 폼 데이터나 AJAX 데이터 처리

// 요청의 본문이 버퍼 데이터 일 때
app.use(bodyParser.raw());

// 텍스트 데이터일 때 해석
app.use(bodyParser.text());

// false : 노드의 querystring 모듈을 사용하여 쿼리스트링을 해석
// true : 노드의 qs 모듈을 사용하여 쿼리스트링을 해석
{ extended: false }

 

🌈 cookie-parser

: 요청에 동봉된 쿠키를 해석해 req.cookies 객체로 만든다

res.cookie(키, 값, 옵션)

 

🌈 express-session

: 세션 관리용 미들웨어

: 세션을 구현하거나 특정 사용자를 위한 데이터를 임시적으로 저장해둘 때 매우 유용

app.use(session({
  // 요청이 올 때 세션에 수정 사항이 생기지 않더라도 다시 저장할지 설정
  resave: false,
  // 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정
  saveUninitialized: false,
  // 쿠키를 서명하는데 secret 값 필요
  secret: process.env.COOKIE_SECRET,
  // tptus znzldp eogks tjfwjd
  cookie: {
    // 클라이언트에서 쿠키 확인 못함
    httpOnly: true,
    // https 가 아닌 환경에서도 사용 가능
    secure: false,
    // => 배포시 https 적용 true 설정이 좋음
  },
  name: "session-cookie",
}));

 

🌈 multer

: 이미지, 동영상 등을 비롯한 여러 가지 파일들을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어

: 멀티파트란 enctype이 multipart/form-data 폼을 통해 업로드하는 데이터의 형식 

 

🎀 multer 로 이미지 업로드하기

🌈 app.js

// express : http 모듈 내장되어서 서버의 역할
const express = require("express");
const app = express();
// process.env 관리
const dotenv = require("dotenv");
// 미들웨어
const cookieParser = require("cookie-parser");
const session = require("express-session");
const morgan = require("morgan");
const multer = require("multer");
const fs = require("fs");
// 파일 경로
const path = require("path");
const { fstat } = require("fs");
require("dotenv").config();

dotenv.config();
// 서버가 실행될 포트
// app.set("키, 값") : 데이터 저장
app.set("port", process.env.PORT || 8000);

// dev : [HTTP 메서드][주소][HTTP 상태 코드][응답 코드]-[응답 바이트]
app.use(morgan("dev"));
app.use("/", express.static(path.join(__dirname, "public")));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(session({
  // 요청이 올 때 세션에 수정 사항이 생기지 않더라도 다시 저장할지 설정
  resave: false,
  // 세션에 저장할 내역이 없더라도 처음부터 세션을 생성할지 설정
  saveUninitialized: false,
  // 쿠키를 서명하는데 secret 값 필요
  secret: process.env.COOKIE_SECRET,
  // tptus znzldp eogks tjfwjd
  cookie: {
    // 클라이언트에서 쿠키 확인 못함
    httpOnly: true,
    // https 가 아닌 환경에서도 사용 가능
    secure: false,
    // => 배포시 https 적용 true 설정이 좋음
  },
  name: "session-cookie",
}));

// multer
try {
  fs.readdirSync("uplads");
} catch (error) {
  console.error("uploads 폴더가 없어 uploads 폴더 생성함");
  fs.mkdirSync("uploads");
}

const upload = multer({
  // 어디에(destination) 어떤 이름(filename)으로 저장할지
  storage: multer.diskStorage({
    destination(req, file, done) {
      done(null, "uploads/");
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname);
      // 파일명+현재시간.확장자 파일명으로 업로드
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  // 업로드에 대한 제한 사항
  // 파일 사이즈(fileSize, 바이트 단위)
  limits: { fileSize: 5 * 1024 * 1024 },
});

// 미들웨어 : 요청과 응답을 조정
// 요청, 응답, 다음 미들웨어로 넘어가기
app.get("/upload", (req, res) => {
  res.sendFile(path.join(__dirname, "multipart.html"));
});

app.post("/upload",
  upload.fields([{ name: "image1" }, { name: "image2" }]),
  (req, res) => {
    console.log(req.filies, req.body);
    res.send("ok");
  },);
app.use((req, res, next) => {
  console.log("모든 요청에 다 실행됨");
  next();
});

app.get("/", (req, res, next) => {
  console.log("GET / 요청에서만 실행");
  next();
}, (req, res) => {
  throw new Error("에러는 에러 처리 미들웨어로 간다");
});

app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send(err.message);
});

// HTTP 웹 서버와 동일
app.listen(app.get("port"), () => {
  console.log(app.get("port"), "빈 포트에서 대기중");
});

 

🌈 multipart.html

<form action="/upload" method="post" enctype="multipart/form">
    <input type="file" name="image1" />
    <input type="file" name="image2" />
    <input type="text" name="title" />
    <button type="submit">업로드</button>
</form>