JavaScript Academy · 강의

Fetch로 파일 업로드하기

FormData로 파일을 서버에 전송합니다.

Fetch로 파일 업로드하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

가져오기를 사용한 파일 업로드

서버로 파일을 전송하려면 fetch를 사용해 FormData 본문을 POST합니다. 브라우저가 파일 콘텐츠를 포함한 multipart/form-data 인코딩을 대신 처리합니다.

FormData 구성하기

입력에서 파일을 가져와 다른 필드와 함께 FormData 객체에 추가합니다.

const file = document.querySelector('#picker').files[0];
const data = new FormData();
data.append('avatar', file);
data.append('userId', '42');

console.log(data.has('avatar'));

기본 POST

FormData를 fetch POST의 body로 전달합니다. 응답은 기다려서 처리할 수 있는 프라미스입니다.

async function upload(data) {
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: data
  });
  console.log(response.status);
}

Content-Type을 설정하지 마세요

흔히 하는 실수는 Content-Type을 직접 설정하는 것입니다. 멀티파트 경계 문자열을 포함해야 하므로 브라우저가 설정하도록 두세요. 직접 설정하면 업로드가 작동하지 않습니다.

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData
});

console.log('browser added the boundary automatically');

응답 읽기

성공적으로 업로드한 후 response.ok를 확인하고 본문을 파싱합니다. 본문은 보통 JSON입니다.

async function upload(data) {
  const response = await fetch('/api/upload', { method: 'POST', body: data });
  if (!response.ok) {
    throw new Error('upload failed: ' + response.status);
  }
  const result = await response.json();
  console.log(result);
}

오류 처리

호출을 try/catch로 감쌉니다. fetch는 네트워크 오류가 발생한 경우에만 거부하므로 HTTP 오류 상태를 확인하려면 response.ok를 검사해야 합니다.

async function upload(data) {
  try {
    const res = await fetch('/api/upload', { method: 'POST', body: data });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    console.log('uploaded');
  } catch (err) {
    console.log('error:', err.message);
  }
}

여러 파일 업로드하기

append를 사용해 같은 키 아래에 여러 파일을 추가하거나, 파일 목록을 순회하며 모든 파일을 추가합니다.

const files = document.querySelector('#picker').files;
const data = new FormData();
for (const file of files) {
  data.append('photos', file);
}

console.log(data.getAll('photos').length + ' files queued');

인증과 같은 헤더 추가하기

Authorization과 같은 헤더는 추가할 수 있지만 Content-Type은 추가하면 안 됩니다. 본문은 그대로 FormData입니다.

const response = await fetch('/api/upload', {
  method: 'POST',
  headers: { Authorization: 'Bearer token123' },
  body: formData
});

console.log(response.status);

생성한 블롭 전송하기

선택한 파일뿐만 아니라 브라우저에서 만든 데이터도 업로드할 수 있습니다. 파일 이름과 함께 블롭을 추가해 생성된 문서를 전송합니다.

const blob = new Blob([JSON.stringify({ ok: true })], {
  type: 'application/json'
});
const data = new FormData();
data.append('report', blob, 'report.json');

await fetch('/api/upload', { method: 'POST', body: data });
console.log('generated file sent');

업로드 취소하기

AbortController를 사용해 느린 업로드를 취소할 수 있습니다. 예를 들어 사용자가 다른 페이지로 이동하는 경우에 사용할 수 있습니다.

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
}).catch(e => console.log(e.name));

controller.abort();

이 방식이 중요한 이유

FormData와 가져오기를 결합하는 것은 파일을 업로드하는 현대적이고 표준적인 방법입니다. 필드와 파일을 추가하고, FormData를 POST하고, 올바른 경계와 함께 멀티파트로 인코딩하는 작업을 브라우저에 맡깁니다. 콘텐츠 유형을 직접 설정하지 말고, 항상 response.ok를 확인하며, 리소스를 정리하세요.

async function submitForm(formEl) {
  const data = new FormData(formEl);
  const res = await fetch('/submit', { method: 'POST', body: data });
  console.log('status', res.status);
}

간단히 확인하기

가져오기로 FormData를 POST할 때 Content-Type 헤더를 수동으로 설정하면 안 되는 이유는 무엇인가요? (NOT)

복습: 가져오기로 파일 업로드하기

서버로 파일을 전송하는 방법을 배웠습니다.

파일과 필드를 FormData에 추가한 다음 이를 가져오기의 body로 전달합니다.
Content-Type은 직접 설정하지 마세요. 브라우저가 멀티파트 경계를 추가합니다.
가져오기는 네트워크 오류가 발생한 경우에만 거부하므로 response.ok를 확인합니다.
여러 파일과 생성한 블롭을 전송할 수 있으며, AbortController로 업로드를 취소할 수도 있습니다.

자주 묻는 질문

“Fetch로 파일 업로드하기” 강의는 무료인가요?

네 — “Fetch로 파일 업로드하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Fetch로 파일 업로드하기”에서 뭘 배우나요?

FormData로 파일을 서버에 전송합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Fetch로 파일 업로드하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기