[vue.js] xml to json - 네이버뉴스 가상화폐 관련 글 보여주기

0. 목적

-. 코인뷰 페이지에 추가할 최근 뉴스 데이터 만들기

-. 네이버뉴스에서 제공하는 xml (이전 rss 잔재)을 이용해본다.

 

1. xml 데이터 가져오기

-. 시작 전에, 네이버뉴스의 xml은 당연하게도 cors 제한이 걸려있으므로.. 프록시 서버를 통해 xml을 받아오게 되었음.

-. 우선 내 프록시 서버의 단말로 쿼리를 날려서 xml을 가져오도록 해야한다.

vue    

    async getCrawledNews () {
      const response = await getAPI.get('crawled/naverrss?query=' + encodeURIComponent("암호화폐"));
      const crawledArticles = response.data;
      return crawledArticles;
    }
    
    
python flask

    keyword = flask.request.args.get("query") #페이지에서 넘겨 줄 키워드
    url = config_gonggong.NAVERNES_URL #네이버 뉴스 rss url

    params = {
        'sort': '1',
        'where': 'rss',
        'query': keyword,
    }

    res = requests.get(url, stream=True, params=params)
    res.encoding = "utf-8"
    xml = res.text

    response = flask.Response(xml, mimetype='text/xml')
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Headers'] = '*'
    return response

-. xml 데이터를 전달하기 위해선 flask.Response에서 type을 text.xml로 지정 해줘야 하고, 한글이 섞인 데이터기 때문에 request에서 받아온 response에 encoding을 utf-8로 지정해주는 행이 필요하다.

-. 결과적으로, xml 데이터를 화면에 출력 하는건 성공함.

2. vue에서 xml 만지기

1) xml 파싱

-. 이제 vue에서 xml을 만지는 작업이 필요한데.. 이게 좀 복잡한 것 같다. 예제들을 찾아보면 xml2json이라는 javascript 라이브러리를 이용하는데, 무거운건 별로고... 윈도에서 제공하는 DOMParser에 딸려있는 parseFromString을 이용하기로 했다. 승리의 W3학교

-. 아주 간단하게 처리 가능함. vue 코드를 살짝 수정하자.

      Community.getCrawledNews()
      .then(response => {
        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(response,"text/xml");
        console.log(xmlDoc.getElementsByTagName("item"))
      })

2) xml to json

-. vue에서 v-for로 돌리려면 xml 아이템들을 json array로 변환하는 작업이 필요하고, 위에서 뽑아낸 item 각각의 내부를 열어보면 아래와 같은 구조로 되어있다.

-. 내가 사용할 건 title, link, description, pubDate, author 이렇게 5개 항목이다. xml을 javascript로 변환하는건 (좀 이상한데) getElementsByTagName으로 아이템을 봅고, 해당 아이템에 childNodes[0].nodeValue 항목으로 뽑아내야 한다. 출처

-. 이를 이용하면, 아래와 같이 json array를 만드는 간단한 코드 작성이 가능해진다.

        this.tableContents = []
        for (var i=0; i < items.length; i++){
          this.tableContents.push({
            'articleTitle': items[i].getElementsByTagName('title')[0].childNodes[0].nodeValue,
            'articleFrom': items[i].getElementsByTagName('author')[0].childNodes[0].nodeValue,
            'url': items[i].getElementsByTagName('link')[0].childNodes[0].nodeValue,
            'datetime': items[i].getElementsByTagName('pubDate')[0].childNodes[0].nodeValue,
            'description': items[i].getElementsByTagName('description')[0].childNodes[0].nodeValue,
          })
        }

 

3. table 그리기

-. 이제는 익숙해진 v-for를 이용하면 아주 간단하게 테이블 작성을 할 수 있다. 이전 포스팅 참고

사이트 링크: https://www.coinadvisor.co.kr/