[ TIL ] Day 22 - Express 미들웨어 / 라우트 / Multer(파일 업로드)

🗓️ 수업 일자 : 2025.10.27

✨ 오늘의 수업 평가 :  [ GOOD ]  이 모든걸 이해한 나, 칭찬해 😎🚀

 

요청 작업에 대해서 이제 막 감이 생겼는데, 미들웨어를 추가 한다고 해서 살짝 겁먹었지만 생각보다 쉬운 개념이었다.

다만 현업에서 미들웨어를 10개 ~ 수십개까지 쓴다고 하니 작업물의 복잡도가 얼마나 될지 감이 안왔다 ㅎㅎㅎ

이미지 업로드 multer 작업도 꽤나 신기한 경험이었다.

업로드 한 파일은 그냥 그대로 저장되는 줄 알았는데 변환해서 저장된다니🤓  

 

오늘까지 진행한 내용을 바탕으로 오후에는 실습을 진행했는데, 

사실 Git 만져야한다니까 겁나서 자꾸 종이에다만 끼적이는 중.. 

git 너무 무서워 😭👻👽😈

 

 

📝  오늘 배운 내용  
- Express Middleware (미들웨어)

- Express Route (파일 분리)

- 파일 업로드 & 관리

 

---

1. Express Middleware(미들웨어)

Middleware(미들웨어)란?

• 리퀘스트와 리스폰스 사이에서 작업을 진행 해 주는 중간 처리 장치
• 미들웨어는 여러 개 적용 가능하며, 서비스에 따라 수십개가 사용되기도 함 (middleware 별도 폴더로 관리)
• 개별 적용할 때는 라우트 핸들러에 직접 사용하고, 전체 적용 / 특정 기준으로 적용 할 때는 app.use()를 활용함

 

 [ 기본구조 ]

• 함수명은 처리 동작에 대한 이름으로 작성
• 최소한 3개의 인자가 들어감 : req, res, next
• next() : 다음 미들웨어 혹은 라우트핸들러로 넘어갈 수 있도록 하는 함수로 미들웨어의 마지막에 반드시 작성해야함

[미들웨어 기본 구조]
function middleware(req, res, next) {
  // 필요한 작업 작성
  console.log('middleware on!');
  
  // 다음 미들웨어 혹은 라우트핸들러로 넘긴다는 의미
  next();
}

app.get('/', middleware, (req, res) => {
  console.log('GET on');
  res.json({ message: 'HelloWorld' });
});

미들웨어를 사용한 경우, 미들웨어가 먼저 실행 되고 나머지 작업이 실행 됨

 

 

[ 에러핸들러 구조 ]

• 함수명은 처리 동작에 대한 이름으로 작성
• 에러까지 포함하여 4개의 인자가 들어감 : err, req, res, next
• 모든 에러를 처리하는 것이 아니라, next(e)로 전달 된 에러만 처리 가능함
• 에러 핸들러는 미들웨어 사이에 쓰는 것이 아니라 "app.use()"안에 사용해야 모든 핸들러에 대해 적용되며,
  모든 작업이 끝난 뒤 마지막으로 등록(선언)해야 서버가 유지되며 에러를 처리 가능하다

// next(e) 로 전달 된 에러만 처리 가능한 미들웨어
function errorHandler(err, req, res, next) {

  if (err) {
    // err = undefined, null 인 경우
    return res.send('error check!');
  }

  res.send('알 수 없는 오류');
  
}

app.get('/', middlewares, (req,res) =>{
   ...
});

app.use(errorHandler);

[왼쪽] 에러가 발생하면 그대로 서비스가 멈춰버림 [오른] 에러핸들러를 통해 서버가 유지 되면서 에러를 출력함

 

 

[ 내장 미들웨어 ]

1. cors() : 교차 출처 리소스 공유, 즉 요청을 허용할 도메인(모두 / 특정 도메인) 셋팅 
2. express.json() : 서버에 요청할 때 body 중 JSON 형식의 데이터를 해석해서 req.body에 담아 처리
3. express.static() : 정적 파일을 불러오거나, 저장하는 등 파일 관리에 사용 됨 (이미지, css 등)
4. cookie-parser() : 웹사이트에서 발생하는 cookie 값을 해석하여 개발자가 사용할 수 있는 객체로 변환(=파싱) 해 줌 
5. morgan() : HTTP 요청 로그를 콘솔에 깔끔하게 출력 및 요청 흐름을 추적할 수 있게 도와줌
6. multer() : 파일 업로드 전용 미들웨어, 작업이 끝나면 파일이 서버에 저장 됨 (뒤에서 자세히 진행)

app.use(cors());
// 설정 없이 사용하면  모든 cross-origin 요청(클라이언트 / 서버 모두)에 대해 응답
// 특정 도메인을 하고 싶으면 별도 설정 필요

app.use(express.json());  // 전체 파일에서 json 형식으로 데이터를 처리 하겠다

app.use(express.static(폴더명));  // 폴더 안에 있는 정적파일에 접근하게 해 달라

app.use(cookieParser());  // 쿠키를 받아서 새로운 객체로 만들어줌

app.use(morgan('dev'));  // 개발 단계에서는 "dev"를 많이 사용

const upload = multer({dest : 'imgFile/'});
app.post('files', upload.single(...), (req,res)=>{});
// 저장할 공간을 {dest: } 를 통해 생성 후, 
// 요청 작업의 미들웨어로 사용

 

 

 

