[Cheerio],[Axios] 모듈을 사용한 웹 크롤링 - 1

https://thebook.io/

더북(TheBook)

  길벗에서 제공하는 IT도서 열람 서비스인 `TheBook`이라는 사이트가 있다. 

이렇게 주제별로 나눠져 있어, 한 페이지씩 넘기면서 책의 일부를 열람할 수 있다. 그런데 이전 페이지와 연결되는 경우 이전으로 다시 돌아가야 하는 불편함이 있다. 그래서 이 웹사이트를 크롤링해서, 내용을 html로 직접 가져온뒤 다시 웹페이지로 렌더링 해주는 서비스를 만들어 보려한다.

 

TheBook의 URL은 아래와 같다.

https://thebook.io/080212/ch01-01/

thebook.io 다음에 오는 URL은 책의 id이다. 그 다음 오는 URL은 책의 각 주제와 소주제를 의미한다. 

URL에 책의 id만 입력하여 접속하면, 이렇게 '목차' 부분이 로드 된다. 목차에는 아래와 같이

각 주제와 소주제로 연결되는 링크가 a태그의 href 속성에 존재한다. 이 부분을 크롤링하여 모든 URL를 모아 둔 뒤, for문으로 다시 이 URL의 책 내용을 크롤링 할 예정이다.

 

npm init -y

으로 node 프로젝트를 하나 생성한다. 루트 디렉터리에 fetching.js 파일을 하나 생성한다.

https://www.npmjs.com/package/axios

axios

axios 는 클라이언트에서 손쉽게 웹 서버에 요청을 보낼 수 있도록 도와주는 모듈이다. 또한 Promise를 반환하기 때문에, data fetching 이후의 동작을 쉽게 정의할 수 있다. (동기적 프로그래밍이 쉽다.) 이 모듈을 사용해서 TheBook 웹페이지의 책 내용을 로드하려 한다. 

 

먼저 위에서 언급했던 목차를 크롤링 해보자.

 

html을 로드하기 위해서는 일단 TheBook.io 서비스에 get요청을 보내야 한다. 

npm install axios

터미널에서 npm으로 axios 패키지를 설치한다.

 

/fetching.js

const axios = require('axios');
axios.get(`https://thebook.io/080212`)
    .then(dataa => {
        console.log(dataa);
    });

axios.get 메서드에 get 요청을 보낼 주소를 입력하면, 프로미스가 반환되고, 따라서 then 메서드를 사용할 수 있다. then 메서드에 인수로 들어가는 함수의 파라미터로, get 요청에 대한 response가 전달된다. 

이와 같이 response 객체의 data 프로퍼티에 웹 서버에서 반환하는 html이 담겨 있다.

 

이 html 에서 직접 문자열을 검색해서 '목차'에 해당하는 부분을 찾을 수도 있겠지만, 복잡하고 어려운 작업이다. 이를 훨씬 쉽게 해결해주는 모듈이 있는데, 바로 cheerio 이다.

https://cheerio.js.org/

cheerio

cheerio 모듈은 html을 로드하여 jQuery 처럼 사용할 수 있게 해준다. 

npm install cheerio

/fetching.js

const axios = require('axios');
const cheerio = require('cheerio');

let $href = [];
axios.get(`https://thebook.io/080212`)
    .then(dataa => {
        const $ = cheerio.load(dataa.data);
        $('section.book-toc>ul>li>a').each((index, item)=>{$href.push(item.attribs.href)});
    });

cheerio.load(dataa.data) 로 html을 로드하면 이제 html을 파싱해서 사용할 수 있다.

Thebook의 html 에서 section.book-toc 태그 아래에 목차가 들어있는 것을 확인할 수 있다. 따라서 section.book-toc>ul>li>a 이렇게 하위의 태그들을 선택하고, 이는 배열이기 때문에 .each 메서드를 사용해서 href 속성의 값을 $href 배열에 저장한다. 

 

$href 배열을 보면 아래와 같이 책 주제와 소주제에 대한 URL이 담겨 있는 것을 확인할 수 있다.

이제 이 URL에 대해 axios로 다시 요청을 보내서 책의 내용을 그대로 크롤링 해야한다.