Node.js 데이터 파싱 1) cheerio 설치 및 파싱

저는 nodejs를 데이터 모으는데 자주 사용하는 편입니다. npm에는 수많은 모듈이 있고 간단하게 npm을 이용하여 모듈을 다운받고 사용할 수 있습니다. 이번에는 데이터 파싱에 있어서 유명한 cheerio에 대해서 정리해보려고 합니다. JQuery 방식을 사용해서 가독성이 좋고 크롤링하는데 자주 쓰입니다. 

---

[목차]

1. cheerio는 왜 사용하는가?
2. cheerio 설치 및 기본적인 사용법

---

반응형

 

 

1. cheerio는 왜 사용하는가?

 

보통 크롤링하는데 node에서는 axios 라이브러리를 사용합니다. 파싱에는 cheerio 라이브러리를 사용합니다. 처음 크롤링과 파싱이 헷갈려서 이번에 정리하고 갑니다. 크롤링은 웹페이지에서 전체 HTML 데이터를 가져옵니다. 파싱은 이 데이터에서 특정 태그 부분이나 원하는 부분을 문법을 통해 걸러냅니다.

 

예를 들어 HTML 문서에서 product-name을 추출하고 싶다면

 

const productName = $('.product-name').text();

 

라는 이 코드 한 줄로 파싱할 수 있습니다. 

 

머신러닝이든 가공이든 분석을 하려면 데이터를 수집해야하며 네이버나 구글이 아닌 이상 분석을 위한 데이터를 충분히 가지고 있을리가 없습니다. 그러므로 사이드 프로젝트든 상품 사이트든 데이터는 꼭 수집해야합니다. 그러기 위해선 크롤링과 파싱은 분명하게 필요합니다. 

 

Cheerio는 Node 환경에서 파싱을 쉽게 도와주는 라이브러리입니다. 개발자나 기업체 같은 곳에서 많이 사용하고 있으며 데이터 크롤링과 파싱, 웹 스크래핑에서 두각을 나타냅니다. 특히 프론트엔드가 익숙한 JQuery 문법을 사용하며 css선택자, class이름, id 등으로 요소를 찾아 데이터를 수집할 수 있습니다. 

 

cheerio는 node 라이브러리이기 때문에 node.js 설치가 필요하며 node 설치는 간단합니다. 전 포스팅에서도 node에 대해서 정리했으니까 참고해주세요. 

 

2023.01.30 - [취미로 코딩하기] - Nodejs이란, Nodejs 설치, 웹서버 정리

Nodejs이란, Nodejs 설치, 웹서버 정리

 

 

 

반응형

 

 

2. cheerio 설치 및 기본적인 사용법

 

cheerio는 npm에 등록되어 있는 라이브러리이므로 간단한 명령어로 설치할 수 있습니다. 

node가 설치된 환경에서

 

'npm install cheerio'

 

입력해줍니다. 

 

또한 MIT라이센스라서 상업적 사용, 수정, 배포, 사적이용이 가능하므로 마음껏 사용하셔도 됩니다. 

cheerio 설치

cheerio는 require로 불러올 수 있으며 html 문서자체를 load 해야합니다. html자체의 문서를 불러올 때는 axios 라이브러리를 사용합니다. axios 라이브러리는 http api통신 라이브러리 맞습니다.

 

const cheerio = require('cheerio'); // cheerio를 불러옴
const $ = cheerio.load('<h2 class="title">Hello world</h2>'); //불러온 html문서를 넣어줍니다.

$('h2.title').text('Hello there!');  //해당 요소에 값을 넣어 줄 수 있음 
$('h2').addClass('welcome');

 

주석에 달린 것과 같이 load를 통해 html 문서를 불러옵니다. h2태그가 달려있는 class가 'title'인 데이터를 'hello there!'로 바꿔주는 예시입니다. 

 

간단한 예시로 axios를 통해서 구글의 html 문서를 가져오는 코드를 만들어보겠습니다.  

 

axios
    .get("https://www.google.com")
    .then((response) => {
      const $ = cheerio.load(response.data);
      console.log(response.data)
       
      res.status(200).json({
        titleitem: knowList,
        linkitem: linkList,
      });
    })
    .catch((err) => {
      console.log(err);
    });

 

axios 라이브러리를 이용하여 get방식 웹사이트의 HTML 문서를 얻어옵니다. 구글은 워낙 UI가 간단하다보니까 검색하지 않으면 별다른 정보가 나오지 않겠죠. 하지만 하나의 예시로 axios와 cheerio를 같이 적용하는 예제를 보았습니다. 

 

원하는 데이터가 있는 웹페이지에서 axios를 통해 불러온다음 cheerio를 이용하여 파싱하는 것입니다. 데이터크롤링과 파싱으로 수집하는 방법 중 하나입니다. 공공데이터 같은 경우나 날씨 데이터, 주가 데이터, 책 데이터 등 많은 정보를 수집할 수 있습니다. 하지만 상업적인 용도나 다른 목적으로는 사용하시면 안되겠습니다. 

 

cheerio로 쿼리할 때 기본적인 것만 알려드리고 마무리하겠습니다. 

 

id 요소를 파싱할 경우 

$(#'원하는 id요소 이름').text()

 

class 요소를 파싱할 경우

$(.'원하는 class요소 이름').text()

 

태그인 경우 직접 그 이름을 적어줌 

$('h1').text() // h1 태그

$('li').text() // li 태그

$('ul').text() // ul 태그

$('h3').text() // h3 태그

 

 

반응형

---

[함께 읽으면 좋은 글]

2023.01.30 - [취미로 코딩하기] - Nodejs이란, Nodejs 설치, 웹서버 정리

Nodejs이란, Nodejs 설치, 웹서버 정리

2023.02.26 - [취미로 코딩하기] - React.js 엑셀 스타일 적용하기, xlsx-js-style

React.js 엑셀 스타일 적용하기, xlsx-js-style

2023.01.25 - [취미로 코딩하기] - Docker, 도커를 사용하는 이유와 도커 설치법

Docker, 도커를 사용하는 이유와 도커 설치법

 

---