Express 개발 강좌, 업로드한 파일의 메타데이터 처리

현대 웹 애플리케이션에서 파일 업로드는 매우 일반적인 기능입니다. 사용자는 종종 문서, 이미지, 비디오와 같은 파일을 서버에 업로드해야 합니다. Express.js는 Node.js 기반의 웹 애플리케이션 프레임워크로, 이러한 작업을 구현하는 데 적합한 도구입니다. 이번 강좌에서는 Express.js를 통해 업로드한 파일의 메타데이터를 처리하는 방법을 심도 있게 설명하겠습니다.

1. Express.js 소개

Express.js는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크로, 서버 사이드 애플리케이션 구축을 위해 필요한 기본 기능을 제공합니다. RESTful API를 쉽게 구현할 수 있는 기능과 미들웨어 기반의 아키텍처로 인해 많은 개발자들이 애용하고 있습니다.

2. 필요한 패키지 설치하기

파일 업로드 기능을 구현하기 위해 필요한 패키지를 설치하겠습니다. 가장 인기 있는 파일 업로드 Middleware인 multer를 사용하겠습니다. multer는 multipart/form-data를 처리하여, 파일을 쉽게 업로드할 수 있도록 도와줍니다. 

npm install express multer

3. 기본적인 Express 서버 설정

기본적인 Express 서버를 설정하겠습니다. 다음 코드를 사용하여 app.js라는 파일을 생성하고, Express 서버를 설정합니다. 


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

// multer 설정
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.get('/', (req, res) => {
    res.send('Hello, Express!');
});

// 파일 업로드 라우트
app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('파일이 업로드되지 않았습니다.');
    }
    res.send({
        message: '파일이 성공적으로 업로드되었습니다.',
        file: req.file,
    });
});

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

4. 파일 업로드 라우트 설명

위의 코드는 파일 업로드를 위한 라우트를 설정합니다. upload.single('file')은 클라이언트로부터 file이라는 이름의 파일을 업로드 받을 것을 기대하며, 업로드된 파일의 정보를 req.file에서 사용할 수 있습니다.업로드된 파일의 메타데이터는 req.file 객체에 포함됩니다. 이 객체에는 파일의 이름, 경로, 크기와 같은 정보가 포함되어 있습니다.

4.1. 메타데이터 처리

업로드한 파일에 대한 메타데이터를 처리하는 방법에 대해 더 깊이 살펴보겠습니다. 다음 코드를 통해 파일의 메타데이터를 JSON 형식으로 반환하도록 수정할 수 있습니다. 


app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('파일이 업로드되지 않았습니다.');
    }

    const metadata = {
        originalName: req.file.originalname,
        mimeType: req.file.mimetype,
        size: req.file.size,
        uploadDate: new Date(req.file.uploadDate || Date.now()),
        path: req.file.path,
    };

    res.send({
        message: '파일이 성공적으로 업로드되었습니다.',
        metadata: metadata,
    });
});

5. 클라이언트 측 파일 업로드 구현

이제 클라이언트 측에서 파일을 업로드하는 HTML 양식을 구현하겠습니다. 다음 코드를 사용하여 index.html 파일을 생성합니다. 






    
    
    파일 업로드


    
파일 업로드

6. 업로드한 파일의 메타데이터 구조

위 코드에서 업로드된 파일의 메타데이터는 다음과 같은 구조를 가집니다: 


{
    message: "파일이 성공적으로 업로드되었습니다.",
    metadata: {
        originalName: "example.png",
        mimeType: "image/png",
        size: 102456,
        uploadDate: "2023-01-01T00:00:00.000Z",
        path: "uploads/1234567890-example.png"
    }
}

7. 에러 핸들링

파일 업로드 시 다양한 에러 상황이 발생할 수 있습니다. 예를 들어 파일 크기가 너무 크거나 허용되지 않는 파일 형식이 업로드되는 경우입니다. 이를 처리하기 위해 multer의 설정에서 제한 조건을 추가할 수 있습니다. 


// 파일 크기 제한 (5MB 이하)
const upload = multer({
    storage: storage,
    limits: { fileSize: 5 * 1024 * 1024 },
    fileFilter: (req, file, cb) => {
        const fileTypes = /jpeg|jpg|png|gif/;
        const extname = fileTypes.test(file.mimetype);
        const mimetype = fileTypes.test(file.originalname.split('.').pop().toLowerCase());
        if (extname && mimetype) {
            return cb(null, true);
        }
        cb(new Error('허용되지 않는 파일 형식입니다.'));
    }
});

8. 실전 배포 및 최적화

이제 파일 업로드 기능이 완성되었습니다. 마지막 단계로는 이 기능을 실제 프로덕션 환경에 배포하고 최적화하는 것입니다. 이 과정에서는 다음과 같은 사항을 고려해야 합니다:

  • 파일 저장소: 클라우드 저장소 (예: AWS S3)를 사용할지, 로컬 파일 시스템에 저장할지를 결정합니다.
  • 보안: 업로드되는 파일의 유효성을 검사하여 악성 코드가 포함되지 않도록 합니다.
  • 성능: 여러 사용자가 동시에 업로드할 수 있도록 성능을 최적화합니다.

9. 결론

이번 강좌에서는 Express.js를 사용하여 파일 업로드 기능을 구현하고 업로드된 파일의 메타데이터를 처리하는 방법에 대해 설명했습니다. Express.js와 multer를 활용하면 간단하면서도 강력한 파일 업로드 기능을 구현할 수 있습니다. 완성된 애플리케이션을 바탕으로 추가적인 기능들을 고려하여 확장해보세요.

10. 추가 리소스