[API 통신] Application/x-www-form-urlencoded VS Application/json 도대체 이거 뭘까?

이 글은 https://apidog.com/blog/x-www-form-urlencoded-vs-json/ 을 요약해서 썼습니다.

 

여기서 상식

---

 URL 인코딩이란 웹 브라우저나 서버가 URL에 포함된 특수 문자를 안전하게 전송할 수 있도록 변환하는 방식이다. URL에 공백, &, %, # 같은 문자가 포함될 수 있는데, 이 문자를 포함한 데이터를 안전하게 전송하기 위해 URL 인코딩이 필요하다.

 

원리 : URL 인코딩은 ASCII 문자만 허용하는 URL의 특성에 맞춰, 허용되지 않는 문자를 퍼센트 기호(%)로 시작하는 16진수 코드로 변환한다. 예를 들어, 공백(스페이스)은 %20, 앰퍼샌드(&)는 %26으로 인코딩된다.

Hello World! → Hello%20World%21
param1=value&param2=test → param1%3Dvalue%26param2%3Dtest

---

application/ 접두사는 MIME 타입(Multipurpose Internet Mail Extensions) 표기법에서 데이터의 유형을 나타내는 방식이다. MIME 타입은 인터넷에서 전송되는 파일이나 데이터의 형식을 명시하여 클라이언트와 서버가 데이터를 올바르게 해석하고 처리할 수 있도록 한다.

1. application/: 이 접두사는 "애플리케이션 데이터"라는 의미를 가진다. 즉, 데이터가 단순한 텍스트나 이미지가 아니라 특정 애플리케이션에서 처리할 목적으로 만들어진 데이터라는 것을 나타낸다.
2. 예시:
   • application/json: JSON 형식의 데이터를 가리킨다. 웹 애플리케이션이 JSON 데이터를 처리할 때 사용된다.
   • application/x-www-form-urlencoded: HTML 폼 데이터가 URL 인코딩된 형태로 전송될 때 사용되는 MIME 타입이다.

다른 MIME 타입 예시:

• text/plain: 단순한 텍스트 데이터
• image/png: PNG 이미지 데이터
• audio/mpeg: MP3 오디오 데이터

---

웹 개발 환경에서 클라이언트와 서버 간에 데이터를 전송하는 방식 2가지가 있다. 두 가지 형식은 application/x-www-form-urlencoded 와 application/json 가 있다.

1. Application/x-www-form-urlencoded

application/x-www-form-urlencoded 형식은 HTML 폼의 기본 인코딩이다. 이 형식을 사용하여 데이터를 보내면 키-값 쌍이 쿼리 문자열 형식으로 변환된다. 각 키-값 쌍은 앰퍼샌드(&)로 구분되고 키와 값은 URL 인코딩된다. 

 

application/x-www-form-urlencoded의 구조는 아래와 같다.

name=John+Doe&age=30&city=New+York

특히 HTML에서 <form> 태그를 사용한 전송 방식에는 특수문자를 처리하기 위해 application/x-www-form-urlencoded 형식으로 데이터를 전환한다.

 

1. application/x-www-form-urlencoded 사용 방법

• HTML 양식 : <form> 태그의 enctype 속성을 설정하지 않으면 기본값으로 application/x-www-form-urlencoded가 적용된다. 이 기본값은 HTML 양식이 서버로 데이터를 전송할 때 자동으로 선택된다.
• 간단한 데이터 구조: 이 방식은 이름-값 쌍을 전송하는 데 적합하며, 일반적으로 입력 필드가 많지 않고 데이터가 단순할 때 효율적이다. 예를 들어, 사용자 이름과 비밀번호처럼 단순한 입력값을 서버에 전달할 때 적합하다.

<form action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">로그인</button>
</form>

위의 양식에서 데이터를 전송하면 username=사용자명&password=비밀번호 형식으로 인코딩되어 전송된다.

 

2. application/x-www-form-urlencoded 장점

• Widely Supported: 거의 모든 서버가 x-www-form-urlencoded를 지원하여 호환성이 좋다.
• Compactness: 일반적으로 JSON에 비해 크기가 작기 때문에 간단한 데이터 전송에 효율적입니다.

3. application/x-www-form-urlencoded 단점

• Limited Structure: application/x-www-form-urlencoded는 이름-값 쌍으로 데이터를 전송하는 간단한 구조를 기반으로 한다. 이 방식은 단순한 데이터, 예를 들어 name=John&age=30과 같이 1단계로 된 키-값 형태를 처리하는 데 적합하다. 하지만, 데이터가 중첩된 객체나 배열을 포함하는 복잡한 계층 구조일 경우, 이 방식은 그 구조를 표현하기 어렵다.

단순한 데이터

username=John&password=1234

 

복잡한 데이터

{ "user": { "name": "John", "age": 30 }, 
  "roles": ["admin", "user"] 
}

위 데이터를 전송해야 한다면, 이름-값 쌍으로 표현하는 것이 매우 번거롭고 불편할 수 있다. JSON 같은 형식이 더 효율적이다.

• URL Encoding Overhead: URL 인코딩이 필요하면 데이터 처리가 복잡해질 수 있으며, 특히 특수 문자가 포함될 경우 쉽지 않다. 

원래 데이터: name=John Doe&comment=Hello, world!
URL 인코딩 후: name=John%20Doe&comment=Hello%2C%20world%21

application/x-www-form-urlencoded는 모든 데이터 값을 URL에 안전하게 포함하기 위해 URL 인코딩을 사용해야 한다. 이 과정에서 특수 문자(&, =, 공백 등)가 %`와 16진수 코드로 변환되는데, 이 변환은 데이터 크기를 늘리고 처리 비용을 증가시킨다.

 

2. Application/json이란 무엇인가요?

이와 비교해 application/json 포맷은 사람이 이해하기 쉽고 작성하기 편하며, 기계가 데이터를 분석하고 생성하기에도 간편한 가벼운 데이터 교환 방식이다. 이 포맷은 중첩된 객체나 배열 같은 복잡한 데이터 구조를 자연스럽게 표현할 수 있다. 그리고 더 유연하고 풍부한 데이터 구조를 지원한다.

 

application/json의 구조는 아래와 같다.

{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

JSON형식으로 많이들 보았을 것이다.

 

1. Application/json 사용 방법

• RESTful API: JSON은 JavaScript 프레임워크와 쉽게 통합할 수 있고 구조적으로 유연하기 때문에 대부분의 RESTful API에서 표준 형식으로 사용된다. 이 덕분에 클라이언트와 서버 간에 데이터 전송이 간편하고 효율적이며, JSON의 단순한 구조 덕분에 데이터 처리와 변환도 빠르고 직관적이다.

• 복잡한 데이터 처리: 데이터가 중첩된 객체나 배열을 포함하는 등 더 복잡한 경우, JSON은 그 정보를 명확하고 체계적으로 표현할 수 있는 방법을 제공한다. JSON은 데이터 구조를 트리 형태로 쉽게 나타내며, 객체 내 객체나 배열을 직관적으로 관리할 수 있어 복잡한 데이터도 간단하게 구성할 수 있다.

{
  "user": {
    "name": "John",
    "age": 30,
    "address": {
      "street": "123 Main St",
      "city": "New York"
    }
  },
  "roles": ["admin", "editor"]
}

아무튼 간단하다.

 

2. Application/json 장점

• Versatile Structure: JSON은 복잡한 데이터 유형을 쉽게 표현할 수 있어 풍부한 데이터를 처리하는 애플리케이션에 이상적이다.
• Compatibility with JavaScript: JSON은 JavaScript 언어의 일부 문법을 기반으로 만들어졌기 때문에 , JavaScript 코드 내에서 직접 사용할 수 있어 개발자들이 별도의 변환 과정 없이 데이터를 쉽게 다룰 수 있다. 이로 인해 JavaScript 애플리케이션과 JSON 간의 원활한 통합이 가능하며, 클라이언트-서버 간 데이터 교환이 더 효율적으로 이루어진다. 예를 들어, JSON 데이터는 JavaScript의 JSON.parse() 메서드를 사용해 객체로 변환하거나 JSON.stringify()를 사용해 문자열로 변환할 수 있다.

3. Application/json 단점

• Larger Payload: JSON은 URL 인코딩된 데이터에 비해 더 많은 데이터를 포함하게 될 수 있다. 특히, 단순한 키-값 쌍을 전송할 때는 JSON 형식이 더 큰 페이로드를 만들 수 있다. 이는 JSON의 구조적 요소(예: 중괄호, 따옴표 등)가 데이터 크기를 늘리기 때문이다.
• Parsing Overhead: 서버는 JSON을 파싱해야 하며, 이는 간단한 키-값 쌍 처리에 비해 일부 성능 오버헤드가 발생할 수 있습니다

Java에서 JSON 파싱

import com.google.gson.Gson;
class Person {
    String name;
    int age;
}
Gson gson = new Gson();
String jsonString = "{\"name\": \"John\", \"age\": 30}";
Person person = gson.fromJson(jsonString, Person.class);
System.out.println(person.name);  // "John"

 

3. Application/x-www-form-urlencoded 대 Application/json: 주요 차이점

특징	application/x-www-form-urlencoded	application/json
데이터 구조	key-value 쌍	계층적 및 구조화된 데이터
부호화	URL 인코딩됨	텍스트 기반, 사람이 읽을 수 있음
Payload 크기	일반적으로 간단한 데이터의 경우 더 작음	중첩된 구조로 더 클 수 있음.
일반적인 사용 케이	간단한 웹 양식	REST API, 복합 데이터 유형
구문 분석 복잡성	최소한의 overhead	파싱이 필요

 

4. 예제

application/x-www-form-urlencoded

const axios = require('axios');
const qs = require('qs');

const data = {
    name: 'John Doe',
    age: 30,
    city: 'New York'
};

axios.post('https://api.example.com/users', qs.stringify(data), {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

 

application/json

const axios = require('axios');

const data = {
    name: 'John Doe',
    age: 30,
    city: 'New York'
};

axios.post('https://api.example.com/users', data, {
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));