content-type이란 간단히 말해 보내는 자원의 형식을 명시하기 위해 헤더에 실리는 정보 이다
Content-Type 헤더는 현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타낸다.
// 주 타입이 text인 경우(텍스트)
일반 텍스트 : text/plain
CSS 코드 : text/css
HTML 코드 : text/html
JavaScript 코드 : text/javascript ...
// 주 타입이 image인 경우(이미지)
image/bmp : bmp 이미지
image/gif : gif 이미지
image/png : png 이미지 ...
// 주 타입이 audio인 경우(오디오)
audio/mp4 : mp4 오디오
audio/ogg : ogg 오디오 ...
// 주 타입이 video인 경우(비디오)
video/mp4 : mp4 비디오
video/H264 : H264 비디오 ...
우리가 이미 익숙하게 접하는 데이터 타입들이죠?
//위 타입들에 속하지 않는 것들은, 보통 application이라고 하는 주 타입에 속함.
// 주 타입이 application인 경우
application/json : JSON 데이터
application/octet-stream : 확인되지 않은 바이너리 파일 ...
// 바이너리 파일(binary file) : 텍스트 파일 이외의 파일들을 의미함
const newMember = {
name: 'Ming',
email: 'ming@fakemail.kr',
department: 'engineering',
};
fetch('https://learn.codeit.kr/api/members', {
method: 'POST',
headers: { // 추가된 부분
'Content-Type': 'application/json',
},
body: JSON.stringify(newMember),
})
.then((response) => response.text())
.then((result) => { console.log(result); });
Content-Type 헤더가 존재하면, 바디의 데이터를 직접 확인해서 그 타입을 추론하지 않아도 된다고 한다.
만약 이 Content-Type을 써주지 않으면, 서버에서 바디의 데이터가 어떤 타입인지를 확인하는 절차가 추가적으로 필요해 진다. 즉, 불필요한 비용이 발생하게 되는 것이다.
그리고 리스폰스의 경우에도 마찬가지라고 한다. 웹 브라우저에서 리스폰스를 받았는데 Content-Type 헤더의 값이 없으면 이 데이터가 무슨 타입인지 별도로 확인하고, 처리해줘야하는 상황이 생긴다.
그러니 반드시 처리해 주도록 하자!
👉🏻 참고 자료