Node.js 에서 웹 크롤링하기

졸업작품으로 만들 웹 서비스에서 크롤링이 필요하기 때문에
Node.js 에서 웹 크롤링을 하는 예제를 따라해보려고 한다. 🌐

웹 크롤링(Web crawling)이란?

웹 크롤링(Web crawling)의 정식 명청은 Web Scraping 으로 주로 웹 페이지를 방문해서 필요한 데이터를 가져오는 것을 의미합니다. 주로 Python을 통해 많이 구현하는 걸로 알고있지만, 나는 Node.js 환경에서 크롤러를 구현하는 예제를 따라해보겠다.

📚 Node.js 라이브러리

nodeJS 로 크롤링하기 위해 필요한 라이브러리에는 Axios, Cheerio가 있다.

📌 HTTP 라이브러리 “Axios”

브라우저와 Node 환경에서 사용하는 Promise 기반의 HTTP Client로 사이트의 HTML을 가져올 때 사용할 라이브러리

📌 Parsing 라이브러리 “Cheerio”

Node.js 환경에서 JQuery 처럼 DOM Selector 기능들을 제공하며, Axios의 결과로 받은 데이터에서 필요한 데이터를 추출하는데 사용하는 라이브러리

개발환경 설정

새 프로젝트를 생성해줍니다.

$ cd <프로젝트 이름>
$ npm init

그 다음, 사용할 node.js 모듈을 설치합니다.

npm init -y 
npm install axios cheerio

📑 크롤링 할 사이트

나는 이밥차 사이트에서 음식 레시피들을 크롤링 해볼 것이다.

크롤링 구현해보기

원하는 selector 복사

이제 원하는 정보들의 위치를 찾아야 한다.
원하는 정보를 오른쪽 마우스로 클릭후 검사를 사용하면 쉽게 찾을 수 있다.
레시피의 이미지와 이름을 받아오기 위한 selector를 복사해줍니다.

📌 selector 복사 : 코드 우클릭 -> Copy -> Copy selector

[복사한 selector]

• 레시피 이미지: #con_wrapper > div.contain > div.search_con > div > ul > li:nth-child(1) > a > div.img_wrap > img

• 레시피 이름: #con_wrapper > div.contain > div.search_con > div > ul > li:nth-child(1) > a > div.text_box > p.b_title

위에 2개의 구조를 보면 한 가지 레시피 정보는 같은 ul > li > a 태그에 포함되어 있다는 걸 알 수 있다.

💡 index.js

생성한 프로젝트에 index.js 파일을 만들고 코드를 작성한다.
map 메서드를 이용해 모든 div 태그들의 이미지와 레시피 이름을 가진 Object Array를 출력하는 코드로 작성했다.

	const axios = require("axios");
	const cheerio = require("cheerio");
	const log = console.log;
	const getHtml = async () => {
	try {
	return await axios.get("https://www.2bob.co.kr/search_list.php?a=result_recipe&fKeyValue=옥수수");
	} catch (error) {
	console.error(error);
	}
	};
	getHtml()
	.then(html => {
	let ulList = [];
	const $ = cheerio.load(html.data);
	const RecipeList = $("div.contain > div.search_con > div > ul > li > a");
	const recipeListData = RecipeList
	.map((index, div) => ({
	img_url: $(div).find("div.img_wrap > img").attr('src'),
	Title: $(div).find("div.text_box > p.b_title").text(),
	}))
	.toArray();
	console.log(recipeListData);
	})

view raw index.js hosted with ❤ by GitHub

코드를 작성한 뒤, 터미널에 node index.js 를 입력하여 서버를 실행해준다.
그러면 아래와 같이 이미지의 주소와 레시피 이름이 출력된다.

마무리

이미지 주소를 받아오긴 했지만 파일의 주소이기 때문에, 웹 이미지 주소로 가공을 해야 할 것 같다. 🙃

ex) “https://www.2bob.co.kr/” + img_url