[javascript] formdata 전송에 대하여

 

form이란 뭘까요?

form은 사용자에게 입력을 받은 데이터, 양식인데요. 주로 회원가입, 아니면 상품등록, 포스트등록 CRUD가 이루어지는 사용자와 애플리케이션의 중간 관문입니다.

백엔드에 프론트엔드단에서 받은 formdata를 전송해줄때 formdata객체를 만들어서 받아온 정보들을 넘겨주는데요. 이 formdata라는 특별한 객체에 대하여 알아 보겠습니다.

1. Formdata와 content-type

formdata객체를 MDN문서에서는 form 필드과 값을 key/value 쌍으로 생성한다고 합니다. 이 formdata에 대해 잘 이해하기 위해서 POST에 대해 잘 알아야하는데요. HTTP POST 요청은 서버로 데이터 전송을 하여 등록을 요청하는 것입니다. CRUD의 Create인 것이죠.
POST 요청시 콘텐츠유형을 정해주고 전송하게 되는데요. 리소스의 미디어타입을 나타내려고 사용합니다.

- application/x-www-form-urlencoded: &로 분리되고, = 기호로 값과 키를 연결하는 key-value tuple로 인코딩되는 값
- multipart/form-data : 바이너리 데이터
- text/plain

단순한 텍스트가 아니라 복잡한 데이터인 경우 예를들어 이미지, 파일 등의 데이터를 전송할때 content-type을 multipart/form-data로 설정해야합니다.

 

** 바이너리 데이터란?

기본적으로 모든 데이터는 바이너리 데이터이지만, 일반적으로 string 형식은 텍스트파일로 변형해서 사용합니다. 그렇기 때문에 통칭 바이너리 파일이라는 말은 텍스트가 아닌 파일을 의미하는 것으로, 컴퓨터에 저장 및 처리를 위해 이진형식으로 인코딩된 데이터를 말합니다. 보통 일반적인 텍스트가 아닌 이미지, 미디어 파일들을 바이너리 데이터라고 합니다. 

 

2. Formdata 생성

formdata객체는 다음과 같이 생성해줍니다.

const form = new FormData();
// 이런식으로 데이터를 key/value 쌍으로 추가해줍니다.
formData.append(name, value);

FormData()메소드로 만든 form 데이터는 일반적인 console.log로 안에 있는 값을 확인할 수 없습니다. 그럼 form데이터에 append된 키와 값을 어떻게 조회할 수 있을까요?

FormData의 메소드인 FormData.entries()를 이용하거나 FormData.getAll()을 이용해서 조회할 수 있습니다.