본문 바로가기
프로그래밍/etc. (Language)

[Node.js] 구글 트렌드에서 인기 급상승 검색어를 웹크롤링 해보자.

by _BlankSpace 2019. 5. 23.

구글에서도 인기 급상승 검색어나 실시간 검색어를 확인할 수 있다는 것을 최근에 알게 되었습니다.


하지만, 네이버처럼 메인 포탈 화면에 제공하고 있지는 않고, 따로 페이지를 구성하여 여러 정보를 제공하고 있더라고요.


혹시, 관련 정보에 관심이 있다면, 아래 포스팅을 참고하면 좋을 것 같습니다.


[Google Trends]구글 트렌드를 이용하여 특정 검색어 분석하기 [시간별/지역별 관심도 확인 및 관련 주제/검색어 확인]




구글 트렌드를 이리저리 보다 보니, 인기 급상승 검색을 따로 크롤링해서 다른 곳에서 사용해보면 좋지 않을까라는 생각이 들었습니다. 그래서 정리해보면 좋지 않을까하여, 프로그램 작성 후에 포스팅에 남겨봅니다.


 0. 들어가기에 앞서서.. 

일단, 구글 트렌드의 인기 급상승 검색어를 가져오기 위해서 다음의 준비가 필요합니다.


- Node.js

- npm


저는 Node.js 언어로, npm 패키지를 이용하여 웹크롤링을 진행하려 합니다. 혹시나, 다른 언어로 웹크롤링을 진행하고자 원하시는 분들은 양해 부탁드립니다.


 1. 기본적인 설치를 진행하자. 


먼저, 저는 아래처럼 GoogleTrendsRT라는 디렉토리에서 진행하도록 하겠습니다. 원하시는 디렉토리명으로 진행하시면 되겠습니다.


1
$ cd GoogleTrendsRT
cs


다음으로, npm을 설치합니다.


1
$ npm init
cs


혹시나, 위의 명령어를 입력하셨을 때, 여러 가지 정보를 물을 것입니다. 이것은 그냥 엔터로 넘어가 주시면 되겠습니다.



완료하셨으면, package.json 라는 파일이 생성됩니다. 그러면 일단 npm 초기화는 완료된 것입니다.


이제, 웹크롤링에 필요한 npm 모듈을 설치해야 합니다. 이번 포스팅에서 사용할 npm 모듈은 Cheerio과 Request 입니다. 아래 방법을 따라하시어, 두 모듈을 설치해주세요.


cheerio

Fast, flexible & lean implementation of core jQuery designed specifically for the server.

cheerio는 Node.js에서 HTML 데이터를 파싱하기 위해서 사용합니다.


모듈을 설치하는 방법은 아래와 같습니다.


1
$ npm install cheerio
cs


* 혹시, "Unhandled rejection Error: EACCES: permission denied" 와 같은 문구가 나오신다면, 명령어 앞에 "sudo"를 붙여주세요.

* cheerio의 자세한 정보는 다음 링크를 참고해주세요. https://www.npmjs.com/package/cheerio




request

Request is designed to be the simplest way possible to make http calls. It supports HTTPS and follows redirects by default.

request는 cheerio를 통해서 파싱하기 위한 데이터를 가져오기 위해서 사용합니다.


모듈을 설치하는 방법은 아래와 같습니다.


1
$ npm install request
cs


* 혹시, "Unhandled rejection Error: EACCES: permission denied" 와 같은 문구가 나오신다면, 명령어 앞에 "sudo"를 붙여주세요.

* request의 자세한 정보는 다음 링크를 참고해주세요. https://www.npmjs.com/package/request



두 개의 모듈을 설치하셨다면, "package.json" 에 한번 들어가서 아래처럼 내용이 들어가 있는 지 확인해주세요.

아래처럼 내용이 들어가 있다면, 모듈 설치는 끝난 것입니다.


1
2
3
4
  "dependencies": {
    "cheerio""^1.0.0-rc.3",
    "request""^2.88.0"
  }
cs



 2. 웹크롤링을 위한 코딩을 해보자.


먼저, 저는 "googleTrendsRT.js"라는 파일을 만들어 작성하였습니다. 원하시는 파일명으로 js 파일을 생성하여 따라해주세요.


자, 그럼 가장 먼저 해야할 일은 위에서 설치한 모듈을 불러오는 일입니다.

아래처럼 require 함수를 이용하여 모듈을 불러옵니다.


1
2
var cheerio = require('cheerio');
var request = require('request');
cs


이제, HTML 데이터를 가져올 url를 찾아와야 합니다. 구글 트렌드를 확인해보니, 따로 API를 제공하지 않았기 때문에 방법을 찾아보니, RSS를 이용하는 방법을 찾을 수 있었습니다.


구글 트렌드의 RSS는 아래 방법으로 확인할 수 있습니다. 아래 급상승 인기 검색어에서 RSS 버튼을 눌러주세요.



버튼을 누르시면, 아래처럼 코드를 확인할 수 있습니다.

이제, 아래 항목별 이름을 참고하여 데이터를 가져오도록 하겠습니다.



위의 RSS의 주소가 url이므로, 아래처럼 변수에 입력합니다.


1
var sourceUrl = 'https://trends.google.co.kr/trends/trendingsearches/daily/rss?geo=KR';
cs


이제, request와 cheerio 모듈을 활용하여, 데이터를 가져오고 파싱하도록 하겠습니다.

아래 코드는 데이터를 가져오고 파싱하는 부분입니다. 계속해서 천천히 설명하도록 하겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
request(sourceUrl, function(error, response, html){
  if (!error) {
    var $ = cheerio.load(html, {xmlMode : true});
 
    $('item').each(function () {
      title.push($(this).children('title').text());
    });
 
    $('item').each(function () {
      let pubDate = $(this).children('pubDate').text();
      date.push(getDataFormat(pubDate));
    });
 
    $('item').each(function () {
      description.push($(this).children('ht\\:news_item').children('ht\\:news_item_title').text());
    });
 
    $('item').each(function () {
      views.push($(this).children('ht\\:approx_traffic').text());
    });
 
    
    $('item').each(function () {
      url.push($(this).children('ht\\:news_item').children('ht\\:news_item_url').first().text());
    });
 
    
    let tempDate, rank = 1;
    for (let i = 0; i < title.length; i++) {
      if (tempDate != date[i]) {
          tempDate = date[i];
          rank = 1;
          console.log("<br><b>" + "<span style=\"color:red\">" + tempDate + "</span></b><br>");
      }
      console.log("<br>" + rank + ". <b> <a href="+ url[i] + ">" + title[i] + "</a></b>  조회수 : " + views[i] + "<br>");
      console.log(description[i] + "<br>");
      rank++;
    }
  }
});
cs


먼저, request 함수로, rss의 url에서 데이터를 가져옵니다. 이때의 데이터는 html 변수에 들어갑니다.


1
request(sourceUrl, function(error, response, html)
cs


다음으로는 cheerio를 이용하여, 데이터를 load 합니다. 

1
var $ = cheerio.load(html, {xmlMode : true});
cs




이제, 파싱을 진행합니다. 아래와 같은 코드는 모두 설명하지 않고, 필요한 부분만 설명하도록 하겠습니다.


위에서 cheerio를 이용하여 데이터를 load한 것을 $ 변수에 넣었습니다.

아래와 같이 코드를 작성한 이유는, $ 데이터에 'item'이라는 항목을 모두 읽어 오겠다는 뜻입니다.

이후, 'item' 항목아래에 있는 'title' 정보를 읽어오겠다는 뜻이고요.


1
2
3
$('item').each(function () {
      title.push($(this).children('title').text());
});
cs


아직 감이 잘 안오실 수 있어서 이미지도 같이 첨부해봤습니다.

아래 이미지를 보시면, "<item>" 이라는 대항목 밑에, "<title>", "<ht:approx_traffic>", "<description>" 이라는 소항목을 확인할 수 있습니다.



이처럼, 코드에도 "$"의 대항목이라는 'item'을 입력한 후, children으로 'title'를 입력하여 데이터를 가져오는 것입니다.

굉장히 쉽죠?


이러한 방법으로 5~25줄까지 같은 방식을 사용하였으니, 천천히 확인해보시면 금방 이해하실 수 있을 거에요.


이외에 코드 부분은 부가적인 부분이므로, 생략하겠습니다. 그럼, 이제 결과를 확인해볼까요?

코드를 실행하려면, 아래처럼 명령어를 실행해주세요.


1
$ node googleTrendsRT.js > result.html
cs


이후, result.html를 실행해주시면, 아래처럼 확인하실 수 있습니다.



꽤나, 근사하지 않나요? 혹시나, 실망하셨다면... 좀 더 html 코드로 가꾸시면 되지 않을까 싶습니다!


혹시나, 전체 코드를 원하시는 분이 계시다면, 아래 github에서 확인해주세요.

https://github.com/cryrin10/GoogleTrendsRT/blob/master/googleTrendsRT.js


그럼, 이상으로 포스팅을 마치겠습니다. 혹시나, 궁금하신 점이 있으시면 댓글 남겨주세요.

서로 이웃 추가 및 구독은 항상 환영합니다!

댓글