항해99 TIL [9/21]

추석연휴 이틀차, 갑자기 주어진 자유가 이제 익숙해진 것 같다. 하지만 이럴 때일수록 나태해지지 않도록 의지를 좀 더 다잡고 "웹개발 플러스" 3주차도 달려보려 한다.

웹개발 플러스 - 3주차

[수업 목표]

1. Selenium을 이용해 브라우저를 제어하고 웹스크래핑을 할 수 있음.
2. 내 웹사이트에 네이버 지도를 넣을 수 있음.
3. 네이버 지도 API의 다양한 기능을 활용할 수 있음.
   
   

3주차에 배울 것

• 브라우저 제어
  • 내가 필요한 정보를 얻기 위해 로그인, 스크롤 내리기 등 브라우저를 동작시켜야 할 때, selenium 같은 브라우저 제어 프로그램을 이용할 수 있음.
  • 웹스크래핑 뿐만 아니라 브라우저 제어 기능을 응용하면 정해진 시간에 게시판에 글을 작성하는 등 다양한 업무를 자동화하는 데 쓰일 수 있음.

셀레니움으로 스크래핑하기

1) 스크래핑 복습 - 멜론 차트

• 웹스크래핑이란?
  웹 스크래핑(web scraping)은 웹 페이지에서 우리가 원하는 부분의 데이터를 수집해오는 것을 뜻함.
  

한국에서는 같은 작업을 크롤링 crawling 이라는 용어로 혼용해서 쓰는 경우가 많음. 원래는 크롤링은 자동화하여 주기적으로 웹 상에서 페이지들을 돌아다니며 분류/색인하고 업데이트된 부분을 찾는 등의 일을 하는 것을 뜻함.
- 따라서, 구글 검색을 할 때는 web scraping 으로 검색해야 우리가 배우는 페이지 추출에 대한 결과가 나올 것.

• 참고
  Web Scraping(wikipedia) / Web Crawler(wikipedia)
  Web Scraping vs Web Crawling: What’s the Difference?
  
  
• 먼저 requests와 beautifulsoup4를 이용해서 멜론 차트를 스크래핑 함.
  • 파이참으로 프로젝트를 준비할 것.
    1. File > New project에 가서 project03 폴더 열기
    2. Project Interpreter에서 가상환경에 필요한 패키지 설치하기(requests, beautifulsoup4, pymongo, flask, selenium)
    3. project03 폴더 안에 templates, static 폴더 만들기
    4. app.py 파일 만들기
    5. templates 폴더 안에 index.html 파일 만들기
    6. prac_scraping.py 파일 만들기
       

                import requests
                from bs4 import BeautifulSoup
                
                url = "https://www.melon.com/chart/day/index.htm"
                headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
                data = requests.get(url, headers=headers)
                
                req = data.text
                soup = BeautifulSoup(req, 'html.parser')

• 크롬에 멜론 차트를 띄우고 개발자도구를 열어 HTML 구조를 살펴보자. 각 노래 제목, 가수 이름, 좋아요 수는 어떻게 가져와야할까?

  • 멜론 차트

    https://www.melon.com/chart/day/index.htm

  

• 선택자로 정보 출력하기

  songs = soup.select("#frm > div > table > tbody > tr")
  print(len(songs))
  
  for song in songs:
      title = song.select_one("td > div > div.wrap_song_info > div.rank01 > span > a").text
      artist = song.select_one("td > div > div.wrap_song_info > div.rank02 > span > a").text
      likes = song.select_one("td > div > button.like > span.cnt").text
      print(title, artist, likes)

고급 기능 쓰기

• 카드 보이게 스크롤 움직이기

  • 카드 보이게 스크롤 움직이기

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

• 카드 제목 클릭했을 때 정보창 띄우기

  a 태그를 클릭했을 때 새창이 뜨는게 아니라 javascript 함수를 실행하고 싶다면?

    function click2center(i) {
        let marker = markers[i]
        let infowindow = infowindows[i]
        if (infowindow.getMap()) {
            infowindow.close();
        } else {
            infowindow.open(map, marker);
            map.setCenter(infowindow.position)
        }
    }

  • make_card 안의 a 태그 수정

    <a href="javascript:click2center(${i})" class="matjip-title">${matjip['title']}</a>

• og태그, favicon 넣기

  • 이번주도 완성도 있는 사이트를 위해 Open Graph 태그와 favicon을 넣어보자. og 이미지는 배너 이미지를 복사해서 사용하고 favicon은 아래 파일을 다운 받아 static 폴더에 넣어줌.

    • favicon

      https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webplus/week03/favicon.ico

  • index.html 위에 링크를 첨부함.

    • og태그와 favicon 링크

      <meta property="og:title" content="스파르타 맛집 지도"/>
      <meta property="og:description" content="mini project for Web Plus"/>
      <meta property="og:image" content="{{ url_for('static', filename='og_image.jpg') }}"/>
      <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
      <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">