이번 클론 코딩에서 내가 맡은 파트는 게시물 생성, 상세조회, 수정, 삭제이다.
기본적인 CRUD이지만 이번엔 이미지 업로드 기능도 추가로 구현해야 한다.
그래서 다른 조에 multer 사용 경험이 있는 분께 지식 동냥을 해가며 습득하고 있었는데
소통 오류로 다른 팀원이 먼저 기능 구현을 하여 깃헙의 프로젝트 repo에 pull request를 해버렸다.....
내가 직접 구현해보고 싶었는데 많이 아쉽다. 하지만 현재 구현되어 있는 기능은 single, 즉 한 장의 이미지 파일만 업로드가 가능하기에 내가multiple (다수의 이미지 파일 업로드) 기능을 적용해보기로 했다.
multer란?
node.js에서 express와 함께 사용되는 미들웨어 중 하나로 파일 업로드를 처리하기 위한 라이브러리이다.
multer를 사용하면 클라이언트가 서버로 전송한 파일을 쉽게 처리할 수 있다.
multer 설치
npm install multer
예시 코드 (multer single)
const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();
app.post('/upload', upload.single('file'), function(req, res) {
// 파일 업로드가 완료되면 실행되는 함수
console.log(req.file); // 업로드된 파일 정보 출력
res.send('파일 업로드가 완료되었습니다.');
});
app.listen(3000, function() {
console.log('서버가 시작되었습니다.');
});
예시 코드 (multer multiple)
const express = require('express');
const multer = require('multer');
const app = express();
// 업로드된 파일이 저장될 경로와 파일 이름 설정
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'uploads/');
},
filename: function(req, file, cb) {
cb(null, file.originalname);
}
});
// 파일 업로드를 처리하는 미들웨어 생성
const upload = multer({ storage: storage });
// 여러 개의 파일을 업로드할 때 사용하는 라우팅
app.post('/upload-multi', upload.array('files', 5), function(req, res) {
// 업로드된 파일 정보 출력
console.log(req.files);
res.send('파일 업로드가 완료되었습니다.');
});
// 각 필드별로 여러 개의 파일을 업로드할 때 사용하는 라우팅
app.post('/upload-multi-fields', upload.fields([
{ name: 'file1', maxCount: 5 },
{ name: 'file2', maxCount: 3 }
]), function(req, res) {
// 업로드된 파일 정보 출력
console.log(req.files);
res.send('파일 업로드가 완료되었습니다.');
});
app.listen(3000, function() {
console.log('서버가 시작되었습니다.');
});
처음엔 사용하기가 매우 까다로워 보였는데 하나씩 뜯어보니 그렇게 어려운 것 같지는 않았다.
그런데 텍스트에 비해 용량이 큰 사진이나 영상 같은 form data들이 왔다갔다 한다면
서버에 걸리는 부하가 엄청날 것 같다.
특히 동시 접속자가 수백, 수천만명씩 되는 인스타그램이나 유튜브 같은 서비스는 그런 대용량 트래픽을 어떻게 처리하는지 궁금해졌다. 이번 프로젝트를 통해 조금이라도 이해될 수 있도록 공부해봐야겠다.
'Development > TIL' 카테고리의 다른 글
type error (0) | 2023.05.17 |
---|---|
multer multiple 적용 (0) | 2023.05.16 |
웹 소켓 (feat. socket.io) (0) | 2023.05.13 |
주특기 토이프로젝트 회고 (0) | 2023.05.11 |
npm run build (feat. CORS 에러 패배) (0) | 2023.05.11 |