Intro
프론트엔드 개발자 두 분과 서울시 실시간 도시 데이터를 받아 정보를 보여주는 웹을 번개로 3~4일 안에 만들기로 했다. 서비스에 필요한 데이터만 클라이언트로 응답을 주기 위해서는 받은 데이터를 서버에서 별도로 가공 과정을 거쳐 보내주어야 했다.
우선 인증키를 받아 안내된 대로 API 요청을 보내 응답을 확인해보니 xml로 데이터를 받아온다. 요청 데이터 타입 파라미터값 'xml'을 'json'으로 변경하면 XML로만 가능하다고 응답받는다. 따라서 받은 XML 데이터를 JSON으로 변환 후 데이터를 다시 정리했다.
xml-js
XML 형식의 데이터를 JSON 형식으로 변환하기 위해 xml-js를 사용했다.
npm install --save xml-jsxml-js는 변환 과정에서 내용 요소들의 순서가 보장되며, XML에서 JSON으로 뿐만 아니라 JSON에서 XML로도 변환할 수 있다. 또한, 외부 npm 모듈에만 의존하기 때문에 의존성이 낮다. 이외에도 더 많은 기능이 있다.
변환할 때 Compact 형식 외에도 Non-Compact 형식도 지원하는 것이 가장 큰 특징이다. Non-Compact 형식은 항상 원본 XML 데이터 내용의 순서를 보장하며 Compact 형식보다 더 많은 정보를 제공한다. 또한, Compact 형식은 결과 요소가 객체나 배열일 수 있어 클라이언트 코드에서 처리할 때 곤란해질 수 있기 때문에 추가로 타입에 대한 체크가 필요하다고 한다.
하지만 Non-Compact 형식이 원본 XML 데이터를 더 정확하게 나타낼 수 있어도 아웃풋이 더 장황하고 더 많은 공간을 차지한다. 따라서 경우에 따라 {compact: true/false}를 주어 선택할 수 있다. 이번에는 class-transformer를 사용해서 필요한 데이터만 정의한 클래스 요소 순서대로 관리했기 때문에 Compact 형식으로 변환했다.
Example(XML-Compact-NonCompact)
Provided APIs
var convert = require('xml-js');
result = convert.js2xml(js, options); // to convert javascript object to xml text
result = convert.json2xml(json, options); // to convert json text to xml text
result = convert.xml2js(xml, options); // to convert xml text to javascript object
result = convert.xml2json(xml, options); // to convert xml text to json text각 API에 사용 가능한 옵션들은 라이브러리 문서 참고
Code
import convert from 'xml-js';
...
const apiUrl = `${process.env.BASE_URL}/${process.env.AUTH_KEY}/xml/citydata/1/5/${place}`;
const xmlResult = await axios.get(encodeURI(apiUrl));
// 요청 API에 한글이 들어가기 때문에 encodeURI() 처리
const result = convert.xml2json(xmlResult.data, {
compact: true, // Compact JSON으로 받기
spaces: 4, // XML 결과물 들여쓰기에 사용할 공백 수
});
...참고
