관련글 보기
Content type 'application/octet-stream' not supported
FormData 파일 전송 방법: Blob 그리고 JSON.stringify()
오늘은 인터넷 미디어 타입(MIME Type) 중 하나인 application/octet-stream에 대해서 알아보자.
MIME Type (Multipurpose Internet Mail Extensions Type)
MIME 타입은 인터넷 미디어 타입이라고도 불리우며 인터넷에서 전송되는 파일 또는 데이터의 형식을 나타내는 규격이다.
서버와 클라이언트가 데이터를 주고받을 때 이 데이터가 어떤 형식인지 알 수 있게 하여 올바른 처리를 돕는다.
본문에서 설명하고자 하는 application/octet-stream 처럼 일반적으로
타입/서브타입으로 구성되고 있으며 종류는 여러 가지가 있다.
text/html, application/json, image/png, video/mp4, multipart/form-data 등등.
application/json의 경우 application 타입이며 서브 타입이 json이라 JSON 형식임을 알 수 있고,
octet-stream의 경우는 이진 데이터 형식이다.
MIME Type의 종류는 굉장히 많으니 더 알아보고 싶은 분들께서는 MDN을 참고하시면 좋을 것 같다.
https://developer.mozilla.org/ko/docs/Web/HTTP/MIME_types
그럼 MIME Type은 Content Type인가?
application/json 또는 multipart/form-data는 서버로 API 요청을 할 때 Content Type에 자주 명시게주곤 했었다.
그러면 MIME 타입이 곧 Content Type인걸까...?
정확히는 Content Type은 HTTP 헤더에서 사용되는 MIME 타입의 역할을 한다고 보면 된다. (MIME 타입을 사용하는 HTTP 헤더 필드)
클라이언트가 서버에 요청할 때 보내는 데이터의 형식, 즉 MIME 타입을 나타내는 것.
서버에서는 이 헤더를 통해서 데이터 형식을 파악하고 처리한다.
const file = new Blob(data, { type: "application/json" };
const formData = new FormData();
formData.append("file", file);
그럼 만약에 타입이 "application/json"이라 명시한 데이터를 FormData에 싣고
HTTP 헤더의 Content-Type을 임의로 text/html 등으로 변경하면 서버에서는 어떤 형식으로 인지될까?
결과적으로는 Content Type 헤더가 우선된다고 한다.
아무리 Blob의 타입을 application/json 타입으로 지정했더라도 HTTP 요청의 Content-Type이 text/html로 설정되어 있다면, 서버는 text/html로 인식하고 처리한다. 서버에서 파일을 어떻게 처리하는지 방식에 따라 두 가지 타입이 일치하지 않으면 오류가 발생할 수도 있으니 꼭 Content-Type 헤더와 파일의 실제 MIME 타입을 일치시켜야 파싱 오류를 피할 수 있다.
application/octet-stream
본론으로 돌아와서 MIME 타입 중 application 타입의 octet-stream은 대체 뭘까?
json은 JSON 형식이고 octet-stream은 이진 데이터 형식이다. (데이터를 0과 1의 조합으로 표현하는 형식)
고의적으로 명시해주지 않아도 서버-클라이언트 간에 데이터 전송 시 특정한 파일 형식이 명확하지 않을 때 (잘 알려지지 않은 이진파일일 경우) 사용된다고 하니, 저번에 서버 에러가 발생했을 때 octet-stream으로 전송된 이유가 여기 있었더라 :)
파일 형식이 정해지지 않은 이러한 특성때문에 텍스트, 이미지, 비디오 등 어떤 파일이든 전송할 수 있다.
브라우저 또한 octet-stream을 만나면 기본적으로 이 파일을 다운로드해야 하는 데이터로 간주하며 또한 파일 형식이 지정되지 않았기 때문에 파일을 받은 쪽에서 따로 데이터를 해석해야 한다고 한다.
이번 경험을 통해서 서버와 통신을 할 때 Content Type을 알맞게 명시해 주는 것이 얼마나 중요한지 깨달았다.
협업해서 작업을 할 때는 서버에서도 파일 데이터를 어떻게 처리하는지 여쭤보고 더 명확하게 코드를 짜야겠다고 느꼈다.
'Frontend' 카테고리의 다른 글
Styled Component: attr 속성 추가하기, hover, 커스텀 css 추가 등 (0) | 2024.11.27 |
---|---|
JSP에서 자바스크립트 템플릿 리터럴 쉽게 사용하기 (0) | 2024.10.20 |