[새싹x코딩온] 웹 개발자 부트캠프 과정 5주차 회고(1) | multer 모듈을 이용한 파일 업로드

1. 이번 목표:
    multer 모듈을 이용한 파일 업로드를 해보자!

 

2. 배운 내용 요약

  1. multer

Node.js에서 파일 업로드를 처리하기 위해 사용되는 미들웨어.
이미지 업로드, 사용자 파일 관리 등의 기능을 구현하는 데 적합

 

   1-1. 주요 특징

1. 멀티파트 데이터 처리
HTTP 요청 중 multipart/form-data로 전송된 데이터를 분석하고 파일을 서버에 저장

 2. 스토리지 설정
- 파일 저장 방식을 사용자 정의 할 수 있다.
- 기본적으로 두 가지 옵션을 제공.
     DiskStorage: 파일을 서버 디스크에 저장.
     MemoryStorage: 파일을 메모리에 버퍼로 저장.

3. 파일 필터링 및 제한
- 업로드할 파일의 유형 및 크기를 제한.
- 파일 검증 로직을 추가하여 비정상적인 요청을 차단.

4. Express와의 통합
Express 미들웨어로 쉽게 통합할 수 있어 요청 처리가 간단

 

  1-2. 설치

npm install multer
or
npm i multer

 

  1-3. 예제

const express = require('express');
const multer = require('multer');
const app = express();
const PORT = 8080;

// DiskStorage 설정
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/'); // 파일 저장 경로
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname); // 파일 이름 설정
  },
});

const upload = multer({ storage: storage });

// 단일 파일 업로드
app.post('/upload', upload.single('file'), (req, res) => {
  res.send('파일 업로드 성공');
});

// 여러 파일 업로드
app.post('/uploads', upload.array('files', 10), (req, res) => {
  res.send('여러 파일 업로드 성공');
});

// 여러 필드 업로드
app.post(
  '/upload-fields',
  upload.fields([
    { name: 'profilePic', maxCount: 1 }, // 필드 1
    { name: 'documents', maxCount: 3 }, // 필드 2
  ]),
  (req, res) => {
    console.log(req.files); // 객체 형태의 파일 정보
    res.send('필드별 파일 업로드 성공');
  }
);

app.listen(PORT, () => {
  console.log(PORT, '서버 실행 중...');
});

 

  1-4. 파일 크기 제한

const upload = multer({
  storage: storage,
  limits: { fileSize: 1024 * 1024 * 5 }, // 최대 5MB
});

 

  1-5. 파일 필터링

const upload = multer({
  storage: storage,
  fileFilter: (req, file, cb) => {
    if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
      cb(null, true); // 허용되는 파일
    } else {
      cb(new Error('잘못된 파일 형식'), false); // 허용되지 않는 파일
    }
  },
});

 

  2. multer mothod 비교

 

  2-1. single()

하나의 파일만 업로드하도록 처리.
업로드된 파일은 req.file 객체에 저장됨.
프로필 사진 업로드처럼 단일 파일만 필요할 때 사용.

app.post('/upload-single', upload.single('profilePic'), (req, res) => {
  console.log(req.file); // 단일 파일 정보
  /*
  req.file 구조:
  {
    fieldname: 'profilePic',
    originalname: 'example.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: 'uploads/',
    filename: '1669478493452-example.jpg',
    path: 'uploads/1669478493452-example.jpg',
    size: 1024
  }
  */
  res.send('단일 파일 업로드 성공');
});

 

  2-2. array()

하나의 필드에서 여러 파일을 업로드할 때 사용.
업로드된 파일은 req.files 배열에 저장됨.
갤러리 사진처럼 같은 입력 필드에서 여러 이미지를 업로드할 때 사용.

// 특정 필드(photos)에서 최대 5개의 파일 업로드 가능
app.post('/upload-array', upload.array('photos', 5), (req, res) => {
  console.log(req.files); // 배열 형태의 파일 정보
  /*
  req.files 구조:
  [
    {
      fieldname: 'photos',
      originalname: 'image1.jpg',
      encoding: '7bit',
      mimetype: 'image/jpeg',
      destination: 'uploads/',
      filename: '1669478493452-image1.jpg',
      path: 'uploads/1669478493452-image1.jpg',
      size: 2048
    },
    { ... }, // 두 번째 파일 정보
  ]
  */
  res.send('다중 파일 업로드 성공');
});

 

 

  2-3. fields()

