[책] 자바스크립트 코드 레시피 278 - 207일차

fetch()로 XML 데이터 읽어 오기

• XML 형식의 텍스트 파일을 가져오고 싶을 때

XML은 데이터를 표현하는 마크업 언어의 하나로, 주로 서버 간의 데이터 통신에 사용되며, 알기 쉬운 표기 형식이 특징입니다. HTML과 같이 시작 태그와 종료 태그로 값을 정의하고 속성값으로 추가 정보를 부여합니다. 복잡한 정보를 표현할 수 있으므로 다양한 목적으로 사용됩니다.

XML은 데이터를 가져오고 참조하는 것이 약간 복잡한 반면, JSON은 데이터를 가져오는 시점에서 자바스크립트 데이터 타입으로 변환되므로 필요한 코드의 양이 적다는 장점이 있습니다.

xml 코드

sample.xml

<data version="1">
  <orange>1</orange>
  <orange>2</orange>
</data>

Promise를 사용하는 방법

fetch('sample.xml')
  .then((response) => response.text()).then((str) => new DOMParser().parseFromString(str, 'application/xml')).then((xml) => {
  console.log(xml);
  console.log(xml.querySelector('orange').innerHTML);
})

await와 async를 사용하는 방법

async function load() {
  const response = await fetch('sample.xml');
  const text = await response.text();
  const xml = new DOMParser().parseFromString(text, 'application/xml');
  console.log(xml);
  document.querySelector('#log').textContent = text;
}
load();