상식닷컴
로그인
가입하기
2026년 상식닷컴 선정 식당 & 카페 리스트
2025년 2026년 신상 호텔 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요
일주일 식단표 어플
자동 일주일 식단표 어플
안드로이드
아이폰
주식 & 코인 차트의 신
1000만원으로 2000만원 만들기 프로젝트
궁금한 상식 보기
미분의 기하적 의미는 무엇인가요?
권투에서의 훈련 중 가장 효과적인 근력 운동은 무엇인가요?
테니스에서의 '드롭샷'은 어떻게 사용하나요?
이터븀의 전자기적 특성이 중요한 이유는 무엇인가요?
난임 치료를 위한 정기적인 검진의 필요성은 무엇인가요?
아소르스 제도의 주요 관광 활동은 어떤 것이 있나요?
아소르스 제도의 전통적인 춤은 어떤 것이 있나요?
기면증은 유전적인 요소가 있나요?
기면증 환자에게 도움이 되는 앱이나 기술은 무엇인가요?
기면증과 관련된 법적 문제는 무엇이 있나요?
기면증 환자가 겪는 대인 관계의 어려움은 무엇인가요?
노르웨이의 대중교통 시스템은 어떻게 되어 있나요?
Previous
Next
수정하기 - Vercel 배포 시 파일 업로드 기능을 추가하는 방법은?
닉네임
비밀번호
제목
내용
[이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]
Vercel은 서버리스 플랫폼으로, 정적 사이트와 서버리스 함수(Functions)를 사용하여 백엔드 로직을 처리할 수 있습니다. 파일 업로드 기능을 구현하려면, 클라이언트에서 파일을 선택하고 서버리스 함수를 통해 그 파일을 처리하는 구조로 접근할 수 있습니다. 다음은 Vercel에서 파일 업로드 기능을 추가하는 방법에 대한 단계별 안내입니다. 1. 프로젝트 초기화 먼저, Vercel 프로젝트를 설정합니다. 새로운 프로젝트를 만들거나 기존 프로젝트를 사용할 수 있습니다. ```bash npx create-next-app my-upload-app cd my-upload-app ``` 2. 파일 업로드 폼 추가 클라이언트에서 파일을 업로드할 수 있는 폼을 만듭니다. `pages/index.js` 파일을 열고 다음과 같이 수정합니다: ```jsx import { useState } from 'react'; export default function Home() { const [file, setFile] = useState(null); const handleFileChange = (event) => { setFile(event.target.files[0]); }; const handleSubmit = async (event) => { event.preventDefault(); const formData = new <a href='https://sangseek.com/sangseeks/FormData/ko'>FormData</a>(); formData.append('file', file); const response = await fetch('/api/upload', { method: 'POST', body: formData, }); if (response.ok) { const data = await response.json(); console.log(data); } else { console.error('Upload failed.'); } }; return ( <div> <h1>File Upload</h1> <form onSubmit={handleSubmit}> <input type="file" onChange={handleFileChange} /> <button type="submit">Upload</button> </form> </div> ); } ``` 3. 서버리스 함수 생성 파일 업로드를 처리할 서버리스 함수를 만듭니다. `pages/api/upload.js` 파일을 생성하고 다음 코드를 추가합니다: ```javascript import formidable from 'formidable'; import fs from 'fs'; export const config = { api: { bodyParser: false, }, }; const uploadHandler = (req, res) => { const form = new formidable.IncomingForm(); form.parse(req, (err, fields, files) => { if (err) { res.status(500).json({ error: 'Error while uploading file' }); return; } // 파일 처리 로직 (예: 저장) const tempPath = files.file.path; const newPath = `./uploads/${files.file.name}`; fs.rename(tempPath, newPath, (err) => { if (err) { res.status(500).json({ error: 'File saving failed' }); return; } res.status(200).json({ message: 'File uploaded successfully' }); }); }); }; export default uploadHandler; ``` 4. 업로드 디렉토리 생성 `uploads` 디렉토리를 생성하여 파일을 저장할 위치를 마련합니다. 프로젝트 루트에 `uploads` 폴더를 생성하세요. ```bash mkdir uploads ``` 5. 배포 이제 변경 사항을 커밋하고 Vercel에 배포할 수 있습니다. Vercel CLI를 사용하거나 GitHub와 같은 플랫폼에 푸시하여 자동으로 배포할 수 있습니다. ```bash git add . git commit -m "Add file upload functionality" vercel deploy ``` 6. 파일 업로드 기능 테스트 배포가 완료되면, 웹 브라우저를 열고 제공된 URL에 접속하여 파일 업로드 기능을 테스트합니다. 파일을 선택하고 "Upload" 버튼을 클릭하여 파일이 성공적으로 업로드되는지 확인합니다. 주의사항 - Vercel은 서버리스 구조이므로, 업로드된 파일은 서버의 파일 시스템에 오래 저장되지 않습니다. 배포가 업데이트될 때마다 파일들이 사라질 수 있습니다. S3와 같은 클라우드 스토리지 서비스를 고려하<a href='https://sangseek.com/sangseeks/십시오/ko'>십시오</a>. - 파일의 크기 제한 및 <a href='https://sangseek.com/sangseeks/형식 검증/ko'>형식 검증</a>을 구현하는 것이 좋습니다. - 실제 환경에서는 업로드된 파일에 대한 보안 및 오류 처리 로직을 강화할 필요가 있습니다. 이 과정을 통해 Vercel 프로젝트에 간단한 파일 업로드 기능을 추가할 수 있습니다.
이용안내
커뮤니티 이용안내
×
- 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.
- 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.
- 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.
- 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.
수정하기
취소하기