웹개발 플러스 3주차 개발일지

웹스크랩핑>

크롤링은 work를 자동화해서 페이지를 돌아다니며 분류, 색인하는 것을 뜻한다.
페이지의 내용을 추출하는 것을 웹스크랩핑이라고 한다.

동적인 (ajax를 사용하는) 웹페이지를 스크랩핑 할 때는 브라우저에 띄운 후 소스코드를 가져온다.

태그 결과물을 없애기 위해 .decompose()를 사용한다.

likes_tag.span.decompose()

사이의 빈칸을 지우기 위해 .strip()을 사용한다.

likes = likes_tag.text.strip()

브라우저를 제어하는 기능 중에 스크롤링도 있다. y=1000px만큼 내릴 때는 다음 코드를 쓴다.

driver.execute_script("window.scrollTo(0, 1000)")

y=맨끝까지 내리고 싶으면 다음 코드를 작성한다.

driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

만약 스크래핑 중에 더보기와 같은 버튼을 클릭할 필요가 있다면 다음 코드를 쓴다.

btn_more = driver.find_element_by_css_selector("#foodstar-front-location-curation-more-self > div > button")
btn_more.click()
time.sleep(5)

여러번(10번) 쓸려면 for와 try, except를 사용한다.

for i in range(10):
    try:
        btn_more = driver.find_element_by_css_selector("#foodstar-front-location-curation-more-self > div > button")
        btn_more.click()
        time.sleep(5)
    except NoSuchElementException:
        break

Map API>

이번 프로젝트를 만들기 위해서 네이버 지도 API를 가져온다.
이후 templates에 prac_map.html을 하나 만들고 다음 스크립트를 작성한다.

$(document).ready(function () {
                let map = new naver.maps.Map('map', {
                    center: new naver.maps.LatLng(37.4981125, 127.0379399),
                    zoom: 10,
                    zoomControl: true,
                    zoomControlOptions: {
                        style: naver.maps.ZoomControlStyle.SMALL,
                        position: naver.maps.Position.TOP_RIGHT
                    }
                });
                let marker = new naver.maps.Marker({
                    position: new naver.maps.LatLng(37.4981125, 127.0379399),
                    map: map
                });
            })

body에는 div로 map을 공간을 하나 만든다.

pin의 이미지를 바꾸고자 한다면 icon 코드를 덧붙인다.

icon: "{{ url_for('static', filename='file_name') }}"

info를 가져올 때는 다음 코드를 작성한다.

let infowindow = new naver.maps.InfoWindow({
    content: `<div style="width: 50px;height: 20px;text-align: center"><h5>Hello, world!</h5></div>`,
});
infowindow.open(map, marker);

닫을 때는 .close()를 사용한다.

infowindow를 기준으로 info를 여닫는 if문을 작성한다.

naver.maps.Event.addListener(marker, "click", function () {
                    console.log(infowindow.getMap());
                    if (infowindow.getMap()) {
                        infowindow.close();
                    } else {
                        infowindow.open(map, marker);
                    }
                });

강제로 스크롤을 시키기 위해 다음 코드를 사용한다.

$("#matjip-box").animate({
    scrollTop: $("#matjip-box").get(0).scrollTop + $(`#card-${i}`).position().top
}, 2000);

a 코드에서 Js를 실행시키려면 href에 javascript를 써주면 된다.

<a href="javascript:click2center('${i}')">