Stage1 - 정적페이지와 동적페이지

첫번째 스테이지에서는 네이버 지도(https://map.naver.com) 페이지에서 원하는 키워드(치킨)를 검색한 후 가게이름 / 주소 / 전화번호를 수집해봅시다.

!!!)10/23 네이버 지도 업데이트

19년 10월 23일부터 네이버 지도가 v5로 업데이트 됨에 따라 현재 online book의 방법으로는 네이버 지도의 데이터를 수집할 수 없게되었습니다.

좋은 예제를 찾아 6주차 데이터수집 강의자료를 업데이트 하려고 합니다 :)

구버전 네이버 지도 접속방법(19년 12월까지)

네이버 지도에서는 2019년 12월까지 기존의 구버전 지도 서비스를 제공하고 있습니다. 2019년까지는 아래 링크를 통해 현재 online book 실습을 함께할 수 있습니다.

>> 구버전 네이버 지도(https://v4.map.naver.com/)

기존 방법으로 네이버 지도 데이터 수집하기

네이버 지도에서(https://map.naver.com/, https://v4.map.naver.com/) 지금까지와 같은 방법으로 데이터를 수집을 시도해봅니다.

  1. 웹에서 소스코드를 가져와 html 파싱하기

  2. 컨테이너(가게정보) 수집하기

  3. 상세 데이터 수집하기

    • 가게이름

    • 주소

    • 전화번호

  4. 수집한 데이터 출력하기

#1. 웹에서 소스코드를 가져와 html 파싱

requestsbs4를 활용해서 소스코드를 가져와 html 파싱해줍니다.

week6_1.py
import requests
from bs4 import BeautifulSoup
# 웹페이지에서 소스코드를 가져와 BeautifulSoup으로 파싱
raw = requests.get("https://map.naver.com/",
headers={"User-Agent":"Mozilla/4.0"})
html = BeautifulSoup(raw.text, 'html.parser')

#2. 컨테이너(가게정보) 수집하기

네이버 지도 검색결과에서 가게의 정보를 포함하고 있는 컨테이너는 쉽게 찾을 수 있습니다. 네이버 지도 검색결과 한페이지에 10개의 가게정보가 표시되므로 검사창에 검색을 통해 10개의 컨테이너를 확인할 수 있어야합니다.

컨테이너 선택자: div.lsnx

선택자를 활용해서 컨테이너를 수집하고, 10개의 가게데이터가 제대로 수집이 되었는지 출력해봅시다.

week6_1.py
import requests
from bs4 import BeautifulSoup
# 웹페이지에서 소스코드를 가져와 BeautifulSoup으로 파싱
raw = requests.get("https://map.naver.com/",
headers={"User-Agent":"Mozilla/4.0"})
html = BeautifulSoup(raw.text, 'html.parser')
# 컨테이너 수집하고 출력해보기
stores = html.select("div.lsnx")
print(stores)

실행결과 [ ]

데이터를 수집한 결과를 확인해보면 stores에 데이터가 들어있지 않은 것을 확인할 수 있습니다. (빈 리스트가 출력됩니다.) 원래대로라면 10개의 가게정보 데이터가 리스트형식으로 저장되어야 하지만 어떤 이유에서인지 데이터가 수집되지 않은 것을 알 수 있습니다. *len(stores)를 출력해보면 0이 나옵니다.

정적페이지와 동적페이지

기존의 방법으로 네이버 지도의 데이터를 수집할 수 없는 이유는 네이버 지도 페이지는 우리가 지금까지 수집해온 페이지(네이버TV, 네이버뉴스, 네이버영화 등)와 다른 방식으로 구성된 페이지이기 때문입니다.

네이버 뉴스와 네이버 지도 페이지의 차이

query: 검색어, where: 카테고리

3주차에서 네이버 뉴스의 검색 키워드를 설정해주시 위해서 URL에 요청값에 대해서 공부했습니다. (URL 요청값 다시보기) 위에서 볼 수 있듯 URL에 원하는 데이터의 정보가 포함되어 있습니다.

검색어를 입력해도 URL이 변화하지 않습니다.

하지만 네이버 지도 페이지에서는 검색어를 입력해도 네이버 지도 페이지의 URL은 변하지 않습니다. 네이버 뉴스 검색결과처럼 URL에 따라 정해진 페이지를 불러오는 것을 정적(Static)페이지라고하며, 네이버 지도처럼 URL에 관계없이 웹페이지 위에서 데이터를 불러오는 방법을 사용하는 것을 동적(dynamic)페이지라고 합니다.

동적페이지에서 데이터를 수집할 수 없는 이유

치킨 검색결과 검사창에서는 노랑통닭을 찾을 수 있다.

앞에서는 Chrome의 검사창(inspect)을 이용해서 웹페이지 위의 데이터를 찾았습니다. Chrome의 검사창을 이용하면 소스코드에 해당하는 웹페이지 요소의 위치를 쉽게 확인할 수 있지만, 검사창 위의 소스코드는 이미 한번 해석된(데이터가 가져와진) 소스코드입니다.

치킨 검색결과 소스코드에는 노랑통닭이 없다.

하지만 동적페이지로 구성하는 경우 실제로 서버에 저장되어있는 소스코드에는 우리가 원하는 데이터가 저장되어있지 않습니다. 아직 동적으로 데이터를 가져오지 않았기 때문입니다.

소스코드 상에서 데이터를 확인할 수 없다면 동적페이지다.

우리가 지난 5주간 공부한 requests방법으로는 URL 주소에 저장되어있는 소스코드만 저장할 수 있기 때문에 동적 페이지를 수집하기 위해서는 새로운 방법을 사용해야합니다.

정적페이지/동적페이지 특징

정적(static) 페이지

동적(dynamic) 페이지

페이지에 접속하면 저장되있는 소스코드를 그대로 불러옵니다.

페이지에 접속하면 유저의 행동결과에 따라 소스코드가 변화합니다.

URL에 따라 데이터가 다르기 때문에, URL에 데이터를 요청하는 부분이 들어있습니다.

URL에 관계없이 유저의 행동결과에 따라 소스코드가 변하기 때문에 URL은 일정하게 유지됩니다.

일반적인 게시판, 뉴스 홈페이지

유저의 행동에 따라 데이터가 변할 수 밖에 없는 웹앱

requests

???