[JS] puppeteer로 구글 검색 결과 크롤링하기

제이제이·2022년 8월 19일

웹 크롤링이란?

셀렉터 (Selector)

puppeteer를 이용하여 웹에서 원하는 데이터를 가져오려면 셀렉터를 이용해야 한다. 셀렉터라는 이름 그대로 선택을 하는 목적을 위해 사용하며, 웹에서 가져온 HTML 데이터에서 div, h1, span과 같은 태그 이름과 class(.class_name), id(#id_name)로 원하는 특정 요소를 선택해서 가져올 수 있게 한다.

셀렉터의 정의와 패턴 (CSS3 Selector | PoiemaWeb)

개발자도구로 '구글 검색 결과' 살펴보기

'구글에서 어떤 것을 검색한 결과 페이지'를 개발자도구의 Elements 탭에서 살펴보면 class 이름이 어떤 단어가 아닌 랜덤해보이는 형태(ex_ Ww4FFb)로 써있는 것을 볼 수 있다.

CSS Module은 class 이름을 고유한(unique) 값으로 변환시키는데, 고유한 범위(scope)를 가진 고유한 class 이름은 개발자가 예상하지 못한 class 이름의 충돌을 방지하고 이를 통해 생산성을 향상시킨다.

구글은 base64로 인코딩한 6글자 형태의 짧은 이름으로 변환한다. 고유값을 너무 긴 이름으로 변환하면 CSS 번들 크기를 증가시키고 페이지의 렌더링 속도를 늦출 수 있다. class 이름이 짧으면 네트워크를 통해 전송해야 하는 데이터 양이 적기 때문에 렌더링 속도가 빨라지고 사용자 경험이 향상되는데, 너무 짧은 이름은 class 이름 간에 충돌 가능성이 있기 때문에 적합한 길이로 6글자를 선정한 것으로 보인다.

Why Google use random ClassName

Puppeteer

자바스크립트에서 크롤링이 가능한 라이브러리 중에 최근 다운로드 수가 압도적으로 많고, 구글에서 만든 라이브러리라는 점 때문에 사용하게 되었다.

많은 API를 가지고 있는데 크롤링 외에도 서비스에 로그인 뒤 특정 동작하기 등 브라우저에서 다양한 동작을 하는 웹을 구현할 수 있다. 크롬과 크로미움에서만 동작한다는 단점이 있다.

Puppeteer 공식 문서

// page.$$() : () 안에 넣은 셀렉터에 해당하는 항목을 전부 가져온다.  
const contents = await page.$$('');

// contents에서 세부적인 데이터를 뽑기 위해서 
// page.evaluate를 이용하여 하나씩 데이터를 처리한다.
// querySelector로 원하는 항목을 지정해서 가져온다.
const evaluateData = await page.evaluate(content => {
    const data = {};

    data.name = content.querySelector('').innerHTML;
    data.link = content.querySelector('').getAttribute('href');

    return Promise.resolve(data);
  }, contents);