블로그-V3. Multipart/form-data 전송

클라이언트가 서버에게 MIME 타입이 image/png 파일을 보내고 싶다.

이미지 파일을 보내고 싶은 것이다.

 

 

1. 바이트로 변환 (직렬화)

 

실제로는 비트로 변환하는 것인데 http 통신은 8비트 단위로 끊어서 보내기 때문에

바이트 스트림이라고 한다.

 

이미지 파일을 바이트로 변환하면 기계어(0101..)로 바뀌게 된다.

 

이를 직렬화 되었다고 한다.

 

이 데이터를 바디에 담아서 fetch 전송하게 된다.

 

서버는 바이트를 받게 되는데

이 바이트가 이미지 파일인지 json 데이터인지 알 수가 없다.

 

얘가 어떤 타입인지 알아야 바디의 데이터를 역직렬화 할 수 있다.

 

그렇기 때문에 헤더에 MIME 타입을 보내줘야 한다.

 

서버가 헤더에 MIME 타입이 image/png 인 것을 확인하고

.png 파일로 변환한다.

 

.png 파일로 변환하는 것은 라이브러리가 해주기 때문에 어렵지 않다.

 

---

 

이게 기본인데 우리는 image/png 타입을 사용하지 않을 것이다.

 

통신에서 기본적으로 파일 전송은 Multipart/form-data 타입을 사용한다.

동영상, 사진 등 모든 파일을 전송할 때!!

 

왜 이 타입을 사용할까?

 

form 태그 내부에 일반적인 text와 file 등 여러 가지 타입이 섞여있다고 하자.

이 form 태그는 정해진 타입이 없다.

 

여러가지 타입이 섞여있는 데이터를 한 번에 전송할 수 있는 타입이 없어서

여러 번 따로 전송해야 하는 것이다.

 

이때 Multipart/form-data를 사용하면 한 번에 전송이 가능하다.

 

이 타입은 여러 가지 타입의 데이터를 다음과 같이 바디에 담는다.

 

 

만약 스프링으로 image/png를 보내면 스프링에서 이 타입을 어떻게 읽을까?

어떤 라이브러리를 사용하는지 모르겠다.

굳이 알 필요 없다.

 

Multipart/form-data로 전송하면 MultipartFile 타입으로 바로 받을 수 있기 때문이다.

 

이때 주의할 점이 있다.

 

내가 Multipart/form-data로 전송할 때는 header를 넣어주면 안 된다.

Multipart/form-data는 헤더의 Content-Type이 비어있기 때문이다.

그리고 바디에 Boundary를 사용해 같이 명시되어있다.

Boundary로 구분하여 파싱 한다.

 

약속이다!

 

바디에 Multipart/form-data 타입 데이터를 담아 보내면

스프링에서 MultipartFile 타입으로 받으면 끝난다.

 

만약 이 Multipart/form-data 데이터를 json으로 변환해서 보내면 어떻게 될까?

 

json을 전송하는 것이기 때문에 헤더에 MIME 타입을 application/json이라고 걸어줘야 하고,

서버에서 이를 역직렬화 해줘야 한다.

 

근데 Multipart/form-data는 사진을 들고 있기 때문에 json으로 직렬화하면

문자열로 변해버려서 데이터가 다 깨져버리게 된다.

 

내가 파일을 보내려면 json으로 직렬화하면 안 된다.

 

json으로 직렬화가 가능한 것은 text밖에 없다!!

 

그래서 우리는 이미지를 Multipart/form-data로 감싸서 전송해주기만 하면 된다.

그리고 서버는 json이 아니라 MultipartFile로 받으면 끝!

 

1. 헤더에 MIME 타입 적지 않기
2. json으로 변환하지 않기

 

 

[출처]

 

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