동적 웹컨텐츠 크롤링

최근에 간단한 웹크롤러를 만들고 있는데, 동적 웹컨텐츠를 크롤링하는 방법을 정리한다.  이 블로그에서( http://yujuwon.tistory.com/entry/PhantomJS-사용하기) 설명한 것처럼 PhantomJS을 사용하였다.

1. 동적 웹컨텐츠

아래와 같이 파이어폭스의 개발자 도구의 "네트워크" 텝을 켜서 보면, 응답의 형식이 html이 아닌, json 이나 xml 인 경우가 있다. 브라우저가 이러한 응답을 읽어서 내용을 표시해주는데 보통의 ajax 방식으로 로딩되는 경우가 이러한 경우이다. 이런 경우는 소스에서 Request 을 하는 url 을 찾기 쉽지 않다. 그래서 PhantomJS 와 같은 브라우저를 이용해서 웹페이지를 로컬로 임시로 저장해서 그것을 크롤링 하는 방법을 사용해보기로 한다.  더 좋은 방법이 있을법도 한데, 일단 동작하는 프로그램을 빨리 만들어보자.

2. PhantomJS

맥에서 PhantomJS을 사용하려면 소스코드를 다운받고 빌드를 해주어야 한다. 아래 문서를 참고하자. http://phantomjs.org/build.html

git submodule update 까지 해주고 실행하고 build을 하려고 하면 OpenSSD, Xcode 등이 없다고 빌드가 되지 않는다. 다 설치해주고 나서 build 을 해주자. build 는 조금 시간이 걸린다. 

그리고 나서 phantomjs을 이용해서 웹페이지를 로컬로 저장해보자. 간단한 js 스크립트를 이용해서 저장을 한다. 위의 소스코드는 "http://yujuwon.tistory.com/entry/PhantomJS-사용하기" 에서 복사해온 것이다. 그리고 나서 아래처럼 실행해보자.

➜  phantomjs git:(d9cda3d) ✗ ./bin/phantomjs save_web.js http://sports.news.naver.com/wfootball/news/index.nhn

공식문서의 아래 문서를 참조하면 도움이 된다.
http://phantomjs.org/screen-capture.html

3. 크롤링 라이브러리

크롤링 하는 프로그램은 scrapy 라는 파이썬 라이브러리를 이용해서 작성하고 있다. 여러모로 편리하다.
http://scrapy.org

이클립스 python 개발 환경

python 개발 도구로는 많은 것들이 있다. 나는 이클립스 환경이 익숙하기에, 이클립스에 PyDev 라는 플러그인을 설치하여 개발환경을 구축하여 사용한다. 프로젝트가 다양한 언어를 사용하여 이루어진 경우, 별도의 IDE 을 열지 않고, 이클립스 하나만으로 프로젝트 전체 코드를 보는데 유용하기도 하다.

1. PyDev 설치하기

이클립스 마켓플레이스에서 pydev 을 검색하여 설치한다.

2. PyDev 프로젝트 생성하기

3. intepreter, python path

프로젝트를 생성한 다음에, 마우스 오른쪽 버튼을 눌러서 프로젝트 속성으로 이동한다. 거기서 파이썬 버전과 파이썬패스를 설정해 줄 수 있다.

4. HelloWorld 

자, 이제 HelloWorld을 찍어보자.

5. 라이브러리 추가하기

개발을 하다보면 라이브러리를 추가해야 할 경우가 있다. 이클립스에서는 아래와 같이 "Add zip/jar/egg" 버튼을 눌러 라이브러리가 설치된 경로를 지정해주면 된다.

Javascript Guide

Recently, I have been developing web app using AngularJS. But it have been long time since I used javascript. So, I just write learning test after study MDN to remind my memory :-). If you click each title, you can access actual topic.

1. Write javascript test case with Jasmine

How to write javascript test case using jasmine and run it.

2. Javascript type and grammar

Basic grammar of javascript. dynamic typing, variable, object, arrray, etc

3. Javascript function

Define function, Call by value, Call by reference, arguments, closure

4. Javascript block scope, falsy value, error handling

Block scope, try catch, falsy value

5. Javascript loop

continue-break, for..in, for..of statements

6. Javascript expression and operator

expression and operator like equal, strict equal, negation, plus, typeof, void

7. Javascript array

Declare array, itereate, attribute and related method like concat, push, etc.

8. Javascript map and set

Attributes of map and set, difference with object

9. Javascript object

How to create object, attribute, iterate attribute

10. Javascript object model and inheritance

Javascript object model and prototype inheritance, constructor function, instanceof and many related concepts.

11. Javascript development environments

Development environment using npm, grunt, karma, jasmine

12. Javascript continuous integration

Javascript CI using jenkins, git, gerrit, phantomjs, npm, grunt, karma, jasmine