자바스크립트 FormData 데이터 전송 알아보기

자바스크립트에서 서버에 데이터를 전달해주는 API(인터페이스) FormData에 대하여 알아보겠습니다.

! FormData는 무엇인가?

자바스크립트를 사용하여 데이터를 서버에 보낼 수 있으며 Ajax 방식, 비동기식으로 데이터나 파일 모두 전송 가능하다는 점이 장점입니다. 최근 FormData가 많이 사용되는 이유는 비동기식 통신으로 <form></form> 태그를 직접 사용하지 않아도 되기 때문입니다.

- key/value 방식으로 입력폼에 값을 쉽게 추가할 수 있음
- AJAX 비동기으로 사용이 가능
- 데이터 및 파일 전송이 가능

# FormData 메소드 알아보기

아래는 FormData에 사용되는 메소드 목록입니다. 데이터를 추가하거나 삭제, 출력 등이 가능한 명령어입니다. 하나씩 알아보겠습니다.

@ append(key, value)
데이터 키와 값을 추가합니다. 입력폼에 값을 쉽게 추가할 수 있죠.


@ delete(key)
추가된 데이터를 삭제합니다.


@ has(key)
특정 값을 가지고 있는지 확인할 때 사용합니다.


@ entries()
현재 가지고 있는 데이터의 값을 배열로 반환합니다.

@ values()
이것도 가지고 있는 값을 모두 반환합니다.


@ get(key)
키와 매핑된 값을 가져옵니다.


@ set(key, value)
데이터의 값을 설정합니다. 또한 기존 설정된 값을 변경할 수도 있죠. append()는 안되므로 set()을 사용합니다.


파일도 전송이 가능합니다. enctype="multipart/form-data"처럼 인코딩 타입 사용이 가능하죠.

IE 10 이상의 브라우저에서 지원됩니다.