[XML] XML (eXtensible Markup Language)

복습

https://shins99.tistory.com/62

[React] JSX (JavaScript XML)

---

XML (eXtensible Markup Language)

- 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어

- 수많은 응용 분야에서 데이터를 저장하고 전달하는 중요한 역할

- 1998년에 W3C 표준 권고안에 포함

-  HTML과 매우 비슷한 문자 기반의 마크업 언어(text-based markup language)

- 사람과 기계가 동시에 읽기 편한 구조

- XML은 HTML처럼 데이터를 보여주는 목적이 아닌, 데이터를 저장하고 전달할 목적으로 만듬

- XML 태그는 HTML 태그처럼 미리 정의되어 있지 않고, 사용자가 직접 정의 가능

 

XML의 특징

1. 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어

2. 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환가능

3. 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성 좋음

4. 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만이 목적

5. 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어짐

 

- XML은 문서용 마크업 언어를 정의하기 위한 메타언어인 SGML(Standard Generalized Markup Language)을 기반으로 만들어진 언어

 

XML 기반의 언어

1. XHTML

2. SVG

3. RDF

4. RSS

5. Atom

6. MathML

 

XML 설계 목적

1. 인터넷상에서 명확하게 사용할 수 있어야 함

2. 다양한 응용 프로그램을 지원해야 함

3. SGML과 호환되야 함

4. 문서를 처리하는 프로그램은 손쉽게 작성 가능해야 함

5.에서 제공하는 옵션의 수는 최소한으로 유지되어야 함

6. 문서는 인간이 읽을 수 있어야 하며, 의미가 명확해야 함

7. 의 설계는 빠르게 이루어져야 함

8. 의 설계는 공식적이면서 간결해야 함

9. 문서는 작성하기 쉬워야 함

10. 마크업의 간결성은 중요하지 않음

 

HTML로부터 데이터 분리

- HTML 문서의 데이터를 XML 파일로 따로 저장 가능

- 저장한 데이터는 몇 줄의 자바스크립트 코드로도 간단히 읽어 들일 수 있음

- HTML 문서 내에서 불러온 데이터를 손쉽게 이용가능

HTML 문서에서 분리된 XML 파일로부터 데이터를 해당 데이터를 웹 페이지에 표시하는 예제
 
function loadDoc() {
 
    var xmlHttp = new XMLHttpRequest();
 
    xmlHttp.onreadystatechange = function() {
 
        if(this.status == 200 && this.readyState == this.DONE) {
 
            displayData(xmlHttp);
 
        }
    };
 
    xmlHttp.open("GET", "/examples/media/korean_major_cities.xml", true);
 
    xmlHttp.send();
 
}
 
function displayData(xmlHttp) {
 
    var xmlObj, cityList, result, idx;
 
    xmlObj = xmlHttp.responseXML; // 요청한 데이터를 XML DOM 객체로 반환함.
 
    result = "<table><tr><th>도시 이름</th><th>행정구역</th></tr>";
 
    cityList = xmlObj.getElementsByTagName("city");
 
    for(idx = 0; idx < cityList.length; idx++) {
 
        result += "<tr><td>" +
 
            cityList[idx].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" +
 
            cityList[idx].getElementsByTagName("class")[0].childNodes[0].nodeValue + "</td></tr>";
    }
 
    result += "</table>";
 
    document.getElementById("text").innerHTML = result;
}