웹 데이터 읽기 – Node.js

서울의 기온 데이터를 웹에서 읽는 여러 가지 방법을 시도하고 있다. 이전 글에서는 cURL과 hgrep을 사용하여 웹 데이터를 읽었다. 이번에는 아래 데이터와 Node.js 자바스크립트를 사용하여 서울의 현재 기온을 표시하겠다.

첫 줄은 서울의 현재 기온을 나타내는 웹 사이트 URL이고 두 번째 줄은 그 페이지에서 온도 문자열을 찾을 수 있는 CSS selector 문자열이다. CSS selector를 구하는 방법은 이전 글에서 확인할 수 있다.

웹 데이터 다운로드

우선 Node.js 설치가 필요하다. Node.js 설치가 불편하다면 온라인에서 테스트 할 수 있는 방법을 사용할 수 있다. 이 서비스는 코드 붙여 넣기로 바로 결과를 확인할 수 있다. 우선 웹에서 HTML 파일을 읽을 자바스크립트 코드를 작성하기 위해 HTTP 요청을 처리해 주는 request 모듈을 설치한다.

$ cd /tmp
$ npm install request

request의 예제 코드를 temperature.js 파일로 저장하고 수정하지 않고 바로 실행해 본다.

var request = require('request');
request('http://www.google.com', function (error, response, body) {
    console.log('error:', error); // Print the error if one occurred
    // Print the response status code if a response was received
    console.log('statusCode:', response && response.statusCode);
    console.log('body:', body); // Print the HTML for the Google homepage.
});
$ node temperature.js

에러가 발생하지 않으면 이제 웹 데이터를 읽어오는 URL을 변경하고 HTML 코드만 출력하도록 수정하자.

var request = require('request');
request('https://www.accuweather.com/ko/kr/seoul/226081/weather-forecast/226081',
function (error, response, body) {
  console.log(body);
});
$ node temperature.js

그러면 HTML 파일을 받아 올 수 있다. 브라우저는 HTML을 해석하는 과정에서 획득한 이미지, CSS 그리고 자바스크립트 등의 파일 경로를 이용하여 추가 데이터를 받아오는 작업을 진행한다. 이와는 다르게 이 스크립트는 단 한 번의 요청으로 HTML 파일 1개 만을 받아온다. 내려받은 HTML 파일을 확인하기 위해 hgrep을 사용하여 아래처럼 테스트할 수도 있다.

$ node temperature.js | hgrep -t “#current-city-tab > a > span.local-temp”
26°C

데이터 파싱

이제 hgrep 역할을 할 자바스크립트 코드를 작성하겠다. 이를 위해 jQuery의 핵심 기능을 가지고 있는 cheerio를 설치한다. 이 모듈은 HTML 파싱 툴로도 사용할 수 있다. 사실 hgrep은 cheerio를 command line에서 사용할 수 있도록 감싼 툴이다.

$ npm install cheerio

아래 cheerio 예제 코드에서 상단 2줄만 복사하여

const cheerio = require('cheerio')
const $ = cheerio.load('<h2 class="title">Hello world</h2>')

$('h2.title').text('Hello there!')
$('h2').addClass('welcome')

$.html()
//=> <h2 class="title welcome">Hello there!</h2>

이전에 작성한 temperature.js 파일 안에 삽입한다.

var request = require('request');
request('https://www.accuweather.com/ko/kr/seoul/226081/weather-forecast/226081',
function (error, response, body) {
  console.log(body);
});
const cheerio = require('cheerio')
const $ = cheerio.load('<h2 class="title">Hello world</h2>')

request의 결과인 body 변수를 cheerio.load의 인자로 전달하기 위하여 cheerio 코드를 request 콜백 한수 안으로 옮기겠다. 그리고 $ 함수에 현재 온도를 얻을 수 있는 CSS selector 문자열을 적용한다.

var request = require('request');
request('https://www.accuweather.com/ko/kr/seoul/226081/weather-forecast/226081',
function (error, response, body) {
  const cheerio = require('cheerio')
  const $ = cheerio.load(body);
  console.log($('#current-city-tab > a > span.local-temp').text());
});

request 함수로 다운 받은 HTML 파일이 문자열은 body 변수에 전달되고 이 값은 HTML 파서인 cheerio에 다시 전달된다. 여기서 사용된 $ 함수는 브라우저의 jQuery의 심볼과 같다고 보면 된다. $ 함수에 전달된 CSS selector도 jQuery가 사용하는 selector와 동일하다. 이 코드는 이해하기 쉽다. request 함수에 사용되는 url은 브라우저에 주소란에 삽입하여 확인하거나 curl에 인자로 전달하여 확인할 수 있으며 console.log의 인자는 jQuery 문법 그대로여서 브라우저 콘솔 창에 붙여 넣기하여 결과를 볼 수 있다. 코드의 짧음은 덤이다.

$ node temperature.js
27°C

아래 명령으로 package.json 파일을 생성하여 재 사용할 수도 있다. npm 매뉴얼을 살펴보기 바란다.

$ npm init
$ npm install request –save
$ npm install cheerio –save

마무리

온라인에서 확인하거나 예제 스크립트를 다운 받아 테스트할 수 있다. 테스트 동영상도 확인할 수 있다. 조금 더 복잡한 웹 데이터 읽기를 원하면 이 책을 빌릴 수 있을까? 서비스를 참조하길 바란다. 전체 코드를 따로 볼 수 있다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.