자주 쓰는 Content-Type 유형 정리

프론트엔드에서 백엔드로 데이터를 보낼 때는 HTTP 프로토콜을 따라 요청을 보내야 합니다.

이때 전송하는 데이터의 형식(MIME Type)을 Content-Type이라는 HTTP 헤더를 통해 명시해야 합니다. MIME Type이란, 인터넷에서 전달되는 파일 또는 바이트 집합의 성격과 형식을 정해둔 것 입니다. 쉽게 말해, 회사에서 문서를 작성할 때 기획 문서는 기획서 양식, 성과 보고서는 성과 보고서 양식에 맞춰 제출하는 것과 비슷한 개념입니다.

이 글에서는 많이 쓰는 Content-Type 세 가지를 소개하려고 합니다.

전송 방식	Content-Type	비고
application/x-www-form-urlencoded	form의 전송 기본값	key=value 형식으로 전송
multipart/form-data	파일 업로드 시 사용	바이너리 데이터 포함 가능
application/json	JSON 데이터 전송	fetch 또는 Axios 필요

1. 폼 데이터 페이로드 (application/x-www-form-urlencoded 기본값)

기본적으로 <form> 태그는 application/x-www-form-urlencoded 방식으로 데이터를 전송합니다. 이 방식은 데이터를 key=value&key2=value2 형태로 변환하여 서버로 전송합니다.

<form action="/submit" method="POST" enctype="application/x-www-form-urlencoded">
    <input type="text" name="username" value="Alice">
    <input type="password" name="password" value="1234">
    <button type="submit">전송</button>
</form>

위 코드는 다음과 같은 형태로 변환되어 서버로 전송됩니다.

POST /submit HTTP/1.1
Content-Type: application/x-www-form-urlencoded

username=Alice&password=1234

2. 멀티파트

페이로드 (multipart/form-data)

파일 업로드가 form 내에 포함된 경우에는 enctype에 multipart/form-data를 지정해야 합니다. 일반적인 텍스트 데이터와 달리, 파일은 바이너리 데이터로 전송되므로 이 방식을 사용합니다.

<form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="text" name="username" value="Alice">
    <label for="file">파일 업로드:</label>
    <input type="file" id="file" name="file">
</form>

다음과 같이 boundary로 구별되어 데이터가 전송됩니다.

POST /upload HTTP/1.1
Content-Type: multipart/form-data; boundary=--boundary

--boundary
Content-Disposition: form-data; name="username"

Alice
--boundary
Content-Disposition: form-data; name="file"; filename="example.txt"
Content-Type: text/plain

(파일 내용)
--boundary--

3. JSON 페이로드 (application/json)

application/json 형식으로 데이터를 전송해야 할 때가 있습니다. 이 경우 <form> 태그의 enctype 속성만으로는 해결할 수 없으며, fetch나 Axios 같은 JavaScript API를 사용해야 합니다.

<form id="jsonForm">
    <input type="text" id="username" name="username" placeholder="아이디">
    <input type="password" id="password" name="password" placeholder="비밀번호">
    <button type="submit">전송</button>
</form>

document.getElementById("jsonForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 기본 폼 제출 동작 방지

    const data = {
        username: document.getElementById("username").value,
        password: document.getElementById("password").value
    };

    fetch("/api/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => console.log("Success:", data))
    .catch(error => console.error("Error:", error));
});

위 방식으로 데이터를 전송하면 다음과 같은 요청이 만들어집니다.

POST /api/login HTTP/1.1
Content-Type: application/json

{
    "username": "Alice",
    "password": "1234"
}