NodeJS 웹 크롤링 Ch03

노드 웹 크롤링 Ch03

3.1 이미지 다운로드 준비

엑셀에 이미지를 넣을 수 없으니 이미지를 따로 관리해보도록 하자

이미지를 버퍼형태로 가져오고, fs모듈이 버퍼를 파일로 바꿔줌

npm i axios

const axios = require('axios');
const fs = require('fs');
//기존에 폴더 있으면 에러발생해서 폴더 생성 전 폴더 여부를 먼저 체크함
fs.readdir('poster', (err) => {
    if(err){
        //poster폴더가 없으면 에러발생, 폴더생성
        //프로그램 처음 시작될 때, 끝에 한번만 수행되는 Sync는 써도됨
        fs.mkdirSync('poster');
    }
});

이미지 주소를 추출한다음 쿼리스트링을 분석해보는 과정이 필요함

const result = await page.evalute(() => {
    const scoreEl = document.querySelector('...');
    let score = '';
    if (scoreEl)
        score = score.textContent;
    const imgEl = document.querySelector('.poster img');
    let img = '';
    if (imgEl)
        img = imgEl.src;
    return {score, img};//비구조화 할당으로 객체 리턴
});

3.2 axios로 이미지 저장하기

if (result.img)
    //쿼리스트링 제거하는 정규표현식
    //result.img.replace(/\?.*$/, '') -> ?부터 끝까지 지우기  '.'=>모든단어, '$'=>끝
    const imgResult = await axios.get(result.img, {
        //버퍼가 연달아 들어오는 자료구조로 result.img라는 링크에서 이미지 데이터를 받아옴
        responseType: 'arraybuffer',
    });
//받아온 데이터를 영화 제목에 맞춰서 저장, 확장자도 신경써야함
fs.writeFileSync('poster/${r.제목}.jpg', imgResult.data);

3.3 브라우저 사이즈 조절과 페이지스크린샷

지금까지 했던 크롤러를 동작시켜보면 화면이 잘려서 출력됨

스크린샷을 위해 브라우저의 사이즈를 키우는 방법에 대해 알아봐열

const browser = await puppeteer.launch({
	headless:...
    //브라우저 사이즈 조정
	args: ['--window-size=1920,1080']
})
const page = await browser.newPage();
//페이지 크기 키우기
await page.setViewport({
   width:1920,
    height:1080,
});

페이지 스크린샷

const buffer = await page.screenshot({ path: `screenshot/${r.제목}`.png, fullPage:true, clip:{ x: 100, y: 100, width:300, height: 300,});//버퍼 받은걸 파일로 저장가능하나 내장 옵션으로도 저장가능, 스크롤까지 추가시킨 전체페이지 스크린샷 fullPage, clip은 x,y좌표에서 width,height만큼 클립해서 스크린샷하는 옵션, fullPage랑 같이 쓸수없음.
fs.writeFileSync('screenshot/..', buffer);

3.4 query-selector과 css선택자

$() : document.querySelector()랑 같은것.

$$() : querySelectorAll()

조상 - 자손 != 부모 - 자식

부모 자식은 한단계, 조상, 자손은 2단계이상

• $$('div img'): 띄어쓰기로 구분된건 div태그의 자손들
• $('div a img'): div아래 a안에 img태그

3.5 css선택자 조합하기

• $$('div > a > img') : >는 부모, 자식관계를 나타냄
  • a는 div의 자식, img는 a의 자식
• $$('div.poster > a > img'): poster클래스를 가진 div
• 마지막에는 선택자 최적화 작업을 해줌
• $$('.poster img')
• .score.score_left .star : 클래스가 score score_left인 것의 자손중 star클래스를 가진 친구를 출력
• $('img[src]'): src가 있는 img태그
• $(img[width="26"]): width가 26인 img태그