![](https://steemitimages.com/1280x0/https://cdn.steemitimages.com/DQme7wpJFnH24PeV6xEhbEEoQsFUBYCEixN1MR1KxBxam2q/dailycoding.jpg)

# 출처

> [Basic Web Scraping Using JavaScript with Node.js + Puppeteer](https://www.freecodecamp.org/news/web-scraping-using-nodejs-puppeteer/)

이 글에서는 JavaScript 로 브라우저 자동화를 사용하여 웹 페이지 정보를 가져오는(scrap) 방법을 배웁니다.  이를 위해 Puppeteer(꼭두각시인형) 을 사용할 것입니다.

# 필요 툴(라이브러리)

* Nodejs - https://nodejs.org/en/
* Puppeteer - https://github.com/puppeteer/puppeteer

# 작업방법 

> 일반적으로 웹 스크래핑은 아래 2가지 방법으로 나뉘어집니다.

* http 요청을 통해 데이터 가져오기
* html DOM 구조를 분석(parsing) 하여 중요 데이터 추출하기

본 예제에서는 웹사이트에서 책의 가격과 제목 정보를 가져오는 연습을 할 것 입니다.

# 설치

> nodejs 가 설치 되었다는 가정 하에 puppeteer 를 설치합니다.

```
$ mkdir scraper
$ cd scraper
$ npm i puppeteer — save
```

# 준비단계

> 대략적인 작업 틀을 구성해 봤습니다. 

* 라이브러리를 로드하고 
* 스크랩 함수를 만들고 
* 스크랩 이후 후처리를 수행합니다.

```
const puppeteer = require(‘puppeteer’);
let scrape = async () => {   // 실제 스크래핑은 여기부서 시작
// Return a value
}; 

scrape().then((value) => {   

    console.log(value);  // 성공 !
 });
```

# 1단계

> 웹 브라우져를 열어 특정 페이지로 이동한 이후 해당 페이지의 정보를 가져옵니다.

```
let scrape = async () => {  
 const browser = await puppeteer.launch({headless: false});  
 const page = await browser.newPage();  
 await page.goto('http://books.toscrape.com/catalogue/a-light-in-the-attic_1000/index.html');  
 await page.waitFor(1000);  // Scrape   
 browser.close();  
 return result;
 };
```

# 2단계 - 스크래핑

> 화면 정보가 갱신되길 기다린 이후 dom 정보에서 추출하려는 정보를 확인한 이후 제목(title)과 가격(price) 정보를 추출 합니다.

![](https://cdn.steemitimages.com/DQmV1a77cYkkHhNhpbeN9mrSA9HVE21pL8zCjxUsfRNjSmJ/image.png)

```
const result = await page.evaluate(() => {  
 let title = document.querySelector('h1').innerText;  
 let price = document.querySelector('.price_color').innerText;
 return {  title,  price}});
```

# 최종 코드

```
const puppeteer = require(‘puppeteer’);
let scrape = async () => { 
 const browser = await puppeteer.launch({headless: false}); 
 const page = await browser.newPage(); 
 await page.goto(‘http://books.toscrape.com/catalogue/a-light-in-the-attic_1000/index.html'); 
 await page.waitFor(1000); 
 const result = await page.evaluate(() => {  
  let title = document.querySelector(‘h1’).innerText;  
  let price = document.querySelector(‘.price_color’).innerText; 
 return {title,price}});
 browser.close(); 
 return result;
 };
 scrape().then((value) => { 
  console.log(value); // Success!
 });
```

# 실행

> 실행 결과 아래와 같이 책의 제목과 가격 정보를 확인할 수 있습니다.

```
node scrape.js// { title: 'A Light in the Attic', price: '£51.77' }
```

# 참조

* [List of free web scraping tools](https://www.scrapingdog.com/blog/top-10-best-data-scraping-tools-&-web-scraper)
* [The 10 Best web scraping proxy services](https://www.scrapingdog.com/blog/top-10-residential-proxy-providers-2020)
* [Puppeteer Documentation](https://github.com/GoogleChrome/puppeteer)
* [Scrapingdog Documentation](https://www.scrapingdog.com/documentation.html)
* [Guide to web scraping](https://www.scrapingdog.com/blog/ultimate-guide-to-web-scraping.html)

# 맺음말

> 웹에 게시된 정보를 가져와 재판매 하는 행위는 불법일 수도 있으므로 매우 유의 해야 됨

웹 스크래핑을 이용하면 다양한 정보를 가져와 내가 원하는 2차적인 정보를 제 가공 하여 구성할 수 있습니다. 예를 들면 세계 각국에서 수치화 된 정보를 가져와서 해당 정보를 모아 차트로 보여 주면 매우 유익하겠죠 :)

오늘도 멋진 코딩 라이프 즐기셨음 하는 바램입니다.