2019.04.25 동적크롤링(Ajax, JSON)

# 질문에 답하기

  1. 동적크롤링
  2. Ajax
  3. JSON

동적크롤링의 큰 그림

  • 자바스크립트로 동작되는 애들은 지속적으로 데이터를 가지고 와서 업데이트 한다.
  • 따라서 현재 보이는 데이터를 기준으로 하면 안되고 그 원본 데이터의 주소를 찾아야 한다.
  • 먼저 해당 데이터를 불러오는 url을 찾는 것이 중요한데 그것은 network에서 확인할 수 있다.
  • XHR을 선택하면 아이젝스로만 활동하는 것을 확인할 수 있고, 거기서 해당 내용을 불러오는 url을 구성한다.
  • 그리고 그 url을 통해서 크롤링을 진행해야 하며 동적데이터이기 때문에 이럴 때 이용해야 하는 것은 json이다.

Introduction

  • 브라우저(웹클라이언트)에서 웹페이지를 요청하거나 링크를 클릭하면 화면전환이 발생하는데 이것은 브라우저와 서버와의 통신에 의한 것이다.
  • 서버는 요청받은 페이지(HTML)를 반환하는데 이때 HTML 뿐만 아니라 CSS 및 javascript파일들도 함께 반환한다.
  • 웹페이지가 반환되면 브라우저(웹클라이언트)는 page를 reload하여 화면을 보여준다.
  • 서버는 요청받은 페이지가 무엇이냐에 따라 정적인 파일들만 반환할 수도 있고, javascript가 섞인 동적인 파일들을 반환할 수도 있다.

Ajax(Asynchronous javascript and XML)

  • Ajax는 자바스크립트를 이용하여 비동기적으로 서버와 브라우저가 데이터를 교환하는 통신 방식이다.
  • 서버에서 한번 페이지를 반환했을 때 거기에는 HTML와 같은 정적인 파일들 뿐만 아니라 javascript와 같이 동적인 파일들도 함께 반환한다.
  • 만약 페이지에서 일부만 지속적으로 갱신해야 한다면 굳이 모든 파일을 다시 반환할 필요가 없다.
  • 따라서 브라우저(웹클라이언트)는 Ajax request를 통해 동적인 부분을 요청하고 서버는 json을 통해 reload하는데 필요한 정보들을 반환 해준다.
동적크롤링

Ajax의 요청과 처리

  • 웹브라우저는 XMLHttpRequest 객체를 이용하여 Ajax요청을 보낸다.
  • 서버는 JSON형태로 요청온 정보만을 담아 순수한 텍스트로 구성된 데이터 문자열을 반환한다.
  • 이 문자열을 객체화하는 것을 역직렬화라고 하고 역직렬화를 위해 JSON.parse()를 이용한다.
동적크롤링1

크롤러

크롤러 : 인터넷에 있는 데이터를 자동 수집하는 프로그램

  • 웹 브라우저를 흉내내는 프로그램

정적 크롤링(크롬에서 페이지 소스보기가 가능할 때)

  • request: 웹 사이트에 접속, 데이터를 받아오는 역할
  • BeautifulSoup: 데이터를 HTML로 해석하는 역할

동적 크롤링

  • Ajax : 웹클라이언트에서 서버에 데이터를 요청하는 역할
  • JSON : 웹서버로부터 반환되는 데이터
  • JSON.parse() : 반환된 데이터를 사용할 수 있도록 객체화 해주는 역할

실습하기

  • 목표
    • 지속적으로 변하는 인기검색 10위까지의 순위 & 이름 & 현재시가 크롤링해보기
동적크롤링예제

코드

import requests
import json            #json import하기

#custom_header을 통해 아닌 것 처럼 위장하기
custom_header = {
    'referer' : 'http://http://finance.daum.net/quotes/A048410#home',
    'user-agent' : 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36'  }

#해당 접속 사이트가 아닌 원본데이터가 오는 url 추적. network에서 가지고 온다.
url = "http://finance.daum.net/api/search/ranks?limit=10"

req = requests.get(url, headers = custom_header)    #custom_header를 사용하지 않으면 접근 불가

if req.status_code == requests.codes.ok:    
    print("접속 성공")
    stock_data = json.loads(req.text)        #json에 반환된 데이터가 들어가 있다.
    for rank in stock_data['data']:         #stock_data는 'data' key값에 모든 정보가 들어가 있다.
        print(rank['rank'], rank['symbolCode'], rank['name'], rank['tradePrice'])

else:
    print("Error code")

접속 성공
1 A001000 신라섬유 2350
2 A068270 셀트리온 211500
3 A048410 현대바이오 12650
4 A005930 삼성전자 44650
5 A207940 삼성바이오로직스 338500
6 A020560 아시아나항공 6460
7 A002210 동성제약 20150
8 A007460 에이프로젠 KIC 4000
9 A066570 LG전자 77000
10 A000660 SK하이닉스 80200

2019.04.25 정적크롤링(request,beautifulsoup4)

# 질문에 답하기

  1. 정적 크롤링
  2. request
  3. beautifulSoup

크롤링 : 웹 페이지에 있는 자료를 자동으로 수집하는 프로그램

  • robots.txt : 검색엔진에게 어디까지 검색을 허용할 것이냐?
  • 선행지식 : HTML에 대한 이해 CSS Selection을 만드는 방법
  • 정적페이지 크롤링(페이지 소스보기에서 보여질 때)
    • request와 beautifulsoup4를 이용해서 크롤링 및 해석한다.
  • 동적페이지 크롤링(실시간으로 데이터가 바뀔 때)
    • selenum혹은 ajax, josn을 이용하여 크롤링 및 해석한다.
  • 정적페이지 동적페이지 확인 방법
    • 본인이 크롤링 할려는 데이터가 페이지소스보기 했을 때 있는지 확인한다.
    • 검사 및 셋팅(f1)에 들어가서 DEBUGGER의 disable javascript를 한후 새로고침을 해본다.
      • 데이터가 나오지 않으면 javascript를 통해 데이터를 받아온다.
disablejavascript
  • 오른쪽 하단에 위치

브라우저가 혹은 크롤러가 어떤식으로 서버에 접근해서 데이터를 가져오는가?

  1. 주소를 입력하면 해당 서버로 접근한다.(url 필수)
  2. 웹서버 프로그램이 해당 주소에 맞는 내용을 전달한다.(by source code)
    1. request라는 모듈을 이용한다.
    2. request(urllib의 wrapper 클래스)
  3. 웹 브라우저는 받은 소스코드를 해석해서 화면에 보여준다.
    1. 크롤러는 받은 내용을 해석해서 내가 원하는 데이터를 뽑아낸다.
      1. BeautifulSoup 모듈 이용
      2. 해석해서 : html 코드의 해석, CSS Selecter 만드는 방법
    2. 웹브라우저와 크롤러의 차이

정적 크롤링 필요 모듈 설치

  1. requests : 웹페이지에 접근해서 데이터를 가져온다.
    1. pip3 install requests
    2. requests는 aiax로 받아온 데이터를 실시간으로 반영할 수 없다.
      1. 페이지소스코드 보기까지 가능하다.
      2. 내가 원하는 자료를 계속 못 받아온다고 하면 aiax로 구성되서 그런가보다 하고 알아야 한다.
      3. 해결방안으로 selenium : 웹 브라우저를 원격 조작하는 방식의 크롤러이다.
      4. 크롤링 모듈 : request, selenium, scrapy등 상황에 맞는 크롤링 모듈 정리
  2. BeautifulSoup4 : 가져온 데이터를 HTML로 해석한다.
    1. pip3 install BeautifulSoup4
  3. 사용하기
import requests
from bs4 import BeautifulSoup

크롤러의 이용

웹 브라우저를 그대로 따라하기 때문에

  1. 명절표 예매
  2. 콘서트 티켓 예매 등을 할 수 있다.
  3. 빠른 정보 취득
  4. 정보 취득 및 삽입

크롤러자체는 불법이 아니나, 내가 크롤러로 무료로 취득한 정보를 바탕으로 돈을 벌면 불법이다.

만약에 자바스크립트와 같은 것을 통해서 지속적으로 업데이트 되는 웹사이트라면

  • selenum보다는 request가 훨씬 빠르다.
  • selenum : 웹 브라우저 자체를 컨트롤해서 크롤링
    • 요소를 선택해서 사용자의 동작을 흉내낸다. : 클릭, 키보드 입력
    • 선택자 xpath, css
    • xpath : //*[@id="main_content"]/div[2]/div/dl/dt[2]/a
    • css : #main_content > div.list_body.newsflash_body > div > dl > dt:nth-child(2) > a

2019.04.25 크롤링 기본(HTML과 선택자 이해하기)

(TIL은 스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)

# 질문에 답하기

  1. 크롤링의 그림
  2. HTML이란?
  3. 선택자란?

크롤링의 큰 그림

  1. 우리가 가지고 오고 싶은 부분을 눈으로 확인하고 ( 첫 번째 줄을 가지고 와보자)
  2. HTML 구조를 분석해서 선택자를 선별하고 (태그는 div 이고 class는 1234 이네!)
  3. 선택자를 컴퓨터가 알아먹게 변환 (div.1234)

HTML의 개념과 구조 이해하기

  • HTML은 hypertext markup language로서 hypertext는 링크로서 한 문서에서 다른 문서로의 이동을 이야기하며 markup langage는 태그를 이용해서 문서를 작성한다는 이야기입니다. 즉 웹페이지를 만들기 위한 언어로서 문서간의 이동을 목적으로 만들어졌고 태그들을 이용하여 문서를 작성하는 언어입니다.
  • 기본적으로 태그들은 각각의 고유한 역할을 가지며 들여쓰기를 통해 내부 단계를 구현합니다.
  • 들여쓰기를 통해 부모와 자식구조를 표현하며 이를 도식화하면 나무와 닮아있기 때문에 트리구조라고도 한다.
  • 너무 좋은 내용이 있어서 가지고와 본다. Stage 1 - HTML에 대해 알아보자 - 네이버 함께 정복하는 크롤링 스터디

HTML 구조 연습하기

제품리스트

출처 : Stage 2 - 선택자 대해 알아보자 - 네이버 함께 정복하는 크롤링 스터디

  • 제품리스트
    • 첫번째 줄
      • 첫번째 상품
        • 상품명
        • 최저가
        • 상품평
        • 판매처
      • 두번째 상품
        • 상품명
        • 최저가
        • 상품평
        • 판매처

    • 두번째 줄
      • 첫번째 상품
        • 상품명
        • 최저가
        • 상품평
        • 판매처
      • 두번째 상품
        • 상품명
        • 최저가
        • 상품평
        • 판매처

데이터를 특정짓기 위한 선택자

  • html은 반복적으로 태그들이 쓰이기 때문에 컴퓨터는 특정 태그에 대해서 혼동이 올 수 있다.
  • 따라서 태그에 특정 별명을 붙이는데 이 별명을 선택자라고 하며 ID와 클래스가 가장 많이 쓰인다.
  • id는 고유한 식별자로서 한 ID는 html 문서에 하나밖에 존재하지 않는다.

컴퓨터에게 선택자 알려주기

  • 태그 : 그냥 태그명을 적어주면 된다.
  • ID가 1234 인 div 태그 : div#1234
  • class가 1234인 div 태그 : div.1234
  • 우리가 가지고 오고 싶은 부분을 눈으로 확인하고 그 부분의 html 태그를 해석하여 선택자를 선택하고 컴퓨터에게 선택자를 알려준다.

연습하기

크롤링2

출처 : Stage 2 - 선택자 대해 알아보자 - 네이버 함께 정복하는 크롤링 스터디

  1. 자식선택자
    1. 바로 밑의 선택자를 찾아야 할 때 사용
    2. 우측의 영상제목들만 가지고 오기
    3. div.cds>span.title
  2. 자손 선택자
    1. 자식선택자를 건너띄고 자손선택자를 가지고 오기
    2. div#container span.title
  3. 위의 2개 모두 불러오는 것은 같으나 불러오는 상황이 다르다.

선택자 선택하기

  1. 간결성
    1. 결국 선택자 경로상에서 가장 중요한 것은 우리가 원하는 데이터가 있는 마지막 선택자이다.
  2. 정확성
    1. 해당 태그가 그 태그만 속한 것이 맞는지 확인이 필요하다.
      1. <span class ="hit"> ===> 컨트롤 + F 를 통해 span.hit 을 검색해본다.
  3. 세분화
    1. 어디까지의 조상을 결정 할지를 잘 확인하자.

+ Recent posts