웹크롤링 매크로 - 중고차 매물 정보 가져오기

안녕하세요. 엔지엠소프트웨어입니다. 웹크롤링 연재글의 마지막이 될거 같네요. [ 1부 - 네이버 연관 검색어 가지오기 ]와 [ 2부 - 영어 단어를 입력하면 자동으로 해석해주는 매크로 만들기 ] 예제를 모두 경험 해보시면 이번 예제도 그리 어렵지 않게 해낼 수 있을겁니다. 참고로, 네이버나 구글과 같은 사이트들은 공식 인터페이스 형식(Format)인 Json을 사용하여 데이타를 주고 받습니다. 그런데, KB차차차는 이상하게도 비표준 형태로 서버와 데이타를 주고 받더라구요. 그래서, 이런 경우에는 어떻게 데이타를 파싱해서 추출해야 하는지도 알아볼께요. 자~ 이 테스트를 위해 [ 엔지엠 RPA 매크로 에디터 ]를 실행하고, 새로운 스크립트를 추가하세요.

 

 

Json이란?

JavaScript Object Notation의 줄임말로 데이타를 구조적으로 표현하는 일종의 포멧을 말합니다. 원래는 Xml을 주로 사용했었는데요. Xml은 불필요한 정보들이 너무 많아서 서버와 클라이언트간 통신에 많은 네트워크 트레픽을 발생시킨다는 단점이 있었습니다. 그래서, 등장한게 Json입니다. Json 형식은 JavaScript 객체의 형식을 기반으로 만들었기 때문에 누구나 쉽게 코드를 이해할 수 있습니다. 또한, 거의 모든 프로그래밍 언어들이 Json 포멧을 핸들링할 수 있게 지원하고 있습니다. Json은 특정 언어에 종속되지 않아서 자유롭게 사용이 가능하고, Xml보다 작은 용량으로 데이타 전송이 가능합니다. 필요한 정보만 전달하기 때문에 가독성이 좋습니다.

 

앞서 설명했던 예제들과 동일하게 구글 크롬을 실행하고, [ KB차차차 중고차 검색하고 비교하기 ] 페이지로 이동해줍니다. 그리고, F12를 눌러서 구글 크롬 개발자 도구를 실행해주세요. 아래 동영상과 같이 중고차를 검색하면 서버로부터 데이타를 받아올 수 있습니다. 검색어에 "bmw"를 입력하면, 관련 매물들의 목록을 가져올 수 있습니다. 요청(Request)에서 마지막을 클릭한 후 응답(Response) 탭을 클릭 해보세요.

https://youtu.be/rJTZmGZ-HJg

 

 

일반적으로 사용하는 Json이 아닌 Html 문서가 날라옵니다. 아마도, 매물 정보 관련 Html 코드를 데이타베이스에 그대로 넣어놓은게 아닌가 생각되네요. 데이타베이스에 키워드로 질의(Query)하면 목록을 가공하지 않고 그대로 내려주는거 같습니다. 웹크롤링 1부와 2부를 모두 읽어보시고, 예제를 따라 해보신 분들은 서버로부터 받은 데이타를 어떻게 처리해야 할지 이미 알고 계실겁니다. KB차차차 중고차 매물 정보는 아래와 같이 응답을 보내줬습니다. 내용이 많아서 일부 내용은 삭제 했습니다^^

<div class="ds-scroll">
    <div>
        <div class="cmm-justify">
            <span class="keyword">5시리즈</span>
            <button type="button" class="link-arrow" onclick="(function() {
				kbcStorage.recentSearchKeyword.push({
					'target' : 'result'
					, 'makerCode' : '107'
					, 'makerName' : 'BMW'
					, 'classCode' : '1904'
					, 'className' : '5시리즈'
				}).then(function() {
					location.href = '/public/search/main.kbc#!?makerCode=107&classCode=1904';
					$('#ks-mask').click();
					$('#ks-input').val('5시리즈');
					window.scrollTo(0,0);
				});
			})();">
                전체보기
            </button>
        </div>
        <ul class="list">
            <li>
                <a href="javascript:;" onclick="(function() {
					kbcStorage.recentSearchKeyword.push({
						'target' : 'result'
						, 'makerCode' : '107'
						, 'makerName' : 'BMW'
						, 'classCode' : '1904'
						, 'className' : '5시리즈'
						, 'carCode'   : '2865'
						, 'carName'   : '올뉴5시리즈 (G30) (2017~현재)'
					}).then(function() {
						location.href = '/public/search/main.kbc#!?makerCode=107&classCode=1904&carCode=2865';
						$('#ks-mask').click();
						$('#ks-input').val('BMW올뉴5시리즈 (G30)');
						window.scrollTo(0,0);
					});
				})();"><b>B</b><b>M</b><b>W</b>올뉴5시리즈 (G30) (2017~현재)</a>
            </li>
            <li>
                <a href="javascript:;" onclick="(function() {
					kbcStorage.recentSearchKeyword.push({
						'target' : 'result'
						, 'makerCode' : '107'
						, 'makerName' : 'BMW'
						, 'classCode' : '1904'
						, 'className' : '5시리즈'
						, 'carCode'   : '1509'
						, 'carName'   : '뉴5시리즈 (2003~2017)'
					}).then(function() {
						location.href = '/public/search/main.kbc#!?makerCode=107&classCode=1904&carCode=1509';
						$('#ks-mask').click();
						$('#ks-input').val('BMW뉴5시리즈');
						window.scrollTo(0,0);
					});
				})();"><b>B</b><b>M</b><b>W</b>뉴5시리즈 (2003~2017)</a>
            </li>
            <li>
                <a href="javascript:;" onclick="(function() {
					kbcStorage.recentSearchKeyword.push({
						'target' : 'result'
						, 'makerCode' : '107'
						, 'makerName' : 'BMW'
						, 'classCode' : '1904'
						, 'className' : '5시리즈'
						, 'carCode'   : '1504'
						, 'carName'   : '5시리즈 (1972~2004)'
					}).then(function() {
						location.href = '/public/search/main.kbc#!?makerCode=107&classCode=1904&carCode=1504';
						$('#ks-mask').click();
						$('#ks-input').val('BMW5시리즈');
						window.scrollTo(0,0);
					});
				})();"><b>B</b><b>M</b><b>W</b>5시리즈 (1972~2004)</a>
            </li>
        </ul>
    </div>
    ...
    ...
    ...
    <div class="num-name-search">
        <a href="javascript:;" class="link-arrow _search-carno-a-name" onclick="(function() {
           var k='bmw' , kInt=parseInt(k);
           if (isNaN(kInt)) { // 문자
           if (k.length < 2) {
				alert('판매자명은 2글자 이상 입력바랍니다.');
				return;
			}
		} else { // 숫자
			if (k.length  < 4) {
				alert('차량번호 4자리 이상 입력바랍니다.');
				return;
			}
		}

		kbcStorage.recentSearchKeyword.push({
			'target' : 'list-by-carnoandphone'
			, 'keyword' : k
		}).then(function() {
			location.href = '/public/search/main.kbc#!?carNoMemberName=' + k;
		});
	})();">차량번호, 판매자명으로 찾기</a>
    </div>

 

원본 글 보기

http://ngmsoftware.com/bbs/board.php?bo_table=tip_and_tech&wr_id=720 

엔지엠소프트웨어