[Web] 신용카드 혜택 모으기 - 네이버 신용카드 정보 크롤링 (1)

0. 들어가기

-. 친구가 앱 만드는데 필요하다 부탁하여, 네이버 신용카드 정보 크롤링을 할 이유가 생겼다.

-. 네이버 신용카드 정보 페이지 구조 확인 및 간단한 자바스크립트 코드로 추출 시도.

1. 네이버 신용카드 페이지 구조

-. 네이버 신용카드 페이지는 리스트 페이지 (/list) -> 개별 카드 페이지 (/item?cardAdId="카드번호") -> 이하 카드 사진 포함 설명으로 이루어짐.

<네이버 신용카드 페이지 구조>

-. 페이지 구조를 살펴보면, 1) "Benefits" class에서 혜택 기술이 시작,
-. 2) 각 혜택 종류에 대해
-. 3) 상세 혜택 나열 하는 순서로 구성되어 있다.

 

3. 각 항목 가져오기

-. 카드 설명은 개별 태그(Tag)로 잘 정리되어 있다.
-. 카드이름(b.txt) / 혜택종류(b.text) / 상세혜택(dt.detail_title, dd.desc)
-. 각각 해당하는 태그로 쓱 긁어오면 깔끔하게 나열되는 것을 확인할 수 있다..

-. 앞 포스팅에 이어, 네이버 신용카드 정보 크롤링 진행.

4. 카드 목록 가져오기

-. 네이버 신용카드 목록 페이지 (/list)에 있는 신용카드 리스트를 전부 뽑아야 한다. 목록 페이지에 들어가면 처음엔 10개의 카드만, 이후 총 버튼을 누르면 10개씩 추가 노출되면서 343개의 카드 리스트가 나타난다. 즉, 카드 목록을 모두 받기 위해선 더보기 버튼을 34번 눌러야 한다.

-. 귀찮으니 (그리고 나중에도 비슷한 일을 해야하니) javascript를 이용해 반복해서 누르게 하자.

<카드 리스트 "더보기" 버튼>

-. F12를 눌러 나타나는 크롬 개발자 콘솔에 아래 스크립트를 입력한다. 그럼 버튼 누르기를 50번 반복하고 모든 카드가 노출된다.

count = 0;
function f1() {
    return new Promise((r1, r2) => {
        setTimeout(() => {
            _button = document.querySelectorAll("Button.more")
	count++;
	if(count<50){f2();}
            r1();
        }, 100);
    })
}
function f2() {
    return new Promise((r1, r2) => {
        setTimeout(() => {
        _button[0].click();
        f1();
            r1();
        }, 1000);
    })
}


f1();

-. 이후 앞 글에서 간략하게 언급했듯이, 카드 리스트를 뽑아와서 주소 연결을 할 수 있도록 하자.

<네이버 신용카드 리스트의 그림 주소와 각 카드 상세설명 페이지 주소의 관계>

-. 마찬가지로 개발자 콘솔에 아래 스크립트를 입력한다.

_cardList = document.querySelectorAll("a.anchor > figure > img")
_cardList.forEach(element => console.log(element.src));

<쭉 출력되는 카드 그림 주소 343개...>

-. 실수했다. 저 카드 리스트를 텍스트 파일로 저장하는게 좋겠다. 겸사겸사 카드 이름도 같이 나오게 하자.

_cardNameList=document.querySelectorAll("b.name")
_cardList = document.querySelectorAll("a.anchor > figure > img")

cardListText = ''
for(num=0; num<343; num++)
{
    console.log(_cardNameList[num-1].innerText + "**" + _cardList[num].src);

}

function saveFile(fileName, content ) {
    var blob = new Blob([content], { type: 'text/plain' });
    objURL = window.URL.createObjectURL(blob);
            
    if (window.__Xr_objURL_forCreatingFile__) {
        window.URL.revokeObjectURL(window.__Xr_objURL_forCreatingFile__);
    }
    window.__Xr_objURL_forCreatingFile__ = objURL;
    var a = document.createElement('a');
    a.download = fileName;
    a.href = objURL;
    a.click();
}

saveFile("NaverCardList.txt", cardListText )

-. 크롬 기본 다운로드 경로에 해당 파일 "NaverCardList.txt" 파일이 있다.

-. 뒤는 파이썬으로 추가 작업. 해당 포스팅 참고.