[vue] jsonp 데이터 & xml to json

결국 어제 작성한 daumpost 이슈를 해결하지 못하고 우정국 api를 사용하기로 결정했는데, 우정국 api의 경우에는 데이터를 json이 아니라 jsonp형태로 return 하고, 데이터도 xml 로 작성돼있어서 parsing 처리를 위해 모듈을 몇 개 찾아서 깔아봤다.

 

처음에는 그냥 axios jsonp로 서치해서 해봤는데 왠지 자꾸 not function 오류가 떠서 뭔가 싶었는데 vue가 아니라 react용 모듈이었다.. 삽질만 얼마나 한 건지 정신이 아득한데, 아무튼 vue-jsonp 모듈로 재설치 한 다음 코드처리 진행함.

 

아래는 jsnop으로 데이터 전달 받은 후 parsing 처리하는 과정

 

1. 설치한 vue-jsnop 모듈을 사용할 수 있도록 main.js 파일에 등록

import VueJsonp from 'vue-jsonp';
Vue.use(VueJsonp);

 

 

2. 데이터를 수신하는 컴포넌트 코드에서 모듈을 사용해 parsing 처리

export default {
  ...
  methods: {
    functionName() {
      ...
      
      this.$jsnop(`호출할 url`, 전송할 paramater(object형))
      .then( (data) => {
        ... return 받은 data 처리
      }) 
    }
  }
}

 

이렇게 axios 대신 $jsnop 모듈을 사용해서 api 서버 호출 코드를 작성해주니 데이터는 깔끔하게 XML로 받아와지는걸 확인.

이걸 json데이터로 또 바꿔야 싶었는데 지원하는 모듈이 있어서 모듈 설치 후 코드 한 줄 추가로 해결됐다.

설치 모듈은 xml-to-json-promise 으로 콘솔창에 npm install --save xml-to-json-promise 명령어로 설치 가능하다.

 

콘솔 설치 후 위에 return 받은 data 처리 부분에 아래 처럼 json 형 parsing 코드 작성해줬다.

convert.xmlDataToJSON(data.returnXml).then(json => {
  console.log(json);
});

로그를 찍어보니 then 으로 받은 json 데이터가 results: { ... } 처럼 result 블럭에 한 번 더 싸여서 return 되고 있는걸 발견.

다시 한번 데이터를 걸러내는건 번거로우니까 then(json => { ... } );  부분을 then( ({results})=>{ ... }) 로 바꿔서 아예 objcect 형 데이터 값으로 뽑아냈다. 아래 코드 참고

convert.xmlDataToJSON(data.returnXml)
.then(json => { // 이 부분을
  console.log(json);
});

convert.xmlDataToJSON(data.returnXml)
.then( ({json}) => { // 이렇게 수정해서 바로 object 로 접근해서 results 내부 데이터를 json 변수로 얻는다
  console.log(json);
});

 

이전에 이 개념? 에 대해서 스치듯 들었던 것 같은데, 확실한 원리나 로직을 모르고 그냥 스킬로서 사용하게 되니까 개인적으로 좀 답답한 감이 있다고 해야하나. 확실하게 개념을 알고 사용해야 나중에 뒤탈도 없고 찜찜하지 않아서 조만간 한 번 찾아봐야겠다 싶다.

 

새삼스럽지만 잘 모르는 상태에서 모듈이나 함수를 찾아쓰는건 쉬운데, 그게 개념을 확립하기 이전에 습관이 되버리면 그냥 그저 그런 스킬맨이 되고 오류나 문제 발생시에 해결하는데 1도 도움이 안된다고 생각한다.

좀 멋있게 근본을 파고들어서 촤라락 해결하고 싶은데 아직 뭣도 모르는 응애라서 슬픔..

 

 

+ 오늘의 깨달은 점

여태까지는 vue에서 다운받은 모듈을 사용할 때 항상 import ____ from '모듈 or 컴포넌트경로' 로 사용했는데

함수 내부에서 var ____ = require('____'); 로 쓸 수 있는걸 보고 ㅇ0ㅇ 함

개념을... 공부하고 싶다..

누가 안 떠먹여주나 ㅠ

 

++

xml to json 변환 모듈 종류가 여러개 있던데

xml-to-json-promise 는 key 내부 값이 배열로 찍히고 ( key : ['value'] )

xml-js 는 _text key값으로 value를 추출해야 한다 ( key : { '_text' : 'value' } 

나는 그냥 xml-to-json-promise를 쓰려고 했는데, 변환 데이터 종류가 많으면 xml-js가 데이터 종류 몇개 더 호환되는 것 같아서 쓸만 할 것 같음