이번 강좌에서는 Express 환경에서 파일을 저장하고 관리하는 방법에 대해 설명하겠습니다. 현대 웹 애플리케이션에서 파일 업로드와 같은 기능은 매우 중요하며, Express.js는 이를 간편하게 구현할 수 있는 여러 가지 방법을 제공합니다. 이 글에서는 Multer라는 미들웨어를 사용하여 파일 업로드를 처리하고, Path 모듈을 통해 파일 경로를 관리하는 방법에 대해 배우겠습니다.

1. Express.js란?

Express.js는 Node.js를 위한 웹 애플리케이션 프레임워크로, 간단하고 안정적인 API를 제공하여 웹 애플리케이션 및 API를 개발하기 위한 최적의 선택입니다. 비슷한 프레임워크와 비교했을 때, Express는 적은 설정으로도 강력하고 유연한 웹 애플리케이션을 만들 수 있도록 도와줍니다.

2. 프로젝트 환경 설정

이 강좌를 시작하기 전에 필요한 환경을 설정하겠습니다. Node.js와 npm(노드 패키지 관리자)이 설치되어 있어야 합니다.

bash
# 프로젝트 폴더를 만들고 이동
mkdir express-file-upload
cd express-file-upload

# npm 프로젝트 초기화
npm init -y

# Express와 Multer 설치
npm install express multer

3. Express 서버 설정

먼저, Express 서버를 설정합니다. server.js라는 파일을 생성하고 아래의 코드를 작성합니다.

javascript
const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// Multer 설정
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'uploads/'); // 파일이 저장될 경로
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + path.extname(file.originalname)); // 날짜 + 원래 파일 확장자로 파일 이름 설정
    }
});

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

// 정적 파일 서비스
app.use('/uploads', express.static('uploads'));

// 루트 경로에 대한 GET 요청 처리
app.get('/', (req, res) => {
    res.send('
파일 업로드를 할 수 있는 페이지입니다.
');
});

// 파일 업로드 처리
app.post('/upload', upload.single('file'), (req, res) => {
    if (req.file) {
        res.send(`파일 업로드 성공: ${req.file.filename}`);
    } else {
        res.status(400).send('파일 업로드 실패.');
    }
});

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

코드 설명

• multer.diskStorage: 파일의 저장 경로와 파일 이름을 설정합니다.
• upload.single('file'): 포맷이 multipart/form-data인 요청에서 파일을 하나만 처리합니다.
• express.static: 지정한 폴더에 있는 파일을 정적 파일로 제공합니다.

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

파일 업로드를 위한 간단한 HTML 폼을 만들겠습니다. index.html 파일을 생성하고 아래 코드를 작성합니다.

html




    
    
    


    
파일 업로드
    

        
        업로드
    

HTML 폼 설명

• enctype="multipart/form-data": 파일 업로드를 위한 인코딩 타입입니다.
• method="post": 파일 전송에 POST 메서드를 사용합니다.

5. 서버 실행 및 파일 업로드 테스트

서버를 실행하려면 아래 명령어를 입력합니다.

bash
node server.js

웹 브라우저에서 http://localhost:3000에 접속하여 파일 업로드 폼을 사용해 보세요. 파일을 선택하고 업로드 버튼을 클릭하면, 파일이 uploads 폴더에 저장되고 파일 링크가 표시됩니다.

6. 업로드 파일 관리

업로드한 파일의 목록을 관리하고, 삭제하는 방법에 대해서도 알아보겠습니다. 아래는 파일 목록을 반환하고 삭제하는 API를 정의한 코드를 추가합니다.

javascript
const fs = require('fs');

// 파일 목록을 반환하는 라우트
app.get('/files', (req, res) => {
    fs.readdir('uploads', (err, files) => {
        if (err) {
            return res.status(500).send('파일을 읽는 데 문제가 발생했습니다.');
        }
        const fileList = files.map(file => `
${file} 삭제
`).join('');
        res.send(`
업로드된 파일 목록
${fileList}
`);
    });
});

// 파일 삭제하는 라우트
app.get('/delete/:filename', (req, res) => {
    const filename = req.params.filename;
    fs.unlink(`uploads/${filename}`, err => {
        if (err) {
            return res.status(500).send('파일 삭제에 실패했습니다.');
        }
        res.redirect('/files');
    });
});

업로드 파일 목록 확인하기

1. 파일 목록을 보려면 /files 경로에 접근하세요.
2. 각 파일 옆의 ‘삭제’ 링크를 클릭하여 파일을 삭제할 수 있습니다.

7. 오류 처리

파일 업로드를 처리할 때 다양한 오류가 발생할 수 있습니다. 따라서 적절한 오류 처리를 추가하는 것이 중요합니다. Multer에서 지원하는 오류 처리를 통해 올바르지 않은 파일 형식이나 파일 크기 초과 등의 오류를 관리할 수 있습니다.

javascript
const upload = multer({
    storage: storage,
    limits: { fileSize: 5 * 1024 * 1024 }, // 최대 5MB
    fileFilter: (req, file, cb) => {
        const filetypes = /jpeg|jpg|png|gif|pdf/;
        const mimetype = filetypes.test(file.mimetype);
        const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
        if (mimetype && extname) {
            return cb(null, true);
        }
        cb('Error: 파일 형식이 올바르지 않습니다.');
    }
});

오류 처리 설명

• limits: 업로드할 파일의 최대 크기를 제한합니다.
• fileFilter: 업로드할 수 있는 파일 형식을 제한합니다.

8. 정리

이번 강좌에서는 Express.js를 사용하여 파일을 업로드하고 관리하는 방법에 대해 알아보았습니다. Multer 미들웨어를 활용하여 파일 업로드 기능을 쉽게 구현할 수 있으며, Path 모듈을 통해 파일 경로를 안전하게 관리할 수 있습니다. 또한, 업로드한 파일의 목록을 보여주고 삭제하는 기능도 구현하였습니다. 이러한 기초적인 파일 관리 기능들은 다양한 웹 애플리케이션에서 필수적이므로, 여러분의 프로젝트에 쉽게 적용할 수 있기를 바랍니다.

이 강좌를 통해 Express.js를 활용한 파일 업로드 및 관리에 대한 이해가 깊어졌기를 바라며, 질문이나 추가 학습이 필요한 부분에 대해서는 자유롭게 댓글로 남겨주세요.

9. 부록

다음은 Express.js와 관련된 유용한 링크들입니다:

• Express.js 공식 문서
• Multer GitHub
• Node.js 공식 문서