작성자:프라빈 듀비
얼마 전에는 링크를 찾기 위해 사이트를 크롤링해야 했고, 추가로 해당 페이지 링크를 사용하여 셀레늄이나 인형극을 사용하여 데이터를 크롤링해야 했습니다. 사이트의 콘텐츠 설정이 약간 이상해서 Selenium과 Node로 직접 시작할 수 없었습니다. 또한 불행히도 사이트의 데이터는 엄청났습니다. 먼저 모든 링크를 크롤링하고 각 페이지의 세부 크롤링을 위해 해당 링크를 전달하는 접근 방식을 신속하게 찾아야 했습니다.
저는 브라우저 콘솔 API를 통해 이 멋진 것들을 배웠습니다. 이것은 단지 JavaScript이므로 별다른 설정 없이 모든 웹사이트에서 사용할 수 있습니다.
기술적인 세부 사항을 살펴보겠습니다.
높은 수준의 개요
페이지의 모든 링크를 크롤링하기 위해 콘솔에 작은 JS 조각을 작성했습니다. 이 JavaScript는 모든 링크를 크롤링하고(페이지 매김도 수행하므로 1~2시간 소요) json를 덤프합니다. 크롤링된 모든 데이터가 포함된 파일입니다. 명심해야 할 점은 웹사이트가 단일 페이지 애플리케이션과 유사하게 작동하는지 확인해야 한다는 것입니다. 그렇지 않으면 두 개 이상의 페이지를 크롤링하려는 경우 페이지를 다시 로드하지 않습니다. 그렇지 않으면 콘솔 코드가 사라지게 됩니다.
일부 시나리오에서는 Medium이 페이지를 새로 고치지 않습니다. 지금은 스크래핑 후 자동으로 콘솔에서 스토리를 크롤링하고 스크래핑된 데이터를 파일에 저장해 보겠습니다.
하지만 그 전에 최종 실행에 대한 간단한 데모를 보여드리겠습니다.
데모
1. 브라우저에서 콘솔 객체 인스턴스 가져오기
// Console API to clear console before logging new data
console.API;
if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; //chrome
} else if (typeof console._inspectorCommandLineAPI !== 'undefined'){ console.API = console._inspectorCommandLineAPI; //Safari
} else if (typeof console.clear !== 'undefined') { console.API = console;
}
코드는 단순히 사용자의 현재 브라우저를 기반으로 콘솔 객체 인스턴스를 얻으려고 시도하고 있습니다. 인스턴스를 무시하고 브라우저에 직접 할당할 수 있습니다.
예, Chrome을 사용하는 경우 , 아래 코드로 충분합니다.
if (typeof console._commandLineAPI !== 'undefined') { console.API = console._commandLineAPI; //chrome
}
2. 주니어 도우미 기능 정의
현재 브라우저에서 Medium 스토리를 열었다고 가정하겠습니다. 6~12행은 스토리 제목, 박수 횟수, 사용자 이름, 프로필 이미지 URL, 프로필 설명 및 스토리 읽기 시간을 추출하는 데 사용할 수 있는 DOM 요소 속성을 정의합니다. 각각.
이것이 제가 이 이야기를 통해 보여주고 싶은 기본적인 것입니다. 스토리, 모든 이미지, 삽입 링크에서 링크 추출과 같은 몇 가지 요소를 더 추가할 수 있습니다.
3. 수석 도우미 기능 정의 - 야수
다양한 요소에 대한 페이지를 크롤링하는 동안 해당 요소를 컬렉션에 저장합니다. 이 컬렉션은 주요 기능 중 하나로 전달됩니다.
함수 이름 console.save을 정의했습니다. . 이 함수의 작업은 전달된 데이터가 포함된 csv/json 파일을 덤프하는 것입니다.
데이터로 Blob 개체를 생성합니다. Blob object는 불변의 원시 데이터로 이루어진 파일과 같은 객체를 나타냅니다. Blob은 반드시 JavaScript 기본 형식일 필요는 없는 데이터를 나타냅니다.
Blob 생성은 링크 태그 <에 연결됩니다.;a> 클릭 이벤트가 실행되는 곳입니다.
다음은 console.save의 빠른 데모입니다. 작은 array 데이터로 전달됩니다.
모든 코드 조각을 종합하면 다음과 같습니다.
- 콘솔 API 인스턴스
- 요소 추출을 위한 도우미 함수
- 파일 생성을 위한 콘솔 저장 기능
브라우저에서 console.save()를 실행하여 데이터를 파일에 저장해 보겠습니다. 이를 위해 Medium의 스토리로 이동하여 브라우저 콘솔에서 이 코드를 실행할 수 있습니다.
단일 페이지에서 데이터를 추출하는 데모를 보여드렸지만 동일한 코드를 수정하여 게시자의 홈 페이지에서 여러 스토리를 크롤링할 수 있습니다. freeCodeCamp의 예를 들어보세요. 한 스토리에서 다른 스토리로 이동하고 (브라우저의 뒤로 버튼 사용)으로 돌아올 수 있습니다. 페이지를 새로 고치지 않고 게시자 홈페이지로 이동합니다.
다음은 게시자의 홈페이지에서 여러 기사를 추출하는 데 필요한 최소한의 코드입니다.
여러 스토리에서 프로필 설명을 가져오는 코드를 살펴보겠습니다.
이러한 유형의 애플리케이션의 경우 데이터를 폐기한 후 console.save에 전달할 수 있습니다. 기능을 수행하여 파일에 저장합니다.
콘솔 저장 기능은 콘솔 코드에 빠르게 연결할 수 있으며 파일에 데이터를 덤프하는 데 도움이 될 수 있습니다. 나는 당신이 있다고 말하는 것이 아닙니다. 데이터 스크래핑을 위해 콘솔을 사용하는 것이 좋지만 때로는 CSS 선택기를 사용하여 DOM 작업에 매우 익숙하기 때문에 이것이 훨씬 더 빠른 접근 방식이 될 수 있습니다.
Github에서 코드를 다운로드할 수 있습니다
이 기사를 읽어주셔서 감사합니다! 많은 설정 없이 일부 데이터를 빠르게 긁어낼 수 있는 멋진 아이디어가 되었기를 바랍니다. 재미있게 보셨다면 박수 버튼을 눌러주세요! 질문이 있으시면 저에게 이메일을 보내주세요(praveend806 [at] gmail [dot] com).
콘솔에 대해 자세히 알아볼 수 있는 리소스:
콘솔 사용 | 웹 개발자를 위한 도구 | Google 개발자
_Chrome DevTools JavaScript 콘솔을 탐색하는 방법을 알아보세요._developers.google.com브라우저 콘솔
_브라우저 콘솔은 웹 콘솔과 비슷하지만 단일 콘텐츠 탭이 아닌 전체 브라우저에 적용됩니다._developer.mozilla.orgBlob
_Blob 객체는 파일과 유사한 불변의 원시 데이터 객체를 나타냅니다. 블롭은 반드시…_developer.mozilla.org에 있을 필요는 없는 데이터를 나타냅니다.
무료로 코딩을 배우세요. freeCodeCamp의 오픈 소스 커리큘럼은 40,000명 이상의 사람들이 개발자로 취업하는 데 도움을 주었습니다. 시작하세요