파일 업로드는 웹 개발에서 자주 사용되는 기능입니다. 자바스크립트를 사용하여 파일 업로드를 구현하려면 미들웨어를 활용하는 것이 효과적입니다. 미들웨어는 서버와 클라이언트 사이에서 요청과 응답을 처리하는 기능을 담당합니다.
multer 미들웨어 설치하기
파일 업로드에는 multer라는 미들웨어를 사용할 수 있습니다. 먼저 npm을 사용하여 multer를 설치해야 합니다. 다음 명령을 터미널에 입력하여 multer를 설치합니다.
npm install multer
Express와 multer 미들웨어 사용하기
Express 프레임워크를 사용하여 파일 업로드를 구현해보겠습니다. 먼저 Express 앱을 생성하고 multer 미들웨어를 연결해야 합니다. 다음은 Express와 multer를 사용하여 기본적인 파일 업로드를 구현하는 예제입니다.
const express = require('express');
const multer = require('multer');
const app = express();
// 파일 업로드를 위한 multer 미들웨어 설정
const upload = multer({ dest: 'uploads/' });
// 파일 업로드를 처리하는 라우터
app.post('/upload', upload.single('file'), (req, res) => {
// 업로드된 파일 처리 로직 작성
// req.file을 통해 업로드된 파일에 접근할 수 있습니다.
res.send('파일 업로드 성공');
});
app.listen(3000, () => {
console.log('서버가 3000번 포트에서 실행 중입니다.');
});
위 예제에서는 Express 앱을 생성하고 multer 미들웨어를 upload 변수에 연결하였습니다. /upload 경로로 POST 요청이 들어오면 upload.single('file')을 통해 파일을 업로드하고, 업로드된 파일은 req.file을 통해 접근할 수 있습니다.
파일 업로드 HTML 폼 작성하기
이제 파일 업로드를 테스트할 HTML 폼을 작성해야 합니다. 파일을 업로드하기 위한 폼은 enctype 속성을 multipart/form-data로 설정해야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>파일 업로드 테스트</title>
</head>
<body>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" required>
<button type="submit">업로드</button>
</form>
</body>
</html>
위 HTML 폼에서는 action 속성으로 파일 업로드를 처리하는 라우터(/upload)를 지정하고, enctype 속성을 multipart/form-data로 설정하여 파일 업로드를 가능하게 합니다.
결론
이제 자바스크립트 미들웨어를 활용하여 파일 업로드를 구현하는 방법을 알아보았습니다. multer를 사용하여 파일 업로드를 처리하는 간단한 예제를 통해 파일 업로드 동작을 이해할 수 있었습니다. 파일 업로드는 웹 개발에서 자주 사용되는 기능이므로, 자바스크립트와 미들웨어를 잘 활용하여 서비스의 품질을 향상시킬 수 있습니다.
참고 자료: