던전앤파이터/던파 타임라인 훔쳐보기

[웹크롤링] 인터넷에서 캐릭터 정보를 가져오자 - 던파모아 활용(2)

죤씨나 2022. 4. 26. 17:41

 

좌측 상단에 박스친 URL에 집중하자.

이제 우리는 파이썬으로 서버에 요청을 보내 응답을 받는 과정을 진행할 것이다.

일단 캐릭터의 정보를 얻기 위해서, 모험단 단위로 검색을 진행할 것이다.

 

 

from urllib import parse
from urllib.request import urlopen

ADV_SEARCH = 'https://dunfamoa.com/characters/adventure?search='

def urlEncoding(keyword_): #"말걸면"을 URL 인코딩하여 반환함
    keyword = parse.quote(keyword_)
    return keyword

if __name__ == "__main__":
    adv_keyword = urlEncoding("말걸면")
    print(adv_keyword)

print(adv_keyword)

먼저 검색어("말걸면")를 URL 인코딩하기 위해 parse를 import한다.

작성된 함수(def urlEncoding)는 parse.quote를 통해

검색어를 URL 인코딩하여 그 값(adv_keyword)을 반환한다.

 사진은 URL 인코딩된 "말걸면"을 출력한 결과이다.

 

 

    print(ADV_SEARCH + adv_keyword)

print(ADV_SEARCH + adv_keyword)

ADV_SEARCH와 adv_keyword를 이어서 "말걸면"을 검색한 웹페이지에서 사용가능한 URL을 만든다.

해당 URL에서 urlopen을 사용하여 정보를 추출하는 과정을 진행해보자.

 

 

    source_code = urlopen(ADV_SEARCH + adv_keyword).read()
    print(source_code)

print(source_code)

 

출력 결과가 많이도 뜬다. 

해당 출력은 무엇을 나타내는 것일까?

 

 

해당 웹페이지에서 F12버튼 누른 결과

 

앞선 출력은 우리가 오픈한 URL의 소스 코드다.

이는 해당 URL에서 F12를 누르면 확인할 수 있다.

사진의 웹페이지는 해당 소스 코드로 이루어져있다고 생각하면 된다.

그렇다면 해당 웹페이지에서 일어나는 "event"들,

가령, 모험단을 클릭한 뒤 일어나는 "event"가 저 코드들에 의해 일어난다고 생각하면 된다.

 

 

F12로 나타난 소스 코드 부분 확대

우리는 "event"들을 직접적으로 발생시키는 body 부분을 유심히 살피면 된다.

 

 

각각의 사진에서 우측에 위치한 소스 코드에 마우스포인터를 갖다대면 소스 코드에 의해 웹페이지에서 동작되는 부분이 표시된다.

 

body 부분을 펼쳐서 소스 코드 위에 마우스 포인터를 갖다대면 친절하게도

웹페이지 화면 내 어느 부분에서 동작하는 코드인지 알 수 있도록 선택이 된다.

우리는 모험단 검색을 진행하려고 하기 때문에 왼쪽에서 선택한 코드 부분을 살펴보도록 하자.

 

 

<body>
 <div id="__next">
  <div id="Layout">
   <main id="Content">
    <div class="Wrapper-sc-1noqpd4-1 gfctoN">
     <div class="ResultWrapper-sc-1noqpd4-2 eWKzQn">
      <div>
       <div class="Wrapper-sc-jrfk9d-0 bykzDt">
       	<a href="/adventures/
        %EB%A7%90%EA%B1%B8%EB%A9%B4%ED%81%B0%EC%9D%BC%EB%82%98%EC%9A%94" 
        class="Row-sc-jrfk9d-1 hiKazl">...</a>
       	<a href="/adventures/
        %EB%A7%90%EA%B1%B8%EB%A9%B4%EB%92%A4%EC%A7%84%EB%8B%A4" 
        class="Row-sc-jrfk9d-1 hiKazl">...</a>
       	<a href="/adventures/
        %EB%A7%90%EA%B1%B8%EB%A9%B4" 
        class="Row-sc-jrfk9d-1 hiKazl">...</a>
       	<a href="/adventures/
        %EB%A7%90%EA%B1%B8%EB%A9%B4%EA%B3%A0%EB%B0%B1%EA%B0%88%EA%B9%80" 
        class="Row-sc-jrfk9d-1 hiKazl">...</a>
      </div>

 

위 코드는 F12를 눌러 보여지는 소스 코드에서 body 부분을 펼친 것이다.

우리가 살펴보아야 할 부분은

<div class="Wrapper-sc-1noqpd4-1 gfctoN">에 존재하는 <a href>이다.

<a>는 anchor, 즉, 닻을 의미하고 <href>는 URL을 의미한다.

그렇다면 <a href = "주소">가 의미하는 것은

우리가 웹(바다) 서핑(surfing:파도타기)을 할 때, 닻을 내려 해당 주소에 정박하겠다는 의미가 된다.

앞선 "말걸면" 모험단 단위 검색 결과 사진에서, 총 4개의 결과가 검색되었다.

그렇다면 4개의 모험단을 클릭해서 확인할 수 있다는 것인데, 

위의 코드처럼 <a href> 태그가 4개가 존재하여

그 4개의 모험단을 클릭해서 이동할 수 있는 "event"를 발생시킬 수 있다.

(ex) 두 번째 <a href>에 해당하는 주소로 이동하면 "말걸면뒤진다" 모험단 웹페이지로 이동된다.)

 

이제 파이썬 코드로 옮겨보자.

 

바칼 - 죤씨나