+추가  app.use() 

• 라우트핸들러에 공통으로 적용 할 미들웨어를 한번에 등록하여 사용 가능하다 
• 상단에 적용하면 작업이 실행 될 때 모두 적용이 되고, 하단에 적용하면 모든 작업의 값을 받아 처리하는 구조이다 

function loggingMiddleware(){
    // 모든 요청에 사용하는 미들웨어 생성
}

function nameMiddleware(){
    // "/users" 요청에서만 사용하는 미들웨어 생성
}

function errorHandler(){
    // 에러 요청에 대해 사용하는 미들웨어 생성
}


app.use(loggingMiddleware); 
// 전역 미들웨어 : 모든 요청을 시작할 때 적용

app.use('/users', nameMiddleware); 
// 특정 미들웨어 : "/users" 경로로 시작하는 모든 요청에 대해 미들웨어 적용


app.get( ... ); // loggingMiddleware 만 적용
app.post( ... );
app.patch('/users'); // loggingMiddleware, nameMiddleware 둘 다 적용되며 등록 한 순서대로 실행


app.use(errorHandler);
// 모든 결과(=에러)를 받아서 한번에 적용

 

 

 

2. Express Route - 파일 분리

- 적용 배경 : app.js에 작업을 모두 요청하면 파일이 불필요하게 길어지고 복잡해짐,
                   따라서 일정 기준에 따라 코드를 나눠서 oo_router.js로 관리하고 app.js는 접속에 필요한 중요 내용만 불러와 사용 

- 파일 분리 기준 : 큰 카테고리로 파일을 나눈 뒤, 다시 한번 "요청 경로"에 따라 한번 더 나누어 작업 선언

각 카테고리별로 파일을 나눠서 사용

 

 route 사용법

 1) route.js 파일 작성하기

import express from 'express';

const userRouter = express.Router();

userRouter.use((req, res, next) => {
  console.log('user용 미들웨어');
  next();
});

// 경로가 더이상 추가 되지 않는 요청에 대한 처리
userRouter
  .route('/')
  .get((req, res) => {
    res.json({ message: 'users 목록 보기' });
  })
  .post((req, res) => {
    res.json({ message: 'user 추가하기' });
  });

// 'id' 파라미터를 필요로 하는 요청에 대한 처리
userRouter
  .route('/:id')
  .patch((req, res) => {
    res.json({ message: 'user 수정하기' });
  })
  .delete((req, res) => {
    res.json({ message: 'user 삭제하기' });
  });

export default userRouter;

 

2) app.js 에서 rount.js 를 불러와 app.use() 를 통해 사용하기

import userRoute from "./userRoute.js";

app.use('/users', userRoute);

 

 

 

3. 파일 업로드 & 관리

Multer 사용하기

- HTML Form에 작성한 내용 중 "multipart/form-data" 형식의 데이터를 받아서 처리 해 주는 "미들웨어" 라이브러리

- 즉, HTML Form에서 입력한 파일을 서버로 전송하는데 도움을 줌

- 사용법 

1. 라이브러리형 미들웨이이므로 다운로드 한다 : npm install multer
2. 사용하는 곳에 import 한 뒤
   파일을 저장할 공간을 변수로 선언해 지정하고 POST 작업에 미들웨어로 사용한다

// 2-1. npm install multer 해서 설치 후 불러오기
import multer from 'multer';

// 2-2. multer 객체 만들기 -> 파일을 저장할 공간 설정
const upload = multer({ dest: 'imgFolder/' });

// 3. 파일 업로드 시 실행 될 내용 작성
app.post('/files', upload.single('attachment'), (req, res) => {

  const { filename } = req.file;

  // 업로드 후 clien가 접근 할 수 있는 경로를 저장하여 JSON으로 내보냄
  const path = `/files/${filename}`;

  res.json({ path });
});

// 4. 정적 파일을 접근할 때 사용할 경로를 지정 
// URL : .../files/1d5fs1da5dsf1  ⇒  저장소 : ../imgFolder/1d5fs1da5dsf1 
app.use('/files', express.static('imgFolder'));

    

   3. POST test를 진행하면 아래와 같이 파일명이 고유 이름으로 변환되어 저장된다.

저장 할 때 이미지의 이름이 "20251027_..."이었으나, multer에 의해 고유값인 "1278b3..."으로 바뀌고 확장자도 생략됨

 

- 파일 업로드 환경에 따라 다른 메서드 사용 

  1) 한 개의 파일 업로드 : upload.single('attachment')
  2) 배열로 되어 있는 목록 업로드 : upload.array('photos', 12)
  3) 객체를 써서 추가 정보를 같이 보내는 경우 :  upload.fields([{ name: 'aa', maxCount: 1 }, { name: 'bb', maxCount: 8 }])

 

 

 

클라우드 저장소 + 데이터 베이스 메타데이터 기록

- 파일이 지속적으로 쌓이면 데이터 서버에 무리가 옴 ⇒ 데이터는 클라우드에 저장하고, DB에는 데이터 기록을 남김

클라우드 저장소를 사용한 파일 관리 로직

 

 

 

---

 

📃 내일은 뭘 배울까 🤔

- Express back-dev 시작하기 (복습 & 실습)