SUGARCANE의 이야기

  Pixabay, UnSplash.com, Flicker... 여러분들 모두 발표자료를 준비하면서 고퀄리티의 이미지를 구하기 위해 한 번쯤은 저 사이트에 들어가보셨을 겁니다. 여러분들은 저 사이트에서 다운받은 이미지들을 어떻게 관리하시나요? 혹시 한번 사용한 후 나중에 다시 그 이미지를 구하러 컴퓨터 이곳저곳을 헤집거나, 다시 다운받지 않으신가요? 혹은 여러 이미지들을 일일이 손으로 누르면서 다운받고는, 발표자료랑 어울리지 않는다는 느낌이 들어서 다시 다른 이미지를 다운받지 않으신가요?  저 같은 경우에는 그러한 일을 많이 겪었습니다. 그러던 어느 날, 재밌는 생각이 들었습니다.  '고양이'라는 검색어를 치면 나오는 이미지들을 컴퓨터에 체계적으로 다운받아서 정리해주는 프로그램을 만들면 어떨까? 그러면 처음 한 번 다운받아놓고 나중에는 골라서 쓰면 될텐데   라는 생각이죠. 생각이 떠오른 순간 Node.js로 크롤러를 만들어서 시험을 해봤습니다. 일이 거기서 끝났으면 정말 편했었을텐데요. 아쉽게도 Pixabay는 일반적인 방식으로 크롤링이 되는 사이트는 아니더군요. 그러나 여기서 포기하기에는 아직 멀었습니다. 우리에게는 웹 크롤링을 편리하게 해주는 CasperJs 라는 강력한 툴이 있기 때문이죠. *여기서 잠깐! CasperJs나 CSS 선택자 속성에 대해서 잘 모르시는 분들은 이전 포스팅인 PhantomJs로 Blogger 댓글 조회 프로그램 작성하기 나 PhantomJS와 CasperJS 를 읽고 와주세요.  먼저 크롤링이 가능한지 확인하기 위해서 저번 시간에 짰던 스크린샷을 찍는 코드를 이용해서 테스트를 해봤습니다.   네, 결과는 완벽했습니다. 크롤링이 가능했죠. 그럼 이제부터 본격적으로 코드를 짜기 시작했습니다. 가장 처음에 해야 할 일은 바로 이미지 하나하나의 CSS 선택자 속성을 찾는 것 입니다. 지난 시간에 썼던 방식을 그대로 사용하겠습니다. ...

웹사이트를 돌아다니며 정보를 긁어오는 프로그램을 작성할 때는 여러 가지 고려할 요소가많습니다. 로그인을 한 후의 데이터를 얻거나 봇이 접근하기 어렵게 짜여져 있거나 웹페이지가 렌더링된 다음의 데이터를 얻어야 하는 경우들이 그 예이죠. 그런 상황들을 쉽게 컨트롤 할 수 있게 하는 몇 가지 도구들이 있는데 그것들이 바로 PhantomJs와 CasperJs입니다. PhantomJs는 화면이 없는 상태에서 커멘드 라인드로 사용하는 브라우저이고, CasperJs는 PhantomJs를 쉽게 쓸 수 있게 하는 라이브러리입니다. PhantomJs는 렌더링 엔진으로 WebKit엔진을 사용하는데, 이 말은 애플의 사파리 브라우저와 거의 동일한 환경이라는 뜻입니다. PhantomJs에서 할 수 있는 일에는 여러 가지가 있는데, 특정 URL로 접속했을 때의 스크린샷을 찍을 수도 있고 화면의 특정 엘리먼트를 마우스 클릭하는 이벤트를 실행할 수도 있습니다. PhantomJs의 공식 웹사이트는 다음과 같습니다. http://phantomjs.org/ CasperJs는 PhantomJs를 사용할 때 보다 쉽게 사용할 수 있도록 하는 라이브러리입니다. CasperJs의 공식 웹사이트는 다음과 같습니다. http://casperjs.org/ Node.js가 컴퓨터에 설치되어 있다고 가정하고 cmd를 켜서 다음의 명령을 입력합니다. npm install -g phantomjs npm install -g casperjs 이제 casperJs를 이용해서 간단한 화면 캡쳐 프로그램을 작성해 보겠습니다. var casper = require('casper').create();  //casper 객체를 생성합니다. casper.start(); casper.open('https://sidea510.blogspot.kr/');  //페이지를 엽니다. casper.then(function(){     casper.capture('sc...

Jpub의 <자바스크립트와 Node.js를 이용한 웹 크롤링 테크닉>이란 책의 소스코드를 참고했습니다. 책을 읽던 중 티스토리 관리 페이지에 로그인해서 새 댓글을 확인하는 프로그램을 만드는 부분을 보게 되었습니다. 그러나 저는 티스토리 초대장이 없는 관계로 책의 소스를 응용해서 Blogger의 새 댓글을 확인하는 프로그램을 만들어 보았습니다. 우선 PhantomJS와 CasperJs를 컴퓨터에 설치해줍니다. npm install -g phantomjs npm install -g casperjs 이 프로그램을 만들 때 가장 먼저 해야하는 작업이 Blogger에 로그인하는 것입니다. 구글 계정으로 로그인되어있지 않은 상태로 다음 URL로 들어가게 되면 로그인 창이 뜨게 됩니다. https://accounts.google.com/ServiceLogin/identifier?hl=ko&passive=true&service=blogger&ltmpl=blogger&continue=https%3A%2F%2Fwww.blogger.com%2Fhome&flowName=GlifWebSignIn&flowEntry=AddSession 일단 우리의 목표는 저 입력창에 이메일을 입력하는 것입니다. 크롬 창에서 F12 를 눌러 개발자 모드를 켠 후, Ctrl+Shift+C 를 누르고 입력창을 가리키면 입력창의 CSS 선택자 속성이 뜨게 됩니다. 조사해 보니 이메일 input 태그의 name 속성은 identifierId  이고 form 태그의 선택자 속성은 form.RFjuSb.bxPAYd.k6Zj8d 입니다. 지금까지의 코드를 정리해 보겠습니다. var casper = require('casper').create({ verbose: true, loglevel: 'debug'}); var urlLogin = "구글 로그인 주소"; ...