[패스트 캠퍼스] 한 번에 끝내는 NODEJS 웹 프로그래밍 강의 후기 : 프론트엔드 part1(크롤링)

 #NODEJS, #크롤링, # 

 

 

Node.js 프론트엔드 part1(Brunch Crawler 만들기)

노드 js를 활용하연 브런치 사이트를 검색고 게시글 데이터를 크롤링 한다.

노드 js를 활용하여 무한 스크롤을 만들어 보자.

 

Brunch Crawler 만들기

Node.js Brunch Crawler 만들기

뉴스피드 형태의 무한 스크롤이 되는 사이트

페북, 인스타, 트윗, 배민 등 브런치도 스크롤을 내리면 계속 검색이 되는 사이트다.

무한 스크롤이 적용된 브런치 사이트

위 브런치 url을 이용하여 화면의 정보를 가져오는 nodejs 프로그램을 만들어보자.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({
      width: 1440,
      height: 900,
  })
  await page.goto('https://brunch.co.kr/search?q=IT&type=article');
  await page.screenshot({ path: 'brunch.png' });

  await browser.close();
})();

나의 예상은 위 그림과 같은 브런치 검색 화면에 캡쳐되길 기대했다.

하지만 결과는 아래와 같이 빈 화면이 만들어 지는것을 확인할 수 있다.

크롤링으로 캡쳐한 브런치 화면

이러한 이유는 url의 query string을 동적으로 인식하지 못하는데 발생한다.

이를 해결하기 위한 기본적인 방법을 고민해보면

"검색어 입력"에 커서가 위치하게 한 후 검색어를 입력하고 검색(Enter)을 하면 될거 같다.

nodejs 프로그램을 아래와 같이 수정해 보자.

  await page.goto('https://brunch.co.kr/search');
  await page.click("input.txt_search");
  await page.keyboard.type('IT');
  await page.keyboard.press('Enter');

이제 코드를 실행하면 아래와 같은 결과를 얻을 수 있다.

우리는 이제 뉴스피드 형태의 웹페이지에서 동적으로 데이터를 조회할 수 있는 크롤링을 만들어 보았다.

 

 

무한 스크롤을 구현하기

브런치 사이트에서 검색된 게시글 데이터를 획득하는 크롤링을 만들어 보았다.

하지만 스크롤을 내릴때 계속 검색이 되는 화면은 어떻게 만들 수 있을까??

간단한 수도코드를 작성해 보자!!

 

1. 검색이 완료됨

2-1. 마우스 스크롤을 해서 밑으로 내린다. 

2-2. 키보드 화살표 아래를 눌러서 화면을 아래로 내린다.

3. 무한 스크롤 게시글 데이터가 들어오지 않을까?

자동스크롤을 만들기 위한 수도코드

과연 이런 방법이 좋은 방법일까??

JS의 window 함수를 활용하여 화면을 조정해 보자.

하지만 nodejs 환경에서 window에 바로 접근 할 수 없다.

이를 해결하기위한 page.evaluate를 사용하여 window에 접근할 수 있다.

await page.evaluate(()=>{
      window.scrollBy(0, window.innerHeight);
});

노드 js를 통하여 스크롤 하는 방법을 반복하면 페이지를 무한스크롤 하여 게시글을 가져올 수 있지 않을까??

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
      headless: false,
  });
  const page = await browser.newPage();
  await page.setViewport({
      width: 1440,
      height: 900,
  })
  await page.goto('https://brunch.co.kr/search');
  await page.click("input.txt_search");
  await page.keyboard.type('IT');
  await page.keyboard.press('Enter');

  await page.waitForNavigation();

  let infiniteScrollInterval = setInterval(async() => {
    await page.evaluate(()=>{
      window.scrollBy(0, window.innerHeight);
    });
  }, 1000);

  setTimeout(async() => {
    clearInterval(infiniteScrollInterval);
    console.log("done");
    await browser.close();
  }, 1000*10);
})();

1초에 한번씩 스크롤을 하고 총 10초의 시간이 지나면 browser를 종료하는 코드를 구현해 보았다.

 

 

마무리

노드 js를 활용하여 브런치 웹페이지를 크롤링 하는 방법을 배워보았다.

아직 NODEJS가 익숙치 않지만 강의를 하나하나 따라해 보며

노드 js로 만들어가는 프로그래밍이 즐거움을 준다.

NODEJS가 공부하고 싶거나 fullstack developer의 기초가 필요하다면

한 번에 끝내는 NODEJS 웹 프로그래밍을 추천한다.

 

관련글

1.https://bit.ly/3pdy7Wq

한 번에 끝내는 Node.js 웹 프로그래밍 초격차 패키지 Online | 패스트캠퍼스