웹 프로그래밍 A-Z 심화 - 3주차

1. Selenium

1) Selenium 사용하는 이유

• 동적으로 만든 데이터를 크롤링 하기 위해
• 다양한 HTML요소에 클릭, 키보드 입력 등 이벤트를 주기 위해

2) 사용하기

• 모듈 설치
  pip install selenium
• 크롬 드라이버 설치
  • 구글 버전 확인 - chrome://settings/help
  • 크롬 드라이버 다운로드

3) 적용해보기

• Github 저장소
• span 태그 없애기

    likes_tag.span.decompose()

• 스크롤 내리기
  • 1000 pixel 만큼 내리기

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

  • 맨 밑까지 내리기

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

2. Naver map API

1) 마커 이미지 바꾸기

let marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.4981125, 127.0379399),
    map: map,
    icon: "원하는 이미지 파일"
});

2) info 창 띄우기 (마커 클릭할 때마다 여닫기)

naver.maps.Event.addListener(marker, "click", function () {
    console.log(infowindow.getMap()); // 정보창이 열려있을 때는 연결된 지도를 반환하고 닫혀있을 때는 null을 반환
    if (infowindow.getMap()) {
        infowindow.close();
    } else {
        infowindow.open(map, marker);
    }
});

3) Geocoding

• geocoding API reference
• 주소를 좌표 값(위도, 경도)으로 바꿔 지도상에 표현 할 수 있다.

3. 마무리

Selenium을 사용해서 동적 웹페이지를 크롤링 하는 방법과 Naver Map API를 사용하여 지도상에 마커를 표시하고 info창을 띄우는 작업을 했다.
사실 웹페이지에 지도를 사용하는 것을 졸업작품으로 자율주행 RC카를 제작할 때 Google Map API으로 RC카의 현재위치를 표현하는 작업을 한 적이 있어서 조금 더 빨리 이해가 되었고, 졸업작품을 진행하면서 이해하지 않고 다른 블로그나 웹사이트에서 참고하면서 막연하게 따라했던 것을 이해할 수 있는 좋은 기회가 되었다. 그리고 이런것을 좀 더 미리 알았더라면 이라는 아쉬움도 있었다.