웹 크롤러 기술의 고차원적인 내용을 다루지 않습니다. 단순히 특정 시점 웹 페이지의 콘텐츠 수집을 통한 토이 프로젝트용 데이터 구축을 목적으로 합니다.
시작하며
여러 토이 프로젝트를 진행할 때 마다 개발환경을 설정하고 가장 먼저 고민하는 내용은 바로 데이터의 부재였다. 특히, 유명한 웹 사이트의 클론코딩을 진행했을때 임의의 데이터값을 스스로 만들어 UI적인 구현을 해보는 경험도 있었다.
문득, 웹 페이지의 html 태그의 내용들을 통해 데이터 정보를 보다 쉽게 추출하여 가공한다면 손쉽게 많은 양의 데이터도 다뤄보고 이에 따른 사용자 경험에 대한 새로운 공부를 할 수 있지 않을까? 라는 생각을 하게 되었고 관련된 내용을 구글링하는 도중 웹 크롤러에 대한 키워드를 얻을 수 있었다.
간단히 nodejs를 활용한 웹 크롤러를 통한 데이터 구축 사례들에 대해 문서들을 읽어 보았고 이를 활용해 나의 토이 프로젝트들에 활용할 데이터 생성을 위한 간단한 애플리케이션을 구현해보려고 한다.
이 과정의 시작으로 웹 크롤러에 대한 기초 학습과 간단한 사용법을 기록해보려한다.
웹 크롤러
웹 스크래핑이라고도 불리며 웹 페이지를 탐색하여 원하는 정보를 추출하는 방식이다.
웹 페이지를 방문하여 HTML 코드 전체를 불러오고, 원하는 정보가 표시된 HTML 태그를 찾아 태그안의 정보를 추출하는 것이다.
즉, 아래와 같이 3가지 과정으로 요약할 수 있다.
- HTTP 통신을 통한 웹 페이지 접근 및 HTML 전체 코드 조회
- 원하는 정보가 담긴 HTML 태그 찾기
- 찾은 HTML 태그 안의 정보 추출
nodejs로 구현해보기
내가 구상한 애플리케이션 구조는 client/server 영역으로 나누어보려고 한다.
client는 nextjs를 활용하여 UI를 구성하고, 거기서 가이드라인을 제공하고 사용자에게 입력값을 받으면 server에서 추출한 데이터를 가공하여 json 형태로 쉽게 볼 수 있도록 반환해주는 형태를 1차적으로 계획하고 있다.
여기선 간단하게 server 환경에서 데이터를 추출하는 기초 과정을 다루어보려고 한다.
robots.txt
데이터를 수집하기 위해선 웹 페이지의 스크랩핑 정책을 잘 확인해주자.
데이터를 추출하고 싶은 웹 사이트가 있더라도 웹 사이트가 스크랩핑 관련 규정을 명시해놓은 상태라면 이에 따르는 것이 바람직하다.
규정을 확인하는 방법은 웹 페이지의 루트 페이지 url(.com, .co.kr 으로 끝나는) 뒤에 /robots.txt를 추가해 접근하면 된다.
예를들어 네이버의 경우 www.naver.com/robots.txt 이렇게 접속하면 바로 규정에 관련하여 웹 브라우저에 표시되거나 자동으로 txt 파일을 다운받아 확인할 수 있다.
간단하게 규정을 확인하는 법을 알아보았다.
User-agent: * # 모든 접근 프로그램들에 적용ㅎ합니다.
Disallow: / # 모든 페이지들의 스크래핑을 금지합니다
Disallow: /help # /help.html 과 /help/index.html 둘 다 허용 안됩니다
Disallow: /help/ # /help/index.html는 허용 안하나, /hepl.html은 허용됩니다
---
User-agent: # 접근을 허용하지 않을 프로그램 이름을 설정합니다
Disallow: # 허용하지 않을 항목에 대해 설정합니다
# 단 "Disallow"를 빈 값으로 설정할 경우, 모든 하위 경로에 대한 접근이 가능합니다
# 그리고 robots.txt 파일에는 최소한 한 개의 "Disallow" 필드가 존재해야만 합니다
Allow: # 허용하는 항목에 대해 설정
내가 공부한 내용은 이렇지만 본인이 사용해야한다면 꼭 본인이 공부해보자.
puppeteer, cheerio
puppeteer는 headless UI 라이브러리이다. 즉, UI가 없이 CLI에서 동작하는 라이브러리이다.
백그라운드에서 동작하며 특정 페이지에 접속하고 렌더링을 도와주는 역할을 한다.
cheerio는 puppeteer를 통해 파싱한 HTML 정보에서 필요한 정보를 추출하는데 사용하는 라이브러리이다.
jquery 문법을 통해 편리하게 사용할 수 있다.
각 라이브러리의 주요기능에 대해서는 나에게 필요한 기능들을 위주로 알아보며 공부하자.
설치
npm i puppeteer
npm i cheerio구현
// index.js
const puppeteer = require("puppeteer");
const cheerio = require("cheerio");
(async () => {
// headless 모드의 가상 브라우저 실행
const broswer = await puppeteer.launch({
headless: "new",
});
// 페이지 생성
const page = await broswer.newPage();
// 페이지 url 이동
await page.goto("https://category.gmarket.co.kr/listview/L100000104.aspx");
// 페이지 콘텐츠 조회(전체 HTML 코드)
const content = await page.content();
// 데이터 추출을 위한 cheerio 로드
const $ = cheerio.load(content);
// jquery 문법으로 데이터 접근하여 추출
const lists = $("#cppLargeCategoryBest > li");
console.log(lists.length);
// 가상 브라우저 종료
await broswer.close();
})();
코드는 위에서 언급한 robots.txt를 통한 규정을 확인하고 G마켓의 남성 브랜드 의류 카테고리의 베스트상품을 조회해보았다.
// 실행
node index.js실행해보면 조회한 리스트 태그의 길이를 반환한다. 여러 테스트를 통해 나만의 데이터셋을 재밌게 구축해보자.
다음 포스팅은 TDD를 통해 테스팅 코드를 작성해보고 타입스크립트를 적용하여 조회한 데이터를 반환하는 내용에 대해 다루어야겠다.
