카테고리 없음

내일배움캠프 3일차

barryjung 2023. 3. 15. 21:42

[오늘 한일]

팀프로젝트 진행

  • 페이지 구성안 조정
  • 팀원 추가 기능
  • 독서리뷰 추가 기능

 

[오늘 배운점]

웹스크래핑으로 링크에서 이미지URL, 제목, 작가를 뽑아 저장하고 출력하는 모습. 왼쪽은 테스트페이지, 오른쪽은 실제 페이지다.

<웹스트래핑을 이용한 정보저장>

우리 팀은 독서 리뷰 페이지를 추가하기로 했는데,

새 리뷰를 추가할때 교보문고 책링크를 넣으면 이미지, 제목, 작가를 자동으로 작성하게끔 만들기로 했다.

 

그래서 웹스크래핑을 쓰게 됬다.

강의때 배운대로 작성했는데 안되는 부분이 있어 새로 작성한 부분도 있다.

 

import requests
from bs4 import BeautifulSoup

soup = BeautifulSoup(data.text, "html.parser")
img_tag = soup.select_one("img[src^='https://contents.kyobobook.co.kr/sih/fit-in/']")
img_url = img_tag.get("src")
print(img_url)

title_tag = soup.select_one("#contents > div.prod_detail_header > div > div.prod_detail_title_wrap > div > div.prod_title_box.auto_overflow_wrap > div.auto_overflow_contents > div > h1 > span")
title_name = title_tag.text
print(title_name)

author_tag = soup.select_one("#contents > div.prod_detail_header > div > div.prod_detail_view_wrap > div.prod_detail_view_area > div:nth-child(1) > div > div.prod_author_box.auto_overflow_wrap > div.auto_overflow_contents > div > div > a:nth-child(1)")
author_name = author_tag.text
print(author_name)

(.get과 .text 위치를 바꾼다면 한줄씩 더 간소화도 가능하다.)

우선 bs4와 requests 라이브러리 설치가 필요하다.

 

아래 두부분과 같이 필요한 정보부분을 copy selector로 지정해서 값을 가져오는 방법이 있다.

책이름과 작가이름은 이렇게 잘 가져와진다.

 

반면, 이미지의 경우 copy selector로 지정할 경우 none이 나온다.

태그를 찾을수 없을 경우에 해당한다고 한다.

방법 차이에 따라서 결과가 다르게 나온다. 결과가 None으로 나와서 태그를 참조할수 없다.

그래서 다른 방법인 img[src^='구분자']를 사용했다.

구분자에 해당하는 내용을 찾아서 src에 가지고 있는 img태그를 찾는다.

^는 대상이 구분자 열로 시작하는 경우도 포함하는 속성이다.

 

이렇게 할경우 해당 html을 태그채로 불러와서 get("src")로,

내가 필요한 이미지 url을 가져올수 있다.

 

(태그를 못 찾는 이유를 분석해보니, 클래스가 두개씩인 태그 중 찾지 못하는 클래스가 있다.

바로 상위 태그와 중간에도 그런 태그가 있다. 이 부분을 제외하니까 잘 동작한다.)

<CSS 선택자>

프로젝트를 진행하다 보니

페이지를 꾸미기 위한 css 부분이 길어지고 복잡해진다.

헷갈리는 부분이 있어 명확하게 선택자를 정리해봤다.

<body>
    <div class="title" id="mytitle">hey
        <div class="box" id="mybox">안녕</div>
        <div class="box" id="mybox2">안녕2</div>
    </div>
</body>

이렇게 본문이 있을때.

 

작성법 기능
태그명 태그를 지칭
.클래스명 클래스를 지칭
#id명 id를 지칭

크게 이렇게 3개 기본 지칭방법이 있다.

(3개 다 작성하면 id가 적용된다)

 

태그>태그 >는 하위태그 지칭 ※기본적으로 상위단계 css를 하위에도 적용한다
태그[속성="속성값"] []로 특정 속성값 지칭 ※즉, [id="id"][class="class"]도 가능하다.
태그>태그:nth-child() n번째 하위태그 지칭  
태그:hover 등 태그가 특정상태가 되었을경우  
태그+태그 태그의 다음태그 지칭 ※~로 쓸경우 다음태그와 이어지는 모든 같은 태그를 지칭
태그 태그 공백은 모든 하위태그 지칭 >는 직계, 공백은 모두이다.

사실 다른 방법이 무수히 많지만,

진행하면서 알게된것들만 정리해봤다.

 

<git 소스트리 활용>

git 소스트리를 이용한 변경사항 추적.

git을 더 익히면서 소스트리를 설치했다.

소스트리를 이용하면 git log를 보는거 보다 더 변경사항을 잘 확인할수 있다.

 

<시간을 뽑는 방법>

팀원이나 리뷰를 추가할때,

추가한 시간이 기록되서 표시되게 해보기로 했다.

내가 확인한 방법과 팀원분에게 배운 방법. 2가지가 있다.

 

import time

time_receive = (time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(time.time())))
print(time_receive)

파이썬에서 뽑는 경우.

<script>
    let date = new Date();
    console.log(date)
</script>

자바스크립트로 뽑는 경우. (시간 결과값 가공 참고자료 :https://hianna.tistory.com/325)

 

기능의 동작을 생각해서 더 적합한 위치에서 활용하면 될것 같다.

페이지 내에서 참조할경우 스크립트.

기록하고 보여줘야 할경우 파이썬 쪽이 적합해 보인다.