website의 html, javascript 소스 및 이미지 정보를 모두 가져올 수 있는 httrack 툴을 테스트해보겠습니다. 윈도우, 맥에서 모두 사용가능합니다. 저는 맥을 사용하고 있어 맥 기준으로 테스트 진행해보도록 하겠습니다. 전체 html, javascript, image 소스를 모두 가져오기 때문에 사이트에 따라 시간이 엄청 오래 걸릴 수도 있습니다. 아래는 사이트 캡처화면입니다. 다운로드 탭에서 해당하는 버전을 다운로드 받으시면 됩니다. 맥에 homebrew가 설치되어 있는 경우 아래 명령어로 쉽게 설치 가능합니다. 설치를 완료했으면 이제 실행파일을 열어 보겠습니다. 맥에서는 아래 커맨드를 입력하면 자동으로 실행됩니다. 실행하면 아래와 같은 웹사이트가 로컬에서 열립니다. 넥스트를 눌러주면 아래와같이 어디 폴더에 저장할지 탭이 나옵니다. 각각 입력해줍니다. 아래 화면이 노출되고 이제 스타트 버튼을 누르면 웹사이트 소스가 다운받아집니다. 다운로드를 받고 있는 모습입니다. 티스토리를 백업하거나, 아니면 특정 사이트의 전체 소스를 백업해야 될때 유용하게 사용 할 수 있을 것 같습니다. 단 타 사이트를 백업할 경우 저작권에 유의해야 합니다. 데이터를 활용하여 유용한 서비스 및 어플리케이션을 만드는 사례들이 늘어가고 있다. 이 때 원하는 공공데이터 혹은 일반 오픈 데이터를 찾지 못하는 경우 웹사이트를 그대로 가져와서 직접 처리하는 경우를 많이 볼 수 있다. 이런 방법을 크롤링(Crawling) 혹은 스크래이핑(Scraping)이라고 한다. 아마 크롤링이나 크롤러는 많이 들어보셨을 듯! 대표적으로 팀포퐁에서는 직접 파이썬을 이용한 크롤러를 만들어서 각종 정치 데이터를 가공한다. 가공한 데이터를 API 형태로 공개도 하고있다. 팀포퐁의 강철님께서는 파이썬 코리아 컨퍼런스 행사에서 '30분만에 따라하는 동시성 스크래이퍼'라는 주제로 발표한 적도 있다. 30분만에 동시성 스크래이퍼를 따라한다면 단순한 스크래이핑은 10분만에 가능하지 않을까? 꼭 스크래이핑은 파이썬으로만 해야할까? 그래서 준비했다. 자바스크립트를 활용한 '10만에 따라하는 HTML 긁어오기'. 굳이 10분만에 따라할 수 있는 것은 HTML을 가져오기 위한 가장 기본적인 기능만을 만들어볼 것이다. 그리고 숙련된 개발자보다 이제 웹개발에 관심을 갖게된 분들에게 스크래이핑을 소개하는 차원에서 쓰는 예제이다. 마지막으로 개발자들이 자꾸 크롤러, 스크래이퍼 거릴 때 답답해하던 기획자와 디자이너 분들을 위해 기본적인 원리를 이해할 수 있도록 준비해보았다. 필요한 도구: request, cheerio
request를 이용하여 HTML 가져오기
request에 필요한 요소는 내가 데이터를 가져오고자 하는 웹사이트의 URL 주소이다. 그래서 request(URL, function (err, response, html) { // URL로부터 가져온 페이지 소스가 html이란 변수에 담긴다. }) 이렇게 가져온 소스코드를 블로그 제목 가져오기
이제 본격적으로 불러온 웹사이트에서 원하는 정보를 탐색해보자. 우선 원하는 정보가 담겨져 있는 HTML 구조를 파악해야 한다. 코드나무 블로그를 들어가서 HTML 구조를 살펴보자. 사진 속 화면은 파이어폭스 개발자 에디션(참조: 모질라가 만든 개발자를 위한 첫 브라우저: 파이어폭스 개발자 에디션) 브라우저의 'Inspector' 기능('cmd + alt + c')을 사용하여 HTML 구조를 살펴보는 모습이다. 현재 코드나무 블로그 웹사이트의 구조는 다음과 같다.
|