[자바스크립트] XML과 JSON 포맷 배우기

XML? JSON?

XML과 JSON은 데이터 전달을 위한 포맷이다.

그런데.. 데이터를 전달하는데 포맷이 왜 필요해? 라는 생각이 든다면

우선 마크업 언어를 먼저 이해해보면 좋겠다.

마크업 언어?

마크업 언어란, 메타언어의 한 종류다.

메타언어는?

다른 언어를 기술하거나 분석하기 위하여 사용되는 언어.
가령, 영어 문법을 한국어로 설명한다면 한국어 = 메타언어이다.

마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 기술하는 언어다.
"마크업"의 의미는 꺽쇠(<, >)를 이용한 태그로 데이터의 성격이나 기능을 감싼 것을 칭한다.

마크업 언어의 대표적인 예는 XML, HTML이 있다.

XML과 HTML이 어떻게 다른지 알아보면 좋겠다.

간단한 HTML의 특징

HTML 태그는 데이터를 "보여주기"가 목적이다.
- 그래서 "의미"가 아닌 "외양적 표현"이 목적이다.
HTML 마크업에서는 어디가 데이터 이름이고, 실제 데이터인지 등을 표시할 마땅한 방법이 없다.
- 헷갈린다면 <body> <section> 등의 태그 목적을 생각해보면 이해에 도움이 되겠다.

XML(eXtensible Markup Language)

확장 가능한 마크업 언어이며, 다목적 마크업 언어다.

다른 목적의 마크업 언어를 만드는 데 사용되어, "다목적 마크업 언어" 라 불린다.

XML은 HTML같이 태그를 이용한다.

그러나, 구조화된 데이터 저장 및 전송이 목적이다.

XML은 데이터의 범위, 실제 데이터, 단위까지도 표현이 가능하다.
이 특성 덕에 메타 데이터 기술이 가능하다.

XML의 특징)

다른 목적의 마크업 언어를 만드는데 사용되는 다목적 마크업 언어
다른 시스템끼리 다양한 유형의 데이터 교환이 가능
새로운 태그를 만들고 추가해도 계속해서 동작하는 확장성
데이터 전달과 저장이 목적 (HTML처럼 보여주기가 목적이 아니다.)
텍스트 데이터 형식의 언어, 모든 XML 문서는 유니코드 + 문자로 이루어짐

HTML에서는
CPU 2.8 3GHz
라는 데이터를 표현하기 어렵다.

<span>CPU 2.8 3GHZ</span> 
????..


XML에서는
<dataname>CPU</dataname>, <datavalue>2.83</datavalue>
로 표현이 가능하다.

XML 예시)

<?xml version="1.0" encoding="UTF-8"?>
<football club="첼시" type="축구선수">
    <player>
        <name>램파드</name>
        <position>미드필더</position>
        <age>27</age>
    </player>
    <player>
        <name>드록바</name>
        <position>공격수</position>
        <age>25</age>
    </player>
</football>

// 데이터 값 양쪽으로 태그가 존재한다.
// HTML을 근본으로 하여, <>태그를 사용한다.

XML을 이해했다면, "데이터의 의미있는 표현과 전달"이 필요한 시기임을 알 것이다.

분명 XML을 이용하면 데이터의 표현 및 전달까지 꽤 괜찮아보인다.

그러나 위의 예시에서 보면, xml은 "크고 아름답다."는 표현이 어울려보인다.

전달해야 할 데이터가 적다면, 더더욱 xml의 기본 포맷을 지켜야하는 점이 더 아쉽게 느껴진다.

이 아쉬움을 바탕으로, JSON을 이해해보자.

JSON

데이터 전달을 목적으로 하는 key-value 쌍의 사람이 읽기 쉬운 개방형 표준 포맷.

데이터 저장/전송 시 많이 사용되는 경량의 데이터 교환 형식이며,
자바스크립트에서 파생되어, 자바스크립트 객체의 형태를 지녔다.

사실 언어 독립형 데이터 포맷이다.

C, C++, 파이썬 등 어디서나 쉽게 생성/이용이 가능하도록 API들을 제공하고 있다.

ajax 이후 화면의 부분적 변화를 위한 "작은 데이터"의 통신이 많아지면서,

xml의 무거움 대신 json의 가벼움이 더 각광받았기 때문이다.

데이터를 나타내는 가장 대표적인 방식이 XML이라면, 현재 가장 많이 사용되는 것은 JSON이다.

JSON의 특징)

최소한의 정보만 담는다. XML보다 용량이 작고 빠름
서버, 클라이언트 간 데이터 전달 시 많이 사용
자바스크립트 태생이므로, 무척 친근한 모습
언어에 독립적이며, 대부분 프로그래밍 언어에서 JSON 포맷 핸들링 가능

JSON 예시)

{
    "clubname": "chelsea",
    "country": "England",
    "members": [
        {
            "name": "Drogba",
            "age": 25,
            "position": "foward"
        },
        {
            "name": "Cech",
            "age": 24,
            "position": "goalKeeper"
        },
        ],
}

// 딱봐도 XML보다 가벼워보인다.

JSON, XML의 공통점, 차이점, 한계

공통점

데이터 저장과 전달을 위해 고안된 형식.
계층적 데이터 구조.
기계 뿐 아니라 사람 친화적!
다양한 프로그래밍 언어에서 이용 가능.

차이점

XML은 태그로 이루어져 있어 종료 태그가 명시되지만, JSON에는 종료 태그가 없고 닫힘으로 끝난다.
JSON이 XML보다 더 데이터 집약의 모습을 보인다.
그 이유로, JSON이 XML보다 읽고 쓰는데 빠르다.
XML에서는 배열 구조를 사용할 수 없으나, JSON은 가능하다.

한계
둘 다 텍스트에 기반한다.

텍스트 기반이므로, 함수같은 표현을 담을 수 없다.(함수를 넣고 직렬화시, 함수가 사라진다.)
실 데이터에 비해 오버헤드가 많다.

오버헤드란? 처리를 위해 필요한 간접적인 처리 시간 및 메모리.
메모리상의 데이터를 XML/JSON 변환하여 전송 -> 다시 전송받은 XML/JSON을 메모리에 복원시키며 오버헤드 발생
- 네트워크 트래픽에 대해선 압축 전송으로 극복 가능,
  - 결국 압축을 풀어야 하므로 근본적인 문제가 해결되진 않음.
- 한 번 로드하는 것은 문제가 되지 않지만, 1초에 수십번 요청을 받아 처리한다면 문제가 될 수 있다.

출처

https://ko.wikipedia.org/wiki/XML
https://ko.wikipedia.org/wiki/JSON
https://mommoo.tistory.com/17
https://velog.io/@surim014/JSON이란-무엇인가
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=tkd5314&logNo=40196592766
http://tcpschool.com/json/json_intro_xml

저작자표시

'JavaScript > theory' 카테고리의 다른 글

[자바스크립트] 동기와 비동기 이해하기. (1)	2021.08.21
[자바스크립트] enum을 배우고 구현해보자. (0)	2021.08.02
[자바스크립트] 일급 객체? 함수! (0)	2021.07.24
[자바스크립트] ?. 연산자, 옵셔널 체이닝 (0)	2021.07.08
[자바스크립트] let, const 키워드를 사용하자. (0)	2021.05.21