Content-Type 헤더

리퀘스트와 리스폰스는 헤드와 바디로 되어있다. 

 

헤드에는 여러가지 있는데 그 중 Content-Type 은 뭘까?

 

 

Content-Type 헤더

 

현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타낸다.

 

리퀘스트 또는 리스폰스의 바디에는 HTML, JavaScript 그리고 JSON 데이터 외에도 이미지 영상까지 많은 것들이 있다.

 

바로 이러한 데이터들의 타입 정보가 'Content - Type' 헤더에 담겨 있다. 이 'Content - Type 헤더는 '주 타입(main type) / 서브 타입(sub type) ' 형식으로 되어있따.

 

주 타입의 종류

1. 주 타입이 text인 경우(텍스트) 

• 일반 텍스트 : text/plain
• CSS 코드: text/css
• HTML 코드: text/html
• JavaScript 코드: text/javascript

2. 주 타입이 image인 경우(이미지)

• bmp이미지: image/bmp
• gif이미지: image/gif
• png이미지: image/png

3. 주 타입이 audio인 경우(오디오)

• mp4 오디오: audio/mp4
• ogg 오디오: audo/ogg

4. 주 타입이 video인 경우(비디오)

• mp4 비디오: video/mp4
• H264 비디오: video/H264

5. 주 타입이 application인 경우

• JSON 데이터: application/json
• 확인되지 않은 바이너리 파일: application/octet-stream

octet-stream : 컴퓨터에서는 모든 파일이 0과 1의 조합으로 이루어져 있다. 근데 0과 1의 조합이 우리가 읽을 수 있는 텍스트로 변환이 가능한 경우도 있고, 그렇지 않은 경우도 있다. 일반적으로 이렇게 텍스트 파일 이외의 파일들을 바이너리 파일이라고 한다.  이 중에서도 확장자가 .png, .mp4 등의 특정 확장자의 포맷에 해당되지 않는 데이터들을 보통 application/octet-stream 이라고 한다.

 

보통 이 글이 들어가 있으면 사용자에게 '다운로드 받으시겠습니까' 같은 alert가 뜬다.

 

Content - Type 헤더가 필요한 이유

 Content - Type 헤더가 존재하면, 바디의 데이터를 직접 확인해서 그 타입을 추론하지 않아도 되기 때문이다. 이로써 불필요한 비용 발생을 방지할 수 있다.

 

사용 예시

객체 안에 headers 객체를 추구한 뒤 그안에

'Content-Type':application/json' 을 넣어준다.

const newMember = {
    name: 'jiho',
    email: 'jiholine@nver.com',
    department: "engineer2"
};

fetch('요청보낼 url 주소',{
    method : 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body : JSON.stringify(newMember)
})
.then((response) => response.text())
.then((result) => console.log(result));

 

참고자료:

https://www.iana.org/assignments/media-types/media-types.xhtml