Node.js 크롤링 하는 방법

 

Node.js 환경 기반 크롤링 하는 방법

 

크롤링은 웹 페이지의 리소스를 긁어와서 데이터를 수집하는 가장 기본 방식입니다. 보통 파이썬을 많이 사용하시는데 Node.js 환경에서도 크롤링이 가능합니다. 여러 사이트에서 정보를 긁어온 다음 새로운 인사이트를 뽑아낼 수 있는 데이터 분석이 가능합니다.

 

 

자 우선 기본 모듈을 설치해줍니다. 

 

 

🌐️ Node.js 환경 크롤링 필요모듈

Cheerio
DOM selector 기능을 제공합니다. HTML에서 특정 데이터를 추출합니다.
https://www.npmjs.com/package/cheerio

Axios
비동기 방식으로 외부 리소스를 요청하는데 사용되는 라이브러리입니다.
https://www.npmjs.com/package/axios

 

크롤링 모듈 설정

 

페이지 크롤링을 하기 위해서는 HTML 구조를 이해해야 합니다. HTML로 작성되어 있는 웹 페이지에서 우리가 추출하고자 하는 데이터가 어디에 위치했는지 알아야 합니다.

이번에 크롤링 해볼 사이트는 부산 블록체인 규제자유특구 공지사항 페이지 입니다.

https://blockchainbusan.kr/boardlist.do?boardtype=notice 

 

 

 

공지사항들이 목록별로 가지런히 정리되어 있습니다. 

개발자 도구를 실행합니다.(Ctrl + Shift + C 혹은 F12)

상단 메뉴에서 맨 왼쪽에 있는 커서 버튼을 클릭하면 HTML 구조 별로 어떻게 구성되어 있는지 확인 가능합니다.

 

HTML 구조를 살펴보니 div 태그에 tbl_head01 tbl_wrap jspbd 클래스를 가진 태그 하위에 우리가 추출해야 할 데이터가 테이블 형태로 들어있는 것을 확인할 수 있습니다. 아래와 같은 구조입니다. 

 

 

 

div.tbl_head01 tbl_wrap jspbd
   table
      tbody
         tr
            td
               div.bo_tit
                   a

 

우선 기본 모듈을 설정합니다.

const cheerio = require("cheerio")
const axios = require("axios")
const log = console.log
const resultList = [];

 

HTML 리소스를 받아오는 함수를 정의합니다.

const getHTML = async () => {
    try {
        const response = await axios.get("https://blockchainbusan.kr/boardlist.do?boardtype=notice")
        return response
        
    } catch (error) {
        return await error;
    }
}

 

다음으로 HTML을 파싱하여 오브젝트를 배열에 담아 출력합니다. 

비동기 함수이므로 then~catch 문으로 잡아줘야 합니다.

 

 

getHTML()
    .then(html=>{
        const $ = cheerio.load(html.data);
        const $contentList = $("div.tbl_head01 table tbody tr")
        

        $contentList.each(function (idx, elem){
            const title = $(this).find("div.bo_tit a").text();
            const link = $(this).find("div.bo_tit a").attr("href")
            
            resultList.push({
                "idx": idx,
                "title": title.trim(), 
                "link" : "https://blockchainbusan.kr"+link,
            })
        })
    })
    .then(()=>{
        log(resultList)
    })

• $contentList에 리스트 형식으로 담긴 데이터를 할당합니다.
• each 함수로 요소를 순회하면서 a 태그의 Text 데이터와 href 속성값을 긁어옵니다.
• resultList 배열에 해당 값을 push 함수로 추가해줍니다.
• 비동기 함수기 때문에 then 문으로 값을 전달받아서 출력합니다.
• attr 속성값으로 이미지를 받기 위해서는 src를 인자로 전달해주면 됩니다. 

객체 형식으로 저장한 값을 데이터베이스에 담는다고 하면 도메인으로 분리해서 DB에 저장하시면 깔끔하게 들어갑니다. 

 

Node.js 크롤링 정리

 

1. 크롤링 하고자 하는 웹 사이트의 HTML 구조를 파악한다.
2. cheerio / axios 모듈 설정을 완료한다.
3. HTML 구조에 따라 파싱을 진행한다. 
4. 배열에 오브젝트 형식으로 저장한다. 

 

대표적으로 SSR(Server Side Rendering) 사이트들은 이렇게 단순하게 크롤링이 가능합니다. 하지만 CSR(Client Side Rendering) 웹 페이지들은 Javascript가 동적으로 데이터를 할당하기 때문에 단순 HTML 리소스를 긁어오면 내부에 비어있는 태그가 잡히게 됩니다.

 

 

 

이 때 사용할 수 있는 방법이 크롬 드라이버와 셀레니움을 통한 동적 크롤링입니다. 다음으로는 Selenium을 사용한 크롤링 방식을 알아보도록 하겠습니다.

 

🚀️ 도움이 되셨다면 구독과 좋아요 부탁드립니다 👍️