Node.js - 파일 업로드: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! Node.js와 함께 파일 업로드의 세계로 다가오는 흥미로운 여정에 환영합니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 이 모험을 안내해드리는 것을 기쁜 마음으로 생각합니다. 코드를 한 줄도 적어보지 않았다면 걱정하지 마세요 - 우리는 처음부터 시작하여 조금씩 단계를 밟아갈 것입니다. 이 튜토리얼의 끝을 맺을 때, 프로처럼 파일 업로드를 할 수 있을 것입니다!

Node.js에서 파일 업로드 소개

들어가기 전에 파일 업로드가 왜 중요한지 이야기해보겠습니다. 사용자들이 사진을 공유할 수 있는 소셜 미디어 앱을 개발 중이라면, 또는 회사의 문서 관리 시스템을 만들고 있다면, 두 경우 모두 사용자들이 서버로 파일을 보내는 방법이 필요합니다. 그게 바로 파일 업로드입니다!

우리의 신뢰할 수 있는 자바스크립트 런타임인 Node.js는 파일 업로드를 처리하는 여러 가지 방법을 제공합니다. 오늘 우리는 두 가지 인기 있는 라이브러리인 Formidable과 Multer에 집중할 것입니다. 이 둘은 파일 업로드의 슈퍼 히어로로, 각자 독특한 능력을 가지고 있습니다!

Formidable: 첫 번째 파일 업로드 비서

Formidable는 무엇인가요?

Formidable은 항상 도와주는 그런 신뢰할 수 있는 친구입니다. Node.js 모듈로, 폼 데이터를 파싱하는 데 특히 유용하며, 파일 업로드를 쉽게 만들어줍니다. 그 사용법을 보겠습니다!

Formidable 설정

먼저 Formidable을 설치해야 합니다. 터미널을 열고 다음 명령어를 입력하세요:

npm install formidable

이 명령어는 슈퍼 히어로 가게에서 Formidable 복장을 고르는 것과 같습니다. 이제 업로드를 시작할 준비가 되었습니다!

Formidable로 기본 파일 업로드

간단한 서버를 만들어 파일 업로드를 처리할 수 있도록 하겠습니다. 다음은 코드입니다:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.parse(req, (err, fields, files) => {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload"><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

이 코드를 간단히 설명하자면:

1. http.createServer()를 사용하여 서버를 만듭니다.
2. URL이 '/fileupload'라면 Formidable을 사용하여 들어오는 폼을 파싱합니다.
3. 업로드된 파일을 일시적인 위치에서 영구적인 위치로 이동합니다.
4. URL이 다른 경우, 간단한 업로드 폼을 표시합니다.

여러 파일 업로드 처리

한 번에 여러 파일을 업로드하고 싶다면? 문제 없습니다! 코드를 다음과 같이 수정하면 됩니다:

const http = require('http');
const formidable = require('formidable');
const fs = require('fs');

http.createServer((req, res) => {
if (req.url == '/fileupload') {
const form = new formidable.IncomingForm();
form.multiples = true;
form.parse(req, (err, fields, files) => {
if (Array.isArray(files.filetoupload)) {
files.filetoupload.forEach((file) => {
const oldPath = file.filepath;
const newPath = 'C:/Users/YourName/uploads/' + file.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
});
} else {
const oldPath = files.filetoupload.filepath;
const newPath = 'C:/Users/YourName/uploads/' + files.filetoupload.originalFilename;
fs.rename(oldPath, newPath, (err) => {
if (err) throw err;
});
}
res.write('Files uploaded and moved!');
res.end();
});
} else {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
res.write('<input type="file" name="filetoupload" multiple><br>');
res.write('<input type="submit">');
res.write('</form>');
return res.end();
}
}).listen(8080);

이 코드의 주요 변경 사항은 다음과 같습니다:

1. form.multiples = true로 여러 파일 업로드를 허용합니다.
2. files.filetoupload가 배열인지 확인하고, 배열이면 forEach를 사용하여 각 파일을 처리합니다.
3. URL이 다른 경우, 멀티 업로드를 허용하는 폼을 표시합니다.

Multer: 새로운 아이

Multer 소개

이제 두 번째 파일 업로드 슈퍼 히어로를 만나보겠습니다: Multer. Multer는 Formidable의 더 cool하고 젊은 형제입니다. multipart/form-data를 처리하는 데 특화되어 있어 파일 업로드에 완벽합니다.

Multer 설정

Multer를 사용하기 위해 npm을 통해 설치합니다:

npm install multer

Multer로 기본 파일 업로드

간단한 예제를 통해 Multer를 사용하는 방법을 보겠습니다:

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

const app = express();

const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
});

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

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

app.post('/upload', upload.single('filetoupload'), (req, res, next) => {
const file = req.file;
if (!file) {
const error = new Error('Please upload a file');
error.httpStatusCode = 400;
return next(error);
}
res.send(file);
});

app.listen(3000, () => console.log('Server started on port 3000'));

이 코드를 간단히 설명하자면:

1. 저장소를 설정하여 Multer가 파일을 어디에 저장하고 어떻게 이름을 지정할지 정의합니다.
2. 업로드 인스턴스를 만듭니다.
3. 업로드 폼과 파일 업로드를 처리하는 라우트를 정의합니다.
4. 단일 파일 업로드를 처리합니다.

Multer로 여러 파일 업로드

Multer는 여러 파일 업로드를 매우 쉽게 처리할 수 있습니다. 다음과 같이 코드를 수정하면 됩니다:

app.post('/upload', upload.array('filetoupload', 12), (req, res, next) => {
const files = req.files;
if (!files) {
const error = new Error('Please choose files');
error.httpStatusCode = 400;
return next(error);
}
res.send(files);
});

이 코드의 주요 변경 사항은 다음과 같습니다:

1. upload.array('filetoupload', 12)를 사용하여 최대 12개의 파일 업로드를 허용합니다.

Formidable과 Multer 비교

이제 Formidable과 Multer를 모두 사용해보았으니 비교해보겠습니다:

기능	Formidable	Multer
사용 편의성	간단하고 직관적	더 많은 설정이 필요하지만 더 많은 제어 제공
통합	모든 Node.js 서버와 작동	Express와 설계되었음
파일 처리	파일과 필드 모두 처리 가능	파일 업로드에 특화
맞춤화	덜 유연	매우 유연
여러 파일 업로드	추가 코드 필요	내장 지원

결론

축하합니다! Node.js에서 파일 업로드를 처리하는 방법을 배워서 Node.js 기술을 한 단계 더 높였습니다. Formidable과 Multer 중에서 선택하여 파일 업로드 기능을 추가할 수 있습니다.

기억하시길, 연습이 완벽을 만듭니다. 작은 프로젝트를 만들어 파일 업로드를 사용해보세요 - 예를 들어, 간단한 이미지 공유 앱이나 문서 저장 시스템을 만들어보세요. 코드를 더 많이 작성할수록 이 개념에 익숙해질 것입니다.

행복하게 코딩하세요, 그리고 업로드가 항상 성공하길 바랍니다!

Credits: Image by storyset