진행중인 2차 프로젝트에서 원하는 데이터를 얻고자 크롤링 기술을 활용하려 한다.
코치님들과의 피드백을 통해 실시간으로 상태를 업데이트 해주어야 하는 부분을 제외하고서 새로운 기획으로 서비스의 목적이 바뀌었다.
학부생 때, 토이 프로젝트에서 파이썬과 selenium 라이브러리 등을 활용하여 크롤링을 통해 자동 데이터 정리 프로그램을 만들었던 경험이 있다.
자바스크립트에서도 마찬가지로 selenium 라이브러리를 활용할 수 있었고 그 사용법 또한 크게 다르지 않았다.
다만, React를 사용하는 프론트 단에서는 해당 라이브러리를 제공하지 않아 selenium의 사용을 원한다면 반드시, 서버 측에서 해당 작업을 수행하여야 한다.
const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
async function getMatchScheduleItems() {
const options = new chrome.Options();
options.addArguments('--headless'); // 브라우저를 헤드리스 모드로 실행하려면 주석을 제거하세요.
const driver = new webdriver.Builder()
.forBrowser('chrome')
.setChromeOptions(options)
.build();
try {
await driver.get('원하는 곳 url');
await driver.wait(webdriver.until.elementLocated(webdriver.By.css('.list--match-schedule--item')), 5000);
const scheduleItems = await driver.executeScript(() => {
const items = document.querySelectorAll('.list--match-schedule--item');
return Array.from(items)
.slice(0, 10)
.map(item => item.textContent.trim());
});
return scheduleItems;
} finally {
await driver.quit();
}
}
getMatchScheduleItems()
.then(scheduleItems => {
console.log('Match Schedule Items:');
console.log(scheduleItems);
})
.catch(error => {
console.error('Error:', error);
});
이와 같은 짧은 코드만으로도 원하는 url에서 원하는 만큼의 데이터를 가져올 수 있는 기능을 자동화 시킬 수 있다.
이 부분이 프로그래밍의 진 면목이 아닐까 한다.
극강의 귀차니즘으로 짧은 코드로도 자동화를 잘 할 수 있는 개발자가 되고싶다^^