여러 필드에서 각각 다른 이름으로 파일을 업로드할 때  사용.
업로드된 파일은 req.files 객체에 저장, 각 필드 이름을 키로 사용.
프로필 사진(profilePic)과 문서 파일(documents)을 같은 요청으로 업로드할 때 사용.

app.post(
  '/upload-fields',
  upload.fields([
    { name: 'profilePic', maxCount: 1 }, // 필드 1
    { name: 'documents', maxCount: 3 }, // 필드 2
  ]),
  (req, res) => {
    console.log(req.files); // 객체 형태의 파일 정보
    /*
    req.files 구조:
    {
      profilePic: [
        {
          fieldname: 'profilePic',
          originalname: 'avatar.jpg',
          encoding: '7bit',
          mimetype: 'image/jpeg',
          destination: 'uploads/',
          filename: '1669478493452-avatar.jpg',
          path: 'uploads/1669478493452-avatar.jpg',
          size: 1024
        }
      ],
      documents: [
        { ... }, // 첫 번째 문서 파일
        { ... }, // 두 번째 문서 파일
      ]
    }
    */
    res.send('필드별 파일 업로드 성공');
  }
);

 

  2-4. 비교

메서드	용도	반환 데이터 위치	데이터 구조
single()	하나의 파일 업로드	req.file	객체 (단일 파일 정보)
array()	하나의 필드 여러 파일 업로드	req.files	배열 (파일 목록)
fields()	여러 필드 각각 다른 이름으로 업로드	req.files	객체 (필드 이름별 배열로 파일 정보 분리)

 

 

 

 

3. 회고

미들웨어와 프레임워크, 엔진의 정확한 역할이나 개념에 대해 정립이 조금 부족한 것 같다.

미들웨어는 서버와 클라이언트 사이에서 요청과 응답을 처리하는 중간 계층인거란 걸 잘 알고 있지만, Express가 웹 어플리케이션 프레임워크이고, 미들웨어 구조를 기반으로 개발된다는 것이 이제야 명확해졌다.

esj는 Embedded JavaScript라는 이름에 걸맞게 HTML에 자바스크립트 코드를 삽임해서 동적인 콘텐츠를 생성한다는 것까지는 알겠지만, Express와 ejs는 무슨 관계일까에 대해 의문이었는데, Express환경에서 EJS를 뷰 엔진으로 설정하면 요청 처리 후 템플릿을 렌더링해서 클라이언트에 응답과 함께 HTML을 전송하는 개념인 것 같다.

 

ChatCPT에게 물어보니

미들웨어, Express, ejs의 연관성

1. 미들웨어와 Express:
   • Express의 핵심은 미들웨어입니다. 요청이 들어오면 여러 미들웨어를 거쳐 필요한 처리를 수행하고 응답합니다.
   • 인증, 데이터 파싱 등은 미들웨어로 구현됩니다.
2. Express와 EJS:
   • Express는 요청 처리 후, 데이터를 템플릿 엔진(EJS)과 결합해 클라이언트에 HTML로 반환합니다.
3. 미들웨어와 EJS:
   • 미들웨어는 데이터를 준비하거나 변환하고, EJS는 그 데이터를 HTML로 렌더링하여 최종적으로 클라이언트에 제공하는 역할을 합니다.

라고 한다. 한 문장으로 설명한다면 Express, 미들웨어, EJS를 서로 유기적으로 연결해서 웹 어플리케이션이 효육적이고 유연하게 구성될 수 있도록 하는 장점이 있다는 것 같다. 미들웨어 덕분에 로직을 분리하고 코드를 유지보수 할 수 있게 된 것 같다.

 

아직 프레임워크, 라이브러리 등 단어에 대한 개념이 머리에서 제대로 정립이 안 되고 헷갈리는 것 같은 기분이라 찝찝하다..