내일배움캠프 1주 - 2일차

2일차에는 참가자들이 모두 모여 각 팀원들을 소개하는 시간을 가졌고 공부는 웹프로그래밍 기초 2주차~3주차 강의를 복습했다

2주차 강의내용정리 : jQuery와 Ajax

jQuery는 Javascript으로 구현되는 기능들을 라이브러리에 담아 간단한 코드로 사용할 수 있도록 작성해둔 것을 말한다
사용하기 위해선 CDN 링크를 가져와야함

jQuery 예시 : 요소를 숨기거나 보이게하기, 동적으로 html 넣기

위 이미지에서 영화 기록하기 버튼을 누르면 포스팅 박스가 나타나고 박스 내 닫기 버튼을 누르면 사라지도록 하고,
추가로 웹페이지가 처음 로딩될때 포스트박스가 보이지 않게 설정해보자

<script>
  function open_box() {
              $('#post_box').show() // id="post-box" 요소를 보이게함
          }
          function close_box() {
              $('#post_box').hide() // id="post-box" 요소를 숨김
</script>
 
<style>
  .mypost {
      display: none; // 웹페이지를 처음 불러올때 포스트 박스가 보이지 않는 상태로 만든다
</style>

그 외 추가로 사용되는 jQuery

$('#아이디값').attr("src", 이미지URL) // 이미지 바꾸기
$("#아이디값").text("바꾸고 싶은 텍스트") // 텍스트 바꾸기

Ajax GET 예시 : 로컬 서버가 아닌 동적 데이터를 html에 붙여보기

위 이미지처럼 로컬서버가 아니고, 변화되는 데이터를 내가 원하는 모양의 body에 담아보자

$(document).ready(function () { // 웹페이지를 처음 불러올때 바로 함수가 실행되도록함
           $.ajax({
                type: "GET", // GET 요청
                url: "http://spartacodingclub.shop/web/api/movie", // 요청할 데이터의 url
                data: {}, // GET 요청이므로 비워둔다
                success: function (response) { // response 라는 변수에 데이터를 받음
                    let rows = response['movies'] // rows 라는 변수에 response의 데이터의 movies 리스트를 담음
                    for (let i = 0; i < rows.length; i++) { // rows의 길이만큼 for 구문을 돌림
                        let title = rows[i]['title'] // rows안의 데이터를 title, desc, image 등 각각의 변수에 맞게 담음
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']
                        let star = rows[i]['star']
                        let comment = rows[i]['comment'] 
                        let star_image = '⭐'.repeat(star) // star의 값만큼 원하는 값으로 바꿈
                        let temp_html = `<div class="col">
                                            <div class="card h-100">
                                                <img src="${image}" class="card-img-top" alt="...">
                                                <div class="card-body">
                                                    <h5 class="card-title">${title}</h5>
                                                    <p class="card-text">${desc}</p>
                                                    <p>${star_image}</p>
                                                    <p class="mycomment">${comment}</p>
                                                </div>
                                            </div>
                                        </div>` // 원하는 모양의 바디를 백틱안에 넣고 동적데이터를 담은 각각의 변수를 ${}를 사용하여 넣어줌
                        $('#cards-box').append(temp_html) // html이 붙여지기 원하는 곳의 id값과 백틱값을 담은 변수를 불러옴
                    }
                }
            })
        });

function listing() {
            
        }

3주차 강의내용정리

python 으로 웹 스크래핑(크롤링) 해보기

2주차때 했던 javascript에서 동적데이터 가져오기를 python 에서 해보자

지니뮤직 차트에서 순위, 제목, 가수 텍스트를 가져와보자

import requests
from bs4 import BeautifulSoup # requests, bs4 패키지 설치

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('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20220301',headers=headers) # 가져올 데이터의 url

soup = BeautifulSoup(data.text, 'html.parser')

requests의 기본적인 세팅을 한 후,

# 가져오고싶은 요소의 selector를 복사하여 넣는다
charts = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for chart in charts: # 요소들을 리스트화
    rank = chart.select_one('td.number').text[0:2].strip() # text 2번째 텍스트까지만 가져오고 strip으로 공백제거
    title = chart.select_one('td.info > a.title.ellipsis').text.strip().strip('19금').strip() # strip으로 불필요한 텍스트 제거
    artist = chart.select_one('td.info > a.artist.ellipsis').text

    print(rank, title, artist)

이렇게 원하는 데이터만 깔끔하게 가져올 수 있다