0Pricing
JavaScript Academy · 강의

FormData 객체

양식에서 멀티파트 페이로드를 만듭니다.

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

FormData란 무엇인가요

FormData는 폼 필드와 해당 값을 나타내는 키/값 쌍을 구성하는 브라우저 API입니다. 파일을 포함한 데이터를 서버로 전송하기 위해 패키징하는 표준 방법입니다.

multipart/form-data로 인코딩되므로 이진 업로드를 지원합니다.

빈 FormData 만들기

빈 FormData를 만들고 append를 사용해 필드를 한 번에 하나씩 추가합니다.

const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');

console.log(data.get('username'));

폼 요소에서 만들기

<form> 요소를 생성자에 전달하면 이름이 지정된 모든 입력이 자동으로 수집됩니다. 가장 일반적인 사용 방법입니다.

const form = document.querySelector('#signup');
const data = new FormData(form);

for (const [key, value] of data.entries()) {
  console.log(key, value);
}

append와 set 비교

append는 키가 이미 존재하더라도 값을 추가하므로 키 하나에 여러 값을 사용할 수 있습니다. set은 해당 키의 기존 값을 모두 바꿉니다.

const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));

data.set('tag', 'only');
console.log(data.getAll('tag'));

값 읽기

get은 키의 첫 번째 값을 반환하고, getAll은 모든 값을 배열로 반환하며, has는 존재 여부를 확인합니다.

const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');

console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));

필드 삭제

delete는 키의 모든 값을 제거합니다. 전송하기 전에 필드를 제거할 때 유용합니다.

const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');

data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));

항목 순회

FormData는 반복할 수 있습니다. entries, keys, values() 또는 for...of 반복문을 사용해 모든 쌍을 순회합니다.

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

for (const key of data.keys()) {
  console.log('field: ' + key);
}

파일 추가하기

append는 값으로 File 또는 Blob을 받을 수 있습니다. 선택적인 세 번째 인수를 사용하면 서버로 전송할 파일 이름을 지정할 수 있습니다.

const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');

console.log(data.get('avatar').name);

다중 파트/폼 데이터가 필요한 이유

FormData는 다중 파트/폼 데이터로 직렬화되므로 하나의 요청 본문에 텍스트 필드와 이진 파일 콘텐츠를 모두 담을 수 있습니다. 따라서 파일 업로드에 가장 적합한 형식입니다.

const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');

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

객체로 변환하기

텍스트만 포함된 간단한 폼에서는 Object.fromEntries를 사용해 FormData를 일반 객체로 변환할 수 있습니다. 반복되는 키에 대해서는 값 하나만 남는다는 점에 유의하세요.

const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());

console.log(plain);

FormData가 중요한 이유

FormData는 HTML 폼과 네트워크 요청을 연결하는 다리입니다. 필드와 파일을 수집하고, 반복되는 키를 지원하며, 이진 데이터를 안전하게 인코딩합니다. 다음에는 FileReader로 파일 콘텐츠를 읽은 다음 fetch로 FormData를 전송합니다.

const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');

console.log([...data.keys()]);

간단히 확인하기

FormData에서 append와 set의 차이는 무엇인가요?

복습: FormData 객체

폼 데이터를 패키징하는 방법을 배웠습니다.

  • new FormData(form)은 이름이 지정된 입력을 자동으로 수집합니다.
  • append는 반복되는 키를 허용하고, set은 기존 값을 바꿉니다.
  • get, getAll, has로 읽고, entries로 순회합니다.
  • 다중 파트/폼 데이터로 인코딩되므로 파일과 이진 데이터를 지원합니다.

자주 묻는 질문

“FormData 객체” 강의는 무료인가요?

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

“FormData 객체”에서 뭘 배우나요?

양식에서 멀티파트 페이로드를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“FormData 객체” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. FormData 객체
  2. FileReader로 파일 읽기
  3. Blob과 객체 URL
  4. Fetch로 파일 업로드하기
← JavaScript Academy(으)로 돌아가기