JSON vs XML, JSON 배열

JSON과 XML은 데이터를 표현하고 전송하기 위해 사용하는 두 가지 형식이다.

1. XML

XML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어이며 EXtensible Markup Language의 약자이다. 

- XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어
- XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해준다.
- XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋다. 
- XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 한다.
- XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어진다.

XML 기반의 언어
XHTML, SVG, RDF, RSS, Atom, MathML 등

 

XML 설계목적
서로 호환되지 않는 데이터 타입을 사용하는 시스템 간의 데이터 교환에는 많은 시간과 노력이 발생한다 .이렇게 데이터를 변환하는 과정에서 데이터의 손실이 발생하는 경우도 종종 있기도 하다. 하지만 XML은 데이터를 텍스트 형식으로 저장하므로, 소프트웨어나 하드웨어에 독립적으로 데이터를 저장하고 전달할 수 있다. 따라서 XML을 사용하면 새로운 운영체제나 프로그램, 브라우저 등에 상관없이 데이터를 안전하고 손쉽게 전달할 수 있다.

2.JSON

JSON은 JavaScript Object Notation의 약자이다. JSON은 XML의 대안으로서  좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들졌다. JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있다.

JSON의 특징

JSON은 자바스크립트를 확장하여 만들어졌다.
JSON은 자바스크립트 객체 표기법을 따른다.
JSON은 사람과 기계가 모두 읽기 편하도록 고안되었다.
JSON은 프로그래밍 언어와 운영체제에 독립적이다.

     

3. JSON과 XML의 공통점

    
- 데이터를 저장하고 전달하기 위해 고안됨

- 계층적인 데이터 구조를 가진다. (객체 안의 객체)

- 다양한 프로그래밍 언어에 의해 파싱될 수 있다.

- 둘 다 XMLHttpRequest 객체를 이용하여 서버로부터 데이터를 전송받을 수 있다.

 

4. JSON과 XML의 차이점

- JSON은 종료 태그를 사용하지 않는다. 
- JSON의 구문이 XML의 구문보다 더 짧다. 
- JSON 데이터가 XML 데이터보다 더 빨리 읽고 쓸 수 있다. 
- XML은 배열을 사용할 수 없지만, JSON은 배열을 사용할 수 있다. 
- XML은 XML 파서로 파싱되고, JSON은 자바스크립트 표준 함수인 eval() 함수로 파싱된다.

JSON

더 간결하고 읽기 쉬움.
자바스크립트와 자연스럽게 통합됨.
데이터 구조(객체, 배열)를 직접 표현 가능.
웹 개발과 API에 자주 사용된다. 

XML

속성(attributes)으로 데이터를 표현 가능.
스키마 검증 기능(XSD, DTD)으로 데이터 유효성 검사 가능.
문서 형식이나 레거시 시스템과 통신할 때 더 자주 사용된다.

---

예시(학생정보)

JSON 형식

JSON 객체 --> 중괄호  {} 사용
JSON 에서 객체(Object)란? --> key : value 의 한 쌍으로 이루어진 정렬되지 않은 속성(property)들의 짒합
콤마(,)로 구분하여 여러개의 속성을 가질 수 있다.
문자열은 반드시 큰따옴표("")로 묶어 준다. 

{
  "student": {
    "id": 123,
    "name": "Alice",
    "grade": "A",
    "subjects": ["Math", "Science", "English"]
  }
}

 

JSON 배열과 객체의 조합

이 방식을 사용하면 데이터를 쉽게 확장하고 관리할 수 있다. 

{
  "person": [
    {
      "name": "Alice",
      "age": 21,
      "major": "Computer Science"
    },
    {
      "name": "Bob",
      "age": 23,
      "major": "Mathematics"
    },
    {
      "name": "Charlie",
      "age": 20,
      "major": "Physics"
    }
  ]
}

person이라는 키에 배열을 값으로 할당. 배열은 [] 대괄호로 표현한다. 
배열 요소: 각 요소는 { }로 구성된 JSON 객체이며, 학생의 정보를 저장.
name, age, major는 각 객체의 키이고, 키에 해당하는 값은 각 학생의 데이터를 저장한다.

특정 학생의 이름 가져오려면?
첫 번째 학생 이름: person[0].name → "Alice"
두 번째 학생 이름: person[1].name → "Bob"

const person = [
  { name: "Alice", age: 21, major: "Computer Science" },
  { name: "Bob", age: 23, major: "Mathematics" },
  { name: "Charlie", age: 20, major: "Physics" }
];

// 첫 번째 학생 이름
const firstStudentName = (() => person[0].name)();
console.log(firstStudentName); // "Alice"

// 두 번째 학생 이름
const secondStudentName = (() => person[1].name)();
console.log(secondStudentName); // "Bob"

// 이름 데이터 전체 가져오기
const names = person.map(student => student.name);
console.log(names); // ["Alice", "Bob", "Charlie"]

// 두 번째 학생의 이름, 나이, 전공 출력
console.log(person[1].name + " " + person[1].age + " " + person[1].major);
// 출력: "Bob 23 Mathematics"

// 두 번째 학생의 정보 (전개 연산자 사용)
const { name, age, major } = person[1];  // person[1]의 값을 풀어 변수에 할당
console.log(`${name} ${age} ${major}`);
// 출력: "Bob 23 Mathematics"

// 배열을 전개하여 출력
// 전개연산자 ...배열명
console.log(...person);

// 출력결과
{ name: "Alice", age: 21, major: "Computer Science" }
{ name: "Bob", age: 23, major: "Mathematics" }
{ name: "Charlie", age: 20, major: "Physics" }

 

XML 형식

<student>
  <id>123</id>
  <name>Alice</name>
  <grade>A</grade>
  <subjects>
    <subject>Math</subject>
    <subject>Science</subject>
    <subject>English</subject>
  </subjects>
</student>

 

비교

 

구조	키-값 쌍 (key-value) 기반	태그(<tag>) 기반
가독성	단순하고 짧은 구문으로 가독성이 좋음	태그가 많아지면 구문이 복잡해질 수 있음
데이터 유형 지원	문자열, 숫자, 배열, 객체 등 다양한 데이터 유형 지원	모든 데이터는 기본적으로 문자열로 처리됨
배열 표현	배열은 [ ]로 표현 가능	배열은 반복된 태그로 표현
사용 목적	주로 웹 애플리케이션 및 API에서 데이터 전송에 사용	문서 표현 및 데이터 전송에 사용
크기	상대적으로 더 작음	태그로 인해 크기가 더 커질 수 있음