우편번호 오픈API 연동 #2

우체국 OpenAPI는 그 형태가 XML입니다.

전달하는 데이터의 길이나 javascript에서의 활용성 등을 고려하면 json으로 제공해주면 더 좋았을 텐데요...

이런 건, 아쉬운 사람이 해결해야 하는 법이죠.

XML을 json으로 변환해서 사용해 봅시다.

XML Parser

저는 xml2js라는 녀석을 사용했습니다. (0.4.19 version이 최신이네요)

https://www.npmjs.com/package/xml2js

https://github.com/Leonidas-from-XIV/node-xml2js

사이트에 예제가 잘 정리되어 있으므로, 간단하게 적용이 가능합니다.

Angular에서 사용하기 위해서는 당연히 module 추가부터 해야 겠죠?

> npm install xml2js --save

저는 우편번호 검색 기능을 별도의 service로 만들었습니다.

service에서 참조하기 위해서는.

import * as xml2js from 'xml2js';

그리고 실제 사용 예제는 아래와 같습니다.

xml2js.parseString(res.text(), {

explicitArray: false

}, function (err, result) {

if (err) {

reject(err);

} else {

console.log('service return: ', result);

resolve(result);

}

})

첫번째 인자인 res.text() 가 실제 우체국에서 받아온 response (XML) 입니다.

두번째 인자는 변환 option 설정입니다.

세번째 인자는 callBack 입니다.

매우 직관적이고 간단하죠??

• explicitArray (default: true): Always put child nodes in an array if true; otherwise an array is created only if there is more than one.

여기서 explicitArray를 false로 처리한 부분이 양날의 검이었습니다...

왜 그런지 우체국의 OpenAPI의 응답값을 살펴보죠.

<?xml version="1.0" encoding="utf-8" ?>

<post>

<pageinfo>

<totalCount><![CDATA[9]]></totalCount>

<totalPage><![CDATA[1]]></totalPage>

<countPerPage><![CDATA[20]]></countPerPage>

<currentPage><![CDATA[1]]></currentPage>

</pageinfo>

<itemlist>

    <item>

<postcd><![CDATA[24155]]></postcd>

<address><![CDATA[강원도 화천군 사내면 사내로7길 7-3 (사창리, 청와대)]]></address>

<addrjibun><![CDATA[강원도 화천군 사내면 사창리 451-1 (청와대)]]></addrjibun>

    </item>

    <item>

... // 생략

    </item>

</itemlist>

</post>

'청와대'로 검색해 보았습니다.

pageinfo element를 통해서 검색 결과에 대한 summary를 제공합니다.

itemlist element에서는 실제 검색된 주소 목록을 제공합니다.

이 schema를 그대로 유지한 채로 json으로 변환하면 아래와 같은 모습이 됩니다.

(변환은 http://www.utilities-online.info/xmltojson/#.We0-CGh-pPY 을 이용했습니다.)

{

"post": {

"pageinfo": {

"totalCount": "9",

"totalPage": "1",

"countPerPage": "20",

"currentPage": "1"

},

"itemlist": {

"item": [

{

"postcd": "24155",

"address": "강원도 화천군 사내면 사내로7길 7-3 (사창리, 청와대)",

"addrjibun": "강원도 화천군 사내면 사창리 451-1 (청와대)"

}, ... //생략

]

}

}

}

그런데 탐색할 데이터 구조에서는 item이라는 node는 굳이 필요하지 않아 보입니다.

아래와 같이 말이죠.

{

"post": {

"pageinfo": {

"totalCount": "9",

"totalPage": "1",

"countPerPage": "20",

"currentPage": "1"

},

"itemlist": [

{

"postcd": "24155",

"address": "강원도 화천군 사내면 사내로7길 7-3 (사창리, 청와대)",

"addrjibun": "강원도 화천군 사내면 사창리 451-1 (청와대)"

}, ... //생략

]

}

}

json에서는 array의 각 item의 type이 명시되지 않아도 되는데, XML은 그렇지 않으니까요...

이런식으로 XML을 json으로 변환할 때 적용할 rule을 xml2js의 option을 통해서 할 수 있습니다.

다음 글에서는 개발간 우체국 주소 OpenAPI를 연동할 수 있는 방법을 소개하겠습니다.