1주차 웹페이지를 이해해보자

코알라유니브 1주차 수업에서는 웹페이지의 데이터를 크롤링하기 위한 선행학습으로, 웹페이지의 구성과 원하는 정보는 찾을 수 있게하는 선택자에 대해 배워보았다.

 

 

기본적인 내용은 팀원들 모두 코알라에 올라와있는 인터넷강의와 자료를 통해서 숙지가 되어있었지만, 선택자를 찾는 것을 처음해보다보니, 여러가지 의문점을 생겼다. 스터디에서는 그 의문점을 해결해보는 시간을 가졌다.

 그후 시간은 추가적으로 선택자를 찾는 연습을 하기위해서 다양한 웹페이지에서 선택자를 찾아보고, 의견을 나누었다.

 

그룹스터디를 하니깐, 혼자 했을 때는 당연히 넘어갔던 부분도 정확하게 하기위해 더 많은 질문이 나왔고, 또 다른사람이 궁금해하는 점에 대해서도 생각해보고 같이 해결하는 시간을 가질 수 있었다. 다만 아쉬웠던 것은 7명이라는 수가 적지 않은 숫자여서 다수의 사람과 정보를 교환하는데에 있어서 어려움이 있었다.

---

1주차 정리

웹의 구성은 3가지 : 표준화를 통해 다양한디자인을 제공받거나 사이트간 로딩속도, 유지보수 등을 효율화함

구조 : 웹 콘텐츠에 의미를 부여하고 구조를 형성 → HTML

표현 : 시각적인 디자인과 레이아웃 표현 → CSS

행위 : 모든 front-end의 브라우저 상호작용을 담당 → JavaScript

 

1주차 복습

	큰 Container	작은 Container
Container 설정	쉬움	어려움	조삼모사
Selector 설정	어려움	쉬움
컴퓨터가 찾는다고 생각할때	느림	빠름	Path를 잡아주는 거니깐
중복이 일어날 확률	많음	적음	Tag가 겹치기쉬움

결론은 원하는 Data의 개수와 Class(column)를 가지는 최소단위의 Container가 좋다고 생각 됨

-> 사람들과 의사소통하기위해서 오히려, 짧은게 낫겠다는 생각을 함=>최적화시켰음 (10/28)

 

자손과 자식을 Data를 찾는다는 개념에서 바라봤을 때
자손 “ “ : Data의 수집  크롤링 상대경로  #id와 함께 썼을 때 유지보수,변경이 쉽다.
자식 “>”: Data이 선택  index#id 절대경로  컴퓨터입장에서는 더 좋을 꺼

	표현	Data	경로	속도	변경,유지보수
자손	“ “	수집	상대경로	느림	좋음
자식	“>”	선택	절대경로	빠름	나쁨

+추가 : 찾기기능에서 div가 계속 겹치는 경우 자손으로 div 하나만 쓰면 좋겠네

하지만 그 뒤로 붙는 것은 #id 처럼 html내에서 독립적인 것이여야함. 그래야 잘못된 태그로 이탈하지않음

 

 

- 빠르게 컨테이너 선택자 구하는 Tip

1.선택자의 경로 찾기

1. 원하는 데이터 값이 있는 마지막(leaf)태그를 찾기위해서 Ctrl+F 혹은 Ctrl+Shift+C 로 찾는다.

그 뒤 copy select로 경로 선택을 하고, 나열된 태그들을 trim 한다

 

2. 경로 주소

2. 컨테이너의 크기를 변경하고싶다면, 빨간색으로 표시된 경로를 확인하면서 중복을 확인 및 제거해준다

+ 일반적으로는 앞의 태그가 같고 뒤에 있는 태그에서 불필요한 태그를 지워주면 되었지만, 3주차에서 예외를 발견할 수 있었다.

시작 태그는 다르지만 class or id 에 의해 상대참조되어서 한 종류의 데이터를 가지는 경우이다. 이 경우는 copy selector를 할 경우 원하는 데이터를 전부 다 가져오지 못 할 수도 있다. 그래서 꼭 개발자도구에서 ctrl+F를 통해 데이터를 전부 다 가져오는지 확인해야한다.(이후에 6주차에서 보면, requests의 한계에 의해, 개발자도구에 있는 내용도 데이터가 안가져와질 수 있다.)

상대참조를 좀더 targeting 시키기위해 Class , id 가 있는 것

 

Additional) 유투브에서도 그렇게 찾아봤더니 #id 가 나오는 앞부분은 Copy select에서 제외됨 1:1대응이니깐. 상대참조의 시작점이 #id로 설정되는 것.

 

 

추가정보

• Scorll into view -> 태그의 내용이 WeB Brower에서 무엇을 의미하고, 어디에 위치하는지 보여줌
• Class이름은 찾기기능을 위한 단순한 분류가 아니다.태그에서 속성처럼 꾸며주는 역할을 가지기도함. 즉 CSS와 Java Script같은 기능을 담당하기도한다.( a.NPI=a:content 검색이 안되는이유)
• HTML에서 "" 속의 띄어쓰기는 .class 으로 대체 되는 것 같다 -> 다수의 독립된 classname을 가질 수 있음

풀리지않는 의문점

의문점

• 각 도메인주소에 들어있는 데이터는 고정되어있다(?) 그렇다면 어떻게 링크로 연결된 많은 데이터를 크롤링 할 수 있을까? -> 3주차 : html 태그 구조가 비슷한 사이트는 / 주소만 python for문을 통해 바꾸어서 반복시킴 
• 크롤링은 String되어있는 문자 Data만을 가져오는 것인가? 아마 그럴 것같다 (Excel로 저장한다고 하였으니) 그렇다면, 크롤링이라는 것은 누군가가 정리한 Data를 베껴오는 것이라면, 직접 그 정리한 사람의 DB에게 부탁해서 정보를 얻는게 더 좋은거아닌가? 내가 생각하는 크롤링의 효용은 짧은 시간에 많은 데이터를 가져와한다는 특성때문에 해킹일때 가장 큰 효용을 가질 것 같다(= AntiCrawling)