웹 데이터 읽기 – 브라우저 없이

웹 데이터를 읽어오는 여러 가지 방법을 시도할 예정이다. 기능간의 차이점을 분석할 수 있다고 생각한다. 우선 유틸리티를 사용한 웹 데이터 읽기를 시도한다.

오늘의 기온을 표시하는 서비스를 만들기 시작했다고 상상한다. 오늘의 기온 데이터가 웹에 있다면 웹 검색이 먼저다. 브라우저 없이 웹 데이터 읽기 가 글 제목인데 브라우저를 검색을 하는 것이 이상하지만 URL 주소를 찾기 위해 처음 한번만 사용할 예정이다. 매번 구글에 접속해서 “오늘의 온도”를 검색하는 것에 비해 아래 3가지 장점이 있다.

  • 다른 스크립트에서 이 값을 사용할 수 있다.
  • 그 내용이 변경되는 경우에도 다시 읽기가 쉽다.
  • 상대적으로 웹 데이터 읽기 속도가 빠르다.

브라우저가 하는 일을 간단하게 정리하면 아래 두 단계로 나눌 수 있으며

  • 웹 사이트에게 데이터를 요청하여 텍스트로 이루어진 파일을 다운로드한다.
  • 이 파일을 해석하여 보기 좋게 보여준다

각 단계는 아래의 표준을 지킨다.

  • 웹 서버와 브라우저 사이에 전송 표준: HTTP
  • 웹 데이터 파일 표준: HTML, CSS 그리고 JavaScript

브라우저가 아닌 프로그램도 표준을 만족하면 브라우저처럼 웹 데이터를 읽을 수 있다. 아래는 브라우저 대신 curlhgrep을 사용하여 웹 데이터를 읽는 방법이다.

웹 데이터 찾기

오늘의 서울 기온을 찾으려면 브라우저를 사용하여 데이터가 위치하는 URL을 확인해야 한다. 세계 날씨를 알려주는 아래 사이트에 접속하여 서울의 현재 기온을 눈으로 확인한다. 상세 주소는 아래와 같을 것이다.

https://www.accuweather.com/ko/kr/seoul/226081/weather-forecast/226081

이 페이지에서 온도 문자열을 찾자. 약간 우상단에 “28°C” 문자열이 보인다.

이 문자열을 선택하기 위하여 브라우저 디버깅 도구인 Element Selector를 사용하겠다[Ctrl+Shift+c].

마우스로 온도 문자열을 선택한다.

하단 HTML 코드에서 선택된 코드 라인위에 마우스 오른쪽을 누른후 옵션 메뉴로 Copy Selector을 선택하면 클립모드에 문자열이 복사된다. 이 selector 문자열을 얻는 것이 목적이다.

이 문자열이 정확하게 28도를 가리키는지 브라우저 콘솔에서 바로 테스트 할 수 있다. [Ctrl+Shift+j] 키를 입력하여 브라우저 콘솔 창을 연다.

그리고 아래 코드를 복사하여 붙여 넣는다. 아래 코드에서 따옴표로 둘러싸인 문자열이 클립보드로 복사된 [CSS selector][cssselctor]이다.

var a = document.querySelector('#current-city-tab > a > span.local-temp');
a.textContent;

a.textContent의 값이 온도 문자열임을 확인할 수 있다.

이 사이트는 jQuery를 사용하고 있음으로 jQuery가 $에 할당되어 있어 아래 코드도 붙여 넣기 하면 동일한 결과를 볼 수 있다.

var a = $('#current-city-tab > a > span.local-temp');
a.text();

데이터 찾기에서 얻은 것은 URL과 CSS selector 문자열 두 가지다. 이 정보를 가지고 기온 데이터를 얻어 올 수 있다.

웹 데이터 다운로드

curl을 사용하면 브라우저 없이도 HTML 파일을 다운로드할 수 있다.

웹 데이터 파싱

이제 다운 받은 파일에서 기온 데이터를 분리해야 한다. hgrep을 사용할 예정인데 이 툴은 Node.js 설치가 필요하다. 그리고 아래 명령으로 툴을 설치하자.

$ npm install -g hgrep

hgrep에게 CSS Selector 문자열을 전달한다.

$ cat c.html | hgrep -t “#current-city-tab > a > span.local-temp”
28°C

간단하지만 터미널에서 명령어로 웹에 위치하는 데이터를 가져오는데 성공했다. 불편하면 다운로드와 파싱을 아래 한 문장으로 처리할 수도 있다.

$ curl https://www.accuweather.com/ko/kr/seoul/226081/weather-forecast/226081 | \
hgrep -t "#current-city-tab > a > span.local-temp"
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  100k  100  100k    0     0  41719      0  0:00:02  0:00:02 --:--:-- 41728
28°C

curl 에 -s 옵션을 추가하면 위의 % 로그 파일을 제거할 수 있으며 아래 명령으로 bash의 환경 변수에 저장할 수 있다.

$ export SEOUL_TEMP=`curl -s https://www.accuweather.com/ko/kr/seoul/226081/weather-forecast/226081 | \
hgrep -t "#current-city-tab > a > span.local-temp"`
$ echo $SEOUL_TEMP
27°C

답글 남기기

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

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.