Content-Type 정리

웹 개발을 하며 어쩔 수 없이 마주칠 수밖에 없는 Content-Type ..

 

Multipurpose Internet Mail Extensions(MIME)
MIME 이전, 텍스트 파일을 주고 받는 경우 별 문제가 없었다. 하지만 바이너리 파일(영상, 노래 등)을 보낼 때 아스키 표준으로는 전송이 불가능하여 바이너리 파일을 텍스트 파일로 변경해줄 필요성이 대두되었고, 이로써 나오게 된 인코딩 방식이다.

 

Content-Type 은

HTTP 통신에서의 데이터 타입을 의미한다. 원래 리소스의 타입을 나타내거나 응답에서 실제 콘텐츠의 타입을 제공하거나 요청 body에 담기는 데이터의 타입을 알려준다. 한번의 요청에 한 종류의 타입만 기재할 수 있다.

일반적으로 HTTP Request 는 

1. Request line
2. HTTP Header
3. Empty line
4. Message body

4부분으로 이뤄지며 4번의 body 부분의 타입이 바로 Content-Type 이다. 주로 header 에 Content-Type 을 담아서 요청을 보내주게 된다.

const handleSubmit = async (e) => {
    const response = await fetch(`${baseUrl}/user/login`, {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        user: {
          email: email,
          pw: pw,
        },
      }),
    });

지금껏 그냥 단순하게 application/json 위주의 타입으로 명시해서 보내곤 했는데 확실히 정리해줄 필요성을 느꼈다.

 

 

Multipart 형식

• multipart/form-data

파일을 전송하고자 할 때 사용

form data 를 submit 할 때 사용된다. 파일에 들어가는 정보(바이너리 정보)가 문자열로 바뀌어서 body에 담기는 것이다. 다양한 타입 종류를 한번에 요청 해야하는 상황에서도 서로 상이한 Content-Type 을 가진 대용량 파일, 텍스트...에 제한 없이 new FormData() 형태에 append(키, 데이터값)으로 넣어서 전송 가능하다.

 

 

Application 형식

• application/json

Restful API 를 사용하게 되면서 json 형태의 요청이 많아졌다

글자 그대로 json 형태이므로 { 키 : 값 } 형태를 가지고 있으며 키와 값 모두 문자열이 들어가야 한다. 그렇지 않으면 에러가 발생하는 경우가 있다.

 

• application/x-www-urlencoded

보내는 데이터를 URL 형식으로 인코딩하여 서버로 보내는 방식 

form 태그 안의 input 정보를 action에서 지정해준 서버로 POST 요청을 보낼 때 url 부분에 정보가 담긴 것을 본 적이 있을 것이다. 이렇듯 form 태그를 통한 POST 전송 방식의 기본이 되는 타입이다. 모든 브라우저에선 application/x-www-urlencoded 타입의 body 데이터를 자동으로 인코딩하도록 구현되어 있다. 그래서 클라이언트에서 보낸 요청 body가 서버로 보내기 전 인코딩 처리가 된다.

 

url 로 사용될 수 없는 특수문자의 경우 url 인코딩 규칙에 따라 아스키 코드와 %를 혼합한 문자가 대신 들어가게 된다. (%2F = /, %23 = #, 공백 = +)

쿼리 스트링 형식으로 키=값&키=값&... 으로 보내진다. url에 담기며 인코딩이 필요하므로 큰 데이터를 보내기엔 적합하지 않다.

 

• application/pdf
• application/zip
• applicaiton/x-javascript

 

 

Text 형식

• text/css
• text/xml
• text/javascript
• text/html
• text/plain

문서를 플레인 텍스트로 만들어 html 태그까지 모두 보여주는 타입 (이미지 X)

텍스트 형식에선 선택적인 매개변수인 charset 을 추가로 넣어줄 수 있다. 만약 별도의 charset이 없다면 ASCII 가 적용되며, 보통 UTF-8 로 설정해준다.

 

 

Audio 형식

• audio/mpeg
• audio/vnd.rn-realaudio