본문 바로가기
Dev.Basic/컴퓨터 공학

[HTTP] Content-Type

by superpil 2021. 8. 16.

목차

Spring boot로 파일 다운로드를 구현 하던 중 Content-Type을 보게 되었다.

Content-Type? Content-Type?? Content-Type???????????? 컨텐트 타입????????????

 

HTTP Header에 Conent-Type을 이래저래 지정하고 File을 Byte으로 읽어서 응답하면 브라우저에서 다운 받을 수 있는 것 같은데......

Content-Type에 대한 개념이 없으니 코드를 봐도 이해할 수 없다.

그래서 먼저 Content-Type을 공부하고 기능 구현을 하기로 했다.

 

개념

Content-Type이란,

HTTP 통신에서 전송되는 데이터의 타입을 나타내는 header정보 중 하나 이다.

Content-Type에 따라 데이터를 받는 측에서는 데이터를 어떻게 처리해야 할 지 판단한다.

 

여기서 "데이터를 받는 측"은 Request(대표적으로 브라우저) 또는 Response(대표적으로 웹서버) 둘다 포함 된다.

 

Request Header Content-Type

만약, 브라우저에서 웹서버로 이미지 데이터(일반텍스트)를 보낼경우 Request Header에 Content-Type은 를 지정해서 보낸다.

 

Response Header Content-Type

반대로 웹서버에서 브라우저로 데이터(이미지 파일)를 보낼경우 Response Header에 Content-Type은 image/svg를 지정해서 보낸다.

 

이렇게 "데이터를 받는 측"에서는 Content-Type를 확인 후 데이터를 어떻게 분석, 파싱할지 정하고 처리한다.

간단하게 말하면 Content-Type으로 요청 또는 응답의 데이터가 어떤 형식인지 판단 할 수 있다.

 

특징

Content-Type Header가 없다면

특정 data(img, viedo 등)를 Content-Type없이 보내면 data를 받는 쪽에서는 단순 텍스트 데이터로 받는다.

 

HTTP GET메소드에서 Content-Type

HTTP메소드에서 GET방식은 value=text 형식으로 보내지기 때문에 Content-Type은 필요없다.

HTTP메소드에 POST, PUT처럼 Body에 data를 보낼때 Content-Type이 필요하다.

axios를 사용해 클라이언트가 서버에서 API요청 시 Content-Type를 application/json으로 지정한다.

 

MIME

Content-Type의 종류를 알기 전에 먼저 MIME에 대한 지식이 필요하다.

그 이유는 Content-Type은 표준 MIME에 포함된 내용이다.

 

우선 MIME이란, Multipurpose Internet Mail Extensions약자로

전자 우편을 위한 인터넷 표준 포맷이다. 전자우편은 7비트 ASCII 문자를 사용하여 전송되기 때문에, 8비트 이상의 코드를 사용하는 문자나 이진 파일들은 MIME 포맷으로 변환되어 SMTP로 전송된다. 실질적으로 SMTP로 전송되는 대부분의 전자 우편은 MIME 형식이다. MIME 표준에 정의된 content types은 HTTP와 같은 통신 프로토콜에서 사용되며, 점차 그 중요성이 커지고 있다.
- 위키백과 -

MIME은 대략적인 개념만 알고 넘어가자.

중요한점은 HTTP통신에서 Content-Type은 MIME표준에 정의된 것을 사용한다는 점 이다.

 

MIME은 여기까지만 알고 Pass!

아! 그리고 MIME을 '마임'으로 읽는 것 같다.

 

문법

type/subtype

문법은 매~우 간단하다.

/로 구분되며 type은 카테고리를 나타내며 subtype은 개별 혹은 멀티파트 타입을 나타낸다.

쉽게 생각하면 type은 주분류, subtype은 주분류에서 나눈 종류로 생각하면 된다.

또한, 스페이스는 허용되지 않고 대소문자를 구분하지 않지만 통상적으로 소문자로 쓰여진다.

 

예를 들어, 데이터가 이미지일 경우 Content-Type에 type은 imge가 된다.

imge에서도 png, jpg, gif 등 다양한 확장자가 있으며, subtype에 imge에 맞는 확장자를 나타낸다.

만약, png이미지를 전송한다면 Content-Type은 image/png가 된다.

 

종류

문서의 종류가 수 없이 많듯 Content-Type의 종류도 상당히 많다.

그중에서 웹 개발에 있어 가장 중요한 Type만 살펴보자.

 

Content-Type: application/octet-stream

  1. 이 타입은 이진 파일의 기본 타입이다.
  2. 브라우저에서 보통 자동으로 실행하지 않거나 실행해야 할지 묻는다.
  3. Content-Disposition값이 attachment와 함께 설정되면 브라우저는 파일을 저장 또는 다른이름으로 저장 여부를 체크 한다.

 

문자

  1. Content-Type: text/plain

텍스트 파일의 기본 타입이다.

 

이미지

  1. Content-Type: image/png
  2. Content-Type: image/Jpeg
  3. Content-Type: image/gif
  4. Content-Type: image/webp

브라우저는 해당 컨텐트를 이미지로 취급한다.

 

자바스크립트

  1. Content-Type: text/javascript

브라우저는 Content를 Javascript문서로 취급한다.

 

멀티파트

  1. Content-Type: multipart/form-data

<form>태그를 사용해 브라우저에서 서버로 전송할 때 사용 한다.

Content-Disposition과 Content-Type은 HTTP 표준이지만 일부 구형 브라우저에서는 다르게 동작할 수 도 있음을 주의해야한다.

 

Reference

  1. https://webstone.tistory.com/66
  2. https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types
  3. http://www.webmadang.net/community/community.do?action=read&boardid=5001&page=1&seq=3 
  4. https://velog.io/@kim_sunnnny/what-is-applicationoctet-stream
  5. https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Content-Type

댓글