[머신러닝 인강] 6-2주차: 웹 기본 지식 이해하기

<6-2주차 수강 클립>

02. 데이터 수집을 위한 Python (Crawling)

01. 웹 기본 지식 이해하기 - 01. 개발자도구(chrome)을 이용하여 웹 페이지 분석하기

02. 웹 기본 지식 이해하기 - 02. HTTP method(GET, POST) 이해하기

03. 웹 기본 지식 이해하기 - 03. HTML 엘레멘트 이해하기(태그, 속성, 값)

 

---

 

이번 주차부터는 파이썬을 이용한 웹 크롤링에 대해 알아보았습니다

크롤링하기 전, 웹 페이지의 개발자 도구를 이용해 html element들을 확인하여

미리 어떤 태그와 속성을 가지는지 파악하는 법을 배웠어요 !

 

>>수강 인증샷<<

 

---

 

01. 웹 기본 지식 이해하기 - 01. 개발자도구(chrome)을 이용하여 웹 페이지 분석하기

 

- 개발자도구

거의 모든 브라우저에 포함된 기능 (크롬, 파이어폭스, etc .. 모두 있음)

웹사이트를 기본적으로 분석할 수 있는 툴

[보기] → [개발자] → [개발자도구] → element & network 사용해보기

 

- element 탭

[페이지 우클릭] → [페이지 소스 보기]: 클라이언트가 서버에 요청해서 브라우저가 다운받은 데이터는 이 때 보이는 html 문서를 렌더링 한 것!

즉, 웹 페이지에서 눈에 보이는 데이터들은 각각 매칭된 html 태그가 있음 (tag: 하나하나의 element들을 의미)

개발자도구로 페이지 내에서 원하는 데이터를 클릭 → 해당 데이터가 실제 html 문서 내에서 어떤 태그와 속성을 가지는지 표시해줌 → 먼저 html 태그 파악하기!

 

- network 탭

브라우저가 필요한 데이터를 각각 서버에 요청하는 모든 기록을 로깅함

*)이미지는 첫 번째 요청에 한 번에 오는 데이터가 아님! (브라우저가 전송받은 html을 렌더링 하면서 이미지를 렌더링 할 때가 되면 그 때 이미지를 요청함)

*)모든 데이터를 한꺼번에 브라우저로 넘기지는 않음, 처음에는 기본적인 데이터들만 남겼다가 나머지는 브라우저에서 (다른 기술을 이용해) 부분적으로 요청해서 가져갈 수 있게 함 (추가적인 요청으로 발생) ex) 댓글

*)크롤링: 개발자 도구로 웹 페이지 분석이 끝나게 되면 파이썬의 여러가지 모듈로 자동화시킬 수 있다!

 

---

 

02. 웹 기본 지식 이해하기 - 02. HTTP method(GET, POST) 이해하기

 

- HTTP (HyperText Transfer Protocol)

HTML 문서 등의 리소스를 전송하는 프로토콜 (html 문서 전송은 클라이언트와 서버 사이에서 이뤄짐)

클라이언트가 서버에 HTTP를 요청(request)하고 서버가 HTTP요청에 대해 클라이언트에게 응답(response)함

*)클라이언트: 브라우저라고 생각, 사용자가 브라우저에 url을 입력하면 http요청으로 해당 서버에 전달됨

*)서버: 요청을 받아 http응답을 만들어 클라이언트로 보내줌, 클라이언트(브라우저)는 받은 응답을 렌더링 해서 우리 눈(화면)에 뿌려주게 됨

 

- HTTP 요청 방식

1. Get 요청: 데이터를 url에 포함하여 전달 (주로 리소스 요청에 사용)

url을 치거나 검색해서 웹사이트로 접속하는 등 대부분은 get방식을 사용함

요청 데이터를 url 내에 포함시킬 수 있어 정보 공유가 가능하다는 장점이 있음 (url에 데이터가 그대로 보임)

 

2. Post 요청: 

데이터를 Form data에 포함하여 전달 (주로 로그인에 사용)

대부분 우리 눈에 안보이는 요청, 데이터를 숨기고 싶을 때 사용함

*)로그인 페이지를 여는 것은 리소스 요청이기 때문에 get / id와 pwd를 쳐서 로그인 버튼을 누르는 행위는 post

url 내에는 데이터(id, pwd)가 없지만 form data에 포함되어 전달됨

 

*)크롤링 시 리소스를 가져오는 건 대부분 get 방식으로 가져오게 될 것, 간혹 웹 서버에서 데이터를 가져올 때 post로 구현된 경우나 로그인을 해서 데이터를 긁어와야 할 경우 post 방식을 씀

 

---

 

03. 웹 기본 지식 이해하기 - 03. HTML 엘레멘트 이해하기(태그, 속성, 값)

 

- HTML (HyperText Markup Language)

웹사이트를 생성하기 위한 언어로, 문서와 문서가 링크로 연결돼 있고 태그를 사용(markup)하는 언어

*)즉 어떤 페이지에서 다른 페이지로 넘어가기 위해 여러 페이지가 링크로 연결됨

 

- 태그(tag)

HTML문서의 기본 블락

브라우저에게 어떻게 렌더링(화면에 표시)될지에 대한 정보 전달

태그마다 각 역할 or 기능이 있음 ex)p: paragraph_텍스트들을 한 문단으로 표시, div: 논리적으로 태그들을 묶어 grouping하는 것, button: 버튼 표시

 

- 태그의 정의 방식

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

2. <태그명속성1="속성값1" 속성2="속성값2"> :Value가 없는 경우

*)속성: class, id, etc...

 

---

 

강의 링크: https://bit.ly/3cB3C8y