FormData API: Ajax 기반 비동기 멀티파트 전송 구현
상위 맥락
03. 데이터 최적화와 비동기 < 04. 파일 업로드와 자원 관리 < 02. Spring MVC2 핵심 기술과 설계 < MVC < Spring < Web
핵심 정리
FormData API는 자바스크립트에서 파일과 텍스트 데이터를 하나의 multipart/form-data 요청으로 구성해 비동기로 전송하기 위한 브라우저 API입니다. 자료에서는 기존 HTML form 제출이 전체 페이지를 새로고침하는 한계를 보완하기 위해 Ajax와 FormData를 사용한다고 설명합니다.
동작 흐름
- 클라이언트에서
new FormData()로 가상의 폼 객체를 만듭니다. formData.append("file", file)로 파일을 추가합니다.- 필요한 설명이나 텍스트 값도 append로 함께 넣습니다.
- fetch API의 body에 FormData를 넣어 비동기 POST 요청을 보냅니다.
- 서버는 기존과 동일하게
@RequestParam MultipartFile로 파일을 받습니다. - 서버가 JSON 응답을 반환하면 클라이언트는
response.json()으로 결과를 처리합니다.
중요한 주의점
자료에서는 FormData를 fetch로 보낼 때 Content-Type을 직접 multipart/form-data로 지정하면 boundary 정보가 누락되어 서버가 파싱하지 못할 수 있다고 설명합니다.
FormData를 body에 넣으면 브라우저가 boundary를 포함한 Content-Type을 자동으로 구성하므로, 헤더를 수동으로 강제하지 않는 것이 핵심입니다.
응답 형식
비동기 요청은 보통 JSON 응답을 기대합니다. 따라서 서버 컨트롤러는 뷰 이름이나 redirect를 반환하기보다 @ResponseBody 또는 @RestController 기반으로 JSON 데이터를 반환해야 합니다.
한 문장 요약
FormData API는 파일과 일반 데이터를 multipart/form-data로 묶어 화면 새로고침 없이 Ajax로 전송하고, 서버의 MultipartFile 바인딩과 자연스럽게 연결되는 비동기 업로드 방식입니다.
핵심 연결
@RequestParam, @ResponseBody, MultipartFile와 함께 읽으면 좋습니다.