자바스크립트와 Zeit Now를 이용한 파일 업로드 및 다운로드 애플리케이션 구축하기

10 Nov 2023

javascript

지금은 클라우드 서비스 시대입니다. 많은 사용자들이 파일을 업로드하고 다운로드하는 기능을 제공하는 웹 애플리케이션을 찾고 있습니다. 이번 글에서는 자바스크립트와 Zeit Now를 이용하여 파일 업로드 및 다운로드 애플리케이션을 구축하는 방법을 알아보겠습니다.

1. 프로젝트 설정

먼저, 프로젝트를 설정해야 합니다. Zeit Now는 정적 웹 사이트를 호스팅하는 데 사용되는 서비스입니다.

Zeit Now CLI를 설치합니다.
```
npm install -g now
```
프로젝트 디렉토리를 생성하고 설정 파일인 now.json을 생성합니다.
```
mkdir file-uploader
cd file-uploader
touch now.json
```

now.json 파일에 다음을 추가합니다.

{
  "version": 2,
  "builds": [
 { "src": "*.js", "use": "@now/node-server" }
  ],
  "routes": [
 { "src": "/(.*)", "dest": "/index.js" }
  ]
}

2. 파일 업로드 및 다운로드 기능 구현

Express를 사용하여 웹 서버를 생성합니다. ```javascript const express = require(‘express’); const multer = require(‘multer’);

const app = express(); const upload = multer({ dest: ‘uploads/’ });

app.use(express.static(‘uploads’));

app.post(‘/upload’, upload.single(‘file’), (req, res) => { res.json({ message: ‘File uploaded successfully’ }); });

app.get(‘/download/:filename’, (req, res) => { const { filename } = req.params; res.download(uploads/${filename}); });

// 웹 서버 실행 app.listen(3000, () => { console.log(‘Server is running on port 3000’); });

2. 위 코드는 Express를 사용하여 파일 업로드와 다운로드 기능을 구현한 것입니다. 파일은 `uploads` 폴더에 저장됩니다. 업로드된 파일은 `/upload` 엔드포인트로 POST 요청을 보내야 합니다. 다운로드는 `/download/:filename` 엔드포인트에서 파일 이름을 파라미터로 받아와 해당 파일을 다운로드합니다.

## 3. Zeit Now로 배포하기

1. `now.json` 파일에 다음을 추가합니다.
```json
{
  "functions": {
    "api": {
      "memory": 512
    }
  },
  "env": {
    "PORT": 3000
  }
}

애플리케이션을 Zeit Now로 배포합니다.
```
now
```
배포된 애플리케이션의 URL로 접속하여 파일 업로드 및 다운로드 기능을 사용할 수 있습니다.

마무리

이번 글에서는 자바스크립트와 Zeit Now를 이용하여 파일 업로드 및 다운로드 애플리케이션을 구축하는 방법을 알아보았습니다. 클라우드 서비스를 활용하여 손쉽게 파일 업로드 및 다운로드 기능을 구현할 수 있습니다.

#javascript #zeitnow