Node.js 파일 시스템을 활용한 이미지 업로드 및 다운로드 기능 구현하기 📷

웹 개발을 배우는 여러분, 오늘은 Node.js의 파일 시스템을 이용해 어떻게 이미지를 업로드하고 다운로드할 수 있는지 알아보겠습니다. 이 과정을 통해, 여러분은 웹 애플리케이션에서 사용자가 이미지를 업로드하고, 그 이미지를 서버에 저장한 후 다시 사용자에게 제공하는 방법을 배울 수 있습니다.

이미지 업로드하기

먼저, 이미지를 업로드하는 기능을 만들어봅시다. 이를 위해 express와 multer라는 두 개의 npm 패키지를 사용할 것입니다. express는 Node.js의 웹 애플리케이션 프레임워크이며, multer는 파일 업로드를 위한 미들웨어입니다.

1. 패키지 설치하기:

   npm install express multer
   

2. 서버 설정하기:

   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, file.fieldname + '-' + Date.now())
     }
   });
   
   const upload = multer({ storage: storage });
   
   app.post('/upload', upload.single('image'), (req, res) => {
     res.send('이미지가 성공적으로 업로드되었습니다!');
   });
   
   app.listen(port, () => {
     console.log(`서버가 http://localhost:${port} 에서 실행중입니다.`);
   });
   

이 코드는 /upload 경로로 POST 요청이 오면, uploads/ 폴더에 이미지를 저장합니다. 이미지 파일은 image라는 필드 이름으로 전송되어야 합니다.

이미지 다운로드하기

이제 사용자가 업로드한 이미지를 다운로드하는 기능을 구현해봅시다. 이를 위해 fs 모듈을 사용할 것입니다. fs는 Node.js의 내장 모듈로, 파일 시스템에 접근할 수 있게 해줍니다.

1. 이미지 다운로드 경로 설정하기:

   const fs = require('fs');
   const path = require('path');
   
   app.get('/download/:imageName', (req, res) => {
     const imageName = req.params.imageName;
     const directoryPath = path.join(__dirname, 'uploads/');
     const filePath = path.join(directoryPath, imageName);
   
     res.download(filePath, imageName, (err) => {
       if (err) {
         res.status(500).send({
           message: "파일을 다운로드하는 동안 오류가 발생했습니다."
         });
       }
     });
   });
   

이 코드는 /download/:imageName 경로로 GET 요청이 오면, uploads/ 폴더에서 :imageName에 해당하는 파일을 찾아 사용자에게 다운로드합니다.

여러분이 오늘 배운 내용을 통해, Node.js에서 이미지 업로드 및 다운로드 기능을 구현하는 방법을 이해하셨길 바랍니다. 이 기술을 활용하여 여러분만의 웹 애플리케이션에 멋진 기능을 추가해보세요!