웹 기본 지식

웹사이트와 관련된 기본 용어를 알아보자.

 

• HTML(Hyper Text Markup Language): 웹사이트를 생성하기 위한 언어로 문서와 문서가 링크로 연결되어 있고, 태그를 사용하는 언어
• HTTP(Hyper Text Transfer Protocol): HTML 문서 등의 리소스를 전송하는 통신규약

 

클라이언트가 서버에 페이지를 요청하면, 서버가 해당 페이지를 클라이언트에 응답한다.

이때, 클라이언트가 응답받은 페이지는 HTML이고, 이를 보기 쉽게 렌더링 한 결과가 우리가 보는 페이지다.

[그림 1] HTTP 통신

브라우저(클라이언트)가 서버에 요청하는 모든 기록은 개발자도구의 Network 탭에서 확인할 수 있다.

[그림 2]는 www.google.com 페이지를 요청한 네트워크 기록이다. 구글 페이지 요청 및 구글 페이지를 구성하는 이미지(google logo 등) 요청이 있다.

[그림 2] 개발자도구 - Network

 

HTTP 요청 방식으로는 Get, Post 등이 있다. Get 요청은 데이터를 URL에 포함하여 전달하고, Post 요청은 데이터를 Form data에 포함하여 전달한다.

Get 요청은 주로 리소스 요청에 사용된다. 구글에서 crawling을 검색하는 것은 Get 요청이다. search?q=crawling 데이터가 URL에 포함된다. (www.google.com/search?q=crawling)

Post 요청은 주로 로그인에 사용된다. Webhacking.kr 사이트에서 로그인하는 것은 Post 요청이다. URL에 로그인 정보를 포함하지 않고, Form Data에 입력한 id와 pw를 포함하여 전달한다. (www.webhacking.kr/login.php?login)

 

[그림 3] Post 요청 예시

 

HTML을 구성하는 요소는 개발자도구의 Elements 탭에서 확인할 수 있다.

HTML 문서의 기본 블락은 아래와 같은 구조를 가진다.

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

Elements 정보를 파악하면 원하는 값을 크롤링하거나, 웹브라우저를 동작시킬 수 있다.

 

[그림 4]는 크롤링을 하기 위해 값이 어떤 태그에 있는지 파악하는 예시이다. 위키백과 웹 크롤러 페이지에서 웹 크롤러에 대한 설명은 <p> 태그에 문단별로 나눠져 담아있다. 그리고 <p> 태그는 class 속성이 "mw-parser-output"인 <div> 태그 하위에 있다. 따라서 웹 크롤러의 설명을 크롤링하고 싶다면 class="mw-parser-output"인 <div> 태그의 자식인 <p> 태그의 값들을 가져오면 된다.

[그림 4] 개발자도구 - Elements(1)

 

[그림 5]는 프로그래밍으로 구글 검색을 하기 위해, 검색바가 어떤 속성을 가지는지 파악하는 예시이다. 구글의 검색바가 <input> 태그, title 속성이 "검색"인 것을 확인했다. 태그와 속성으로 검색바를 찾고 키워드를 입력한 후 검색 버튼을 찾아 클릭하면 된다.

[그림 5] 개발자도구 - Elements(2)

 

다음 포스팅에서는 Python에서 크롤링하기 위해 사용되는 함수 몇 가지를 다뤄볼 것이다.