Express 개발 강좌, Multer를 이용한 파일 업로드 처리

현대 웹 애플리케이션에서는 사용자가 파일을 업로드하는 기능이 필수적입니다. Node.js를 기반으로 한 Express 프레임워크를 사용할 때, Multer라는 미들웨어를 통해 파일 업로드를 간편하게 처리할 수 있습니다. 이번 강좌에서는 Multer의 설치부터 파일 업로드 처리, 오류 처리, 업로드된 파일 관리까지 단계별로 자세히 설명하겠습니다.

1. Multer란?

Multer는 Node.js의 Express 프레임워크에서 파일 업로드를 처리하기 위해 만들어진 미들웨어입니다. Multipart/form-data 형식으로 전송된 파일을 쉽게 처리할 수 있도록 도와줍니다. Multer는 파일의 메타데이터와 파일 자체를 요청 객체(request)에 추가하여, 개발자가 이를 간편하게 다룰 수 있도록 지원합니다.

2. Multer 설치하기

우선, Multer를 사용하기 위해서는 npm을 통해 해당 패키지를 설치해야 합니다. 다음 명령어를 터미널에서 실행하여 Multer를 설치합니다:

npm install multer

3. Multer 설정하기

파일 업로드를 시작하기 전에 Multer를 설정해야 합니다. Multer는 파일 저장소를 선택할 수 있는 여러 가지 방법을 제공합니다. 이번 예제에서는 파일을 디스크에 저장하는 방법을 사용할 것입니다. 아래 코드를 참조해주세요:

const multer = require('multer');

// 스토리지 설정
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/'); // 업로드된 파일을 저장할 디렉토리
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' + file.originalname); // 파일 이름 설정
    }
});

// Multer 미들웨어 설정
const upload = multer({ storage: storage });

4. 파일 업로드 처리하기

이제 업로드된 파일을 처리할 API 라우트를 생성해보겠습니다. 비동기 처리 및 에러 처리를 포함하여 코드를 작성해야 합니다.

const express = require('express');
const app = express();
const port = 3000;

// Multer 설정 포함하기
const multer = require('multer');
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/'); // 업로드 디렉토리
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' + file.originalname); // 파일명 설정
    }
});
const upload = multer({ storage: storage });

// 파일 업로드 라우트 설정
app.post('/upload', upload.single('file'), (req, res) => {
    try {
        res.send('파일 업로드 성공: ' + req.file.filename); // 업로드 성공 시 메시지 보내기
    } catch (err) {
        res.status(500).send('파일 업로드 실패: ' + err.message); // 에러 시 메시지 보내기
    }
});

// 서버 실행
app.listen(port, () => {
    console.log(`서버가 http://localhost:${port}에서 실행 중입니다.`);
});

5. HTML 파일 업로드 폼 만들기

이제 클라이언트에서 파일을 업로드할 수 있도록 HTML 폼을 작성해보겠습니다. 아래는 기본적인 파일 업로드 폼입니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>파일 업로드</title>
</head>
<body>
    <h1>파일 업로드</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" required>
        <button type="submit">업로드</button>
    </form>
</body>
</html>

6. 파일 업로드 및 관리

파일이 업로드된 후, 서버에서 업로드된 파일을 관리하는 방법도 고려해야 합니다. 예를 들어, 사용자가 업로드한 파일을 목록으로 보여주거나, 삭제할 수 있는 기능을 추가할 수 있습니다. 다음은 업로드된 파일 목록을 가져오는 예시 코드입니다:

const fs = require('fs');
const path = require('path');

// 업로드된 파일 목록 가져오기 라우트
app.get('/files', (req, res) => {
    const directoryPath = path.join(__dirname, 'uploads/');

    fs.readdir(directoryPath, (err, files) => {
        if (err) {
            return res.status(500).send('디렉토리를 읽는 데 실패했습니다: ' + err.message);
        }
        res.send(files); // 파일 목록 응답
    });
});

7. 파일 다운로드 기능 추가하기

업로드된 파일을 사용자가 다운로드할 수 있도록 하는 것도 중요합니다. 다음 코드는 사용자가 특정 파일을 다운로드할 수 있는 기능을 추가한 것입니다:

app.get('/files/:filename', (req, res) => {
    const file = path.join(__dirname, 'uploads/', req.params.filename);
    res.download(file, (err) => {
        if (err) {
            res.status(500).send('파일 다운로드 실패: ' + err.message);
        }
    });
});

8. 에러 처리 및 검증

파일 업로드 시 파일 유형이나 크기를 제한하는 것이 중요합니다. 이를 위해 Multer의 옵션을 활용해서 미들웨어를 설정할 수 있습니다. 아래는 파일이 이미지 형식인지 확인하고, 크기를 1MB로 제한하는 예제입니다:

const fileFilter = (req, file, cb) => {
    const allowedTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
    if (allowedTypes.includes(file.mimetype)) {
        cb(null, true); // 허용된 타입
    } else {
        cb(new Error('허용되지 않는 파일 형식입니다.'), false); // 허용되지 않는 타입
    }
};

const upload = multer({
    storage: storage,
    limits: { fileSize: 1 * 1024 * 1024 }, // 크기 제한 (1MB)
    fileFilter: fileFilter // 파일 필터
});

9. 보안 문제 고려하기

파일 업로드 기능을 구현할 때는 보안 문제 또한 consideration할 필요가 있습니다. 사용자가 악성 코드를 포함한 파일을 업로드할 수 있도록 방지하기 위해, 파일 검증 및 스토리지 설정을 신중히 해야 합니다. 예를 들어, 업로드된 파일은 서버의 특정 위치에만 저장하고, 클라이언트가 직접 접근할 수 없는 환경을 만들어야 합니다.

10. 결론

이번 강좌에서는 Express 프레임워크와 Multer를 이용한 파일 업로드 처리 방법을 살펴보았습니다. 기본적인 업로드 기능 구현부터 파일 관리, 에러 처리 및 보안 문제까지 다루었습니다. 이러한 기능들을 실제 프로젝트에 적용하여 더욱 발전된 웹 애플리케이션을 만들어보세요!

참고 자료