반응형
1. 개요
프로젝트를 진행하다보니 실제 프로젝트에 사용할 데이터가 필요할 때가 있는데,
이 데이터를 얻기 위해 자연스럽게 인터넷의 정보를 쉽게 얻어 올 수 있기 위해 크롤링을 사용해야 했습니다.
2. 패키지
먼저 폴더를 하나 생성하고
npm init -y
로 node.js 기반 패키지를 생성해줍니다.
사용할 라이브러리는 selenium으로
npm install selenium-webdriver
위의 패키지를 설치해줍니다.
selenium 크롤링을 사용하기 위해서는 브라우저의 드라이버를 사용해야 합니다.
http://chromedriver.storage.googleapis.com/index.html
저는 크롬 드라이버를 사용했기 때문에, 위의 링크에서 최신 크롬 드라이버를 받아주면 됩니다.
다운 받은 드라이버는 프로젝트 폴더에 넣어줍니다.
3. 코드
index.js
const {Builder, By, Key, until} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const run = async () => {
// headless로 크롬 드라이버 실행
let driver = await new Builder()
.forBrowser('chrome')
.setChromeOptions(new chrome.Options().headless().addArguments("--disable-gpu", "window-size=1920x1080",
"lang=ko_KR"))
.build();
try {
// 특정 URL 생성
await driver.get('https://map.kakao.com/');
let userAgent = await driver.executeScript("return navigator.userAgent;")
console.log('[UserAgent]', userAgent);
// By.id로 #query Element를 얻어온다.
let searchInput = await driver.findElement(By.id('search.keyword.query'));
// keyword를 선택하고 검색 버튼 사용
let keyword = "닭발";
searchInput.sendKeys(keyword, Key.ENTER);
// css selector로 가져온 element가 위치할때까지 최대 10초간 기다린다.
await driver.wait(until.elementLocated(By.id('info.search.place.list')), 10000);
let resultElements = await driver.findElements(By.className("placetit"));
// 검색한 elements 하위의 value를 출력함
console.log('[resultElements.length]', resultElements.length)
for (var i = 0; i < resultElements.length; i++) {
console.log('- ' + await resultElements[i].getCssValue())
}
}
catch(e){
console.log(e);
}
finally {
driver.quit();
}
}
run();
headless, 크롬 창이 팝업되지 않은 백그라운드에서 크롤링이 되는 옵션을 사용했는데,
동작하는 과정을 확인하고 싶다면 .setChromeOptions(...)을 지우시면 됩니다.
node index.js
node index.js를 입력해 실행하면 elementes의 결과물이 출력됩니다.
자세한 문법은 아래 링크를 참고하시면 됩니다.
https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/
반응형