자바스크립트 웹스크래핑으로 구글 검색 결과 가져오기

안녕하세요. 이번 시간에는 사용하고 계신 인터넷 브라우저 콘솔에서 웹스크래핑 할 수 있는 자바스크립트를 만들 거예요. 웹스크래핑 대상은 구글의 검색 결과입니다! 입력받은 키워드로 검색 결과를 가져오도록 할 건데요. 알 수 없는 이상한? 사이트까지 목록에 나오지 않도록 필터링할 도메인(naver, daum 등)을 같이 입력받아서 제목과, URL 정보를 보여주도록 할 거예요.

참고로 웹스크래핑은 웹페이지의 HTML 구조가 변경될 경우, 코드도 함께 수정해 주어야 해요. 어느 날 갑자기 결과를 못 가져온다면? 아마도 HTML의 구조가 변경되었을 거예요. 그럼 그 웹페이지에 가서 다시 코드를 분석하고 기존 코드를 수정해야겠죠!

이번에도 CORS 우회 프록시 서버를 활성화해 주세요. 처음이신 분들은 아래 이전 글을 참고해 주세요. (10초면 설정 완료!)

 

자바스크립트로 웹스크래핑 하는 방법

자바스크립트로 웹스크래핑 하는 방법

 

자 이제 시작 시작해 볼까요? 우선, 사용하시는 브라우저에서 F12 키를 눌러 개발자 도구를 열고, 콘솔 탭을 선택합니다.

 

먼저 요청 헤더 정보인 User-Agent를 추가해야 할게요. 웹 서버에게 요청을 보낸 클라이언트의 종류(브라우저 종류, 버전 등)를 알려주는 역할을 하는데요, 이 정보가 없으면 일부 웹 사이트는 웹 스크래퍼나 봇으로부터 오는 요청을 차단하기 때문이에요.

 

그래서 요청이 웹 브라우저에서 발생한 것처럼 보이게 해서 정상적으로 수행할 수 있도록 해야 하죠.

 // 사용자 에이전트 헤더 정보 설정
const headers = new Headers({
  'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36',
  'referer': 'https://www.google.com/'
});

 

이어서 웹스크래핑을 수행하는 함수 search()를 생성할게요. 검색 키워드와, 필터링할 도메인 주소를 입력받도록 할게요.

async function search(keyword, targetDomain) {
    // 프록시 서버 URL 설정
    const proxyUrl = 'https://cors-anywhere.herokuapp.com/'; 
    // 검색어를 사용하여 구글 검색 URL 생성
    const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(keyword)}`; 

    try {
        // 프록시 서버를 사용하여 구글 검색 결과 페이지 요청 (헤더 정보 포함)
        const response = await fetch(proxyUrl + searchUrl, { headers});
        // 요청한 페이지의 HTML 텍스트 가져오기
        const html = await response.text(); 
        // HTML문서를 객체모델(DOM)구조로 변환하여 요소를 쉽게 찾을수 있게함)
        const parser = new DOMParser(); 
        // HTML 텍스트를 HTML 문서로 변환
        const htmlDoc = parser.parseFromString(html, 'text/html');
        // 변환된 HTML 문서에서 검색 결과를 선택
        const searchResults = htmlDoc.querySelectorAll(".g"); 

        // 검색 결과에 대한 반복문
        searchResults.forEach(result => {
            // 검색 결과의 제목
            const title = result.querySelector("h3")?.innerText; 
            // 검색 결과의 링크를 
            const link = result.querySelector("a")?.href;
            // 링크가 존재하고, 목표 도메인을 포함하면
            if (link && link.includes(targetDomain)) { 
                // 제목 및 링크 출력
                console.log(`Title: ${title}, Link: ${link}`); 
            }
        });
    } catch (error) {
        // 에러가 발생한 경우 에러 메시지 출력
        console.error('Error:', error);
    }
}

 

search('블로그','naver') 실행 결과 ▼

 

도메인 주소가 'naver'인 검색결과는 몇 건 안 나오네요!  그럼 도메인을 제외하고 다시 한번 조회해 볼게요.

search('블로그', '') 실행 결과 ▼

 

이제야 결과가 많이 나오네요! 찾고자 하는 도메인이 없다면 search('키워드', '')로 실행하면 됩니다. 이렇게 쉽게 끝이네요!

하. 지. 만. 끝이라고 하기에는 너무 아쉽죠! 왜냐? 구글 검색은 기본적으로 페이지당 최대 10개의 결과를 반환하도록 설정되어 있어서 따로 설정을 안 해주면 결과는 항상 10개면 이하로 나오기 때문이죠! 그래서 최댓값을 설정할 수 있어요. Url에 'num' 매개변수를 사용하여 검색 결과 수를 조절해야 합니다. 페이지당 최대 100개까지 결과를 받을 수 있습니다. 그럼 결과를 30개로 해서 다시 한번 조회해 보도록 할게요. 기존 searchUrl 변수에 &num=30를 추가합니다.

//&num=30을 추가 (최대 100)
const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(keyword)}&num=30`;

 

search('블로그', '') 실행 결과 ▼

 

결과 수가 많이 늘어났네요! 오늘은 이렇게 검색 결과를 가져오는 웹스크래핑 코드를 만들어봤는데요. 웹스크래핑을 할 때는 서버에 부담을 주지 않도록 적절한 대기 시간을 두고 요청을 보내는 것이 좋습니다. 오늘도 마지막으로 팁을 하나 드리고 갈게요.

 

페이지의 시작을 지정해서 조회할 수 있는 방법입니다. 검색 결과의 2페이지를 가지고 오려면 Url에 'start' 매개변수를 추가하면 되는데요. 예를 들어 'start=11'로 조회를 하면 한 페이지당 10개를 가져오니깐 2페이지부터 결과를 가져오게 되는 거죠.

//start=10 추가 (0부터 시작이라 10을 넣어야 2페이지가 검색) 
const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(keyword)}&start=10`; 

 

위 코드를 참고하면 2페이지부터 3페이지까지의 결과를 가져오거나 3페이지부터 100개의 결과를 가져오는 등 다양하게 결과를 조회할 수 있습니다.  - 끝 -