1. 개발자 도구, Elements, Network

1. 개발자 도구 열기

웹페이지를 크롤링하기 위해 우선 개발자 도구로 Elements, Network탭을 살펴보자

 

실습에 이용할 사이트는 다음의 뉴스이다.

 

https://v.daum.net/v/20190728165812603

 

chrome에서 연 다음의 사이트이다.

chrome 브라우저를 사용해 사이트를 열었으면 개발자 도구를 열어보자.

메뉴 탭에 보기- 개발자 정보 - 개발자 도구를 클릭한다.

그럼 우측에서 새로운 창을 하나 볼 수 있게 될 것이다.

2. Element, Network 

이제 개발자 도구창에서 Element와 network 창을 살펴보자.

다른 기능은 크롤링할 때 크게 사용하는 부분이 아니라고 한다.

 

Elements를 보면 이렇게 다양한 html tag 들을 볼 수 있따. ( 보라색 글씨가 tag임 )

 

💡 우리가 실제로 요청하여 브라우저가 다운 받은 데이터들은 사실 뉴스화면이 아닌 이러한 html 코드이다. 단순히 말하자면, 이 html 코드를 크롬이라는 브라우저가 랜더링하여 보기 쉽게 우리의 화면에 뿌려주는 것이다. 그 말은 즉슨 우리가 보고 있는 화면들에는 전부 매칭되는 html 태그들이 있다는 것이다.

이제 각 화면에 있는 요소들이 각각 어떤 html 태그를 가지는지 확인해 보자.

다시 개발자 도구로 가서 좌측 상단에 커서가 있는 이모티콘을 클릭한다.

어피치가 가르키고 있는 커서 이모티콘을 클릭하고 뉴스의 아무곳을 커버링 해보면, 해당하는 소스가 어떤 html tag에 위치해 있는 지 보여준다.

 

기사의 큰 제목은 <h3 tag>임을 알 수 있다.

이런 방법으로 앞으로 크롤링을 할 때는 해당 사이트의 개발자 도구를 열고, 그 소스가 어떤 태그로 있고 어떤 속성을 갖는 지 확인해야 한다.

 

다음으로는 Network 탭을 살펴보자

만약 위의 사진과 다르게 여러 개의 log가 보인다면 clear 버튼을 눌러서 지우기가 가능하다.

또한 Perserve log 버튼을 체크해주면 지금 요청으로 생성될 log를 지우지 않고 보관할 수 있다.

 

이제 사이트를 새로고침해보자. 새로고침 단축키는 cmd + R 이다. (맥 기준)

다양한 로그들을 볼 수 있다.

 

새로고침 한 번만으로도 이렇게 많은 로그가 요청된다니 벌써부터 어지럽다.

 

- HTML Elements란?

HTML (Hyper Text Markup Language)란.

• 웹사이트를 생성하기 위한 언어로 문서와 문서가 링크로 연결되어 있고, 태그를 사용하는 언어이다.

태그(Tag)란?

• HTML문서의 기본 블락
• 브라우저에게 어떻게 렌더링(화면에 표시)될지를 전달하는 것

<태그명 속성1=“속성값1” 속성2=”속성값2”>Value</태그명>

<태그명 속성1=”속성값1” 속성2=”속성값2”/>

<h3 class="tit_view" data-translation>일론머스크 "테슬라에서 넷플릭스.유튜브 즐길 날 온다"</h3>

h3 : 태그명

class : 속성명

tit_view : 속성값

일론머스크~ : value

 

 

다음은 html method 중 GET, POST 에 대해서 알아보자.