본문 바로가기

ICT 학습

웹개발 종합반 - 3주차

[ - 수업 목표 - ]

- 수업 목표

1. 파이썬 기초 문법을 안다.

2. 원하는 페이지를 크롤링 할 수 있다.

3. pymongo를 통해 mongoDB를 제어할 수 있다.

 

 

 

 

 

 

 

 

 

[ 01. 3주차 설치 ]

- 학습에 필요한 프로그램 설치

3.9버전의 경우 특정 라이브러리에서 오작동 사례가 있어서 3.8버전을 사용.

 

 

 

 

- Windows 버전의 python 설치

https://www.python.org/ftp/python/3.8.6/python-3.8.6-amd64.exe

주의) Add Python 3.8 to PATH 에 체크

 

 

 

 

 

 

- Mac 버전의 python 설치

https://www.python.org/ftp/python/3.8.2/python-3.8.2-macosx10.9.pkg

 

 

 

 

 

- Git bash 설치(Windows만)

https://git-scm.com/

 

Git

 

git-scm.com

클릭 후 다운로드 받은 설치 파일을 열어서, 설치를 진행합니다.

모두 next → next → next .. 해서 설치하시면 아래와 같이 완료! 됩니다!

 

 

 

 

- 배울것 이야기 - Python, 크롤링, mongoDB

 

[ 02. 연습 겸 복습 - 스파르타피디아에 OpenAPI 붙여보기 ]

- 스파르타가 만들어둔 OpenAPI 파악하기

http://spartacodingclub.shop/web/api/movie

앞서 진행한 과정에서 만들었던 나홀로메모장에 들어가는 아티클들의 정보를 불러오는 OpenAPI. 이 API를 써서 저장된 포스팅 불러오기를 만들어볼 예정이며, 이후에는 이 API를 실제로 만들어 볼 예정!

 

 

 

 

 

- 스파르타피디아 구경하기

http://spartacodingclub.shop/web/movie

 

스파르타 피디아

더 수어사이드 스쿼드 살고 싶다면 무조건 성공시켜라!최강 우주 빌런에 맞선, 자살특공대에게 맡겨진 ‘더’ 대책 없는 작전.... ⭐⭐⭐

spartacodingclub.shop

 

 

 

 

 

- 기존 스파르타 피디아 페이지에 포스팅 가져오기API 붙이기

 

1. 2주차 과정에서 완성했었던 '스파르타 피디아'를 동작시켜 봅니다.

2주차때 만들어 보았던 스파르타피디아 웹페이지

 

 

2. 관련 코드

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타 피디아</title>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1200px;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

            display: none;
        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }
        .mybtns > button {
            margin-right: 10px;
        }
    </style>
    <script>
        function open_box(){
            $('#post-box').show()
        }
        function close_box(){
            $('#post-box').hide()
        }
    </script>
</head>

<body>
<div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button onclick="open_box()">영화 기록하기</button>
</div>
<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea id="comment" class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

 

 

 

 

 

3. 웹페이지 로드가 다 되면 실행되는 함수를 하나 만든다.

그 전에 웹페이지 로드 후 수행되는 함수의 몇가지 예

 

window.onload

HTML상의 모든 tag를 불어온 이후에 코드내에 onload가 있을경우 읽어냄.

가장 큰 단점은 글자로만 이루어진 태그만으로 설계된 페이지라면 상관없지만, 이미지나 영상이 포함되어있을 경우 이미지나 영상의 크기가 매우 크든 말든 두 미디어까지 모두 읽어낸 뒤의 시점이 바로 onload임. 상황에따라 페이지 로딩이 심각하게 느릴수 있음.

<script>
	window.onload = function () {
    	    alert('이미지, 동영상 등 모든 웹페이지 전체 컨텐츠의 로딩이 완료된 후 실행됨')
    	}
</script>

 

 

 

jQuery의 document.ready

document. ready는 window.onload와 다르게 태그의 로드만을 감지함. 즉 DOM트리 (DOM Tree) 의 로드만을 감지하며 이미지나 영상의 로드는 처리하지 않음. jQuery의 편리함을 느낄 수 있는 부분임. 다만 이것 또한 제이쿼리 cdn을 불러오지 않으면 사용할 수 없다는 단점이 있으며, jQuery 또한, Javascript로 만들어진 framework 이기에, VanillaJS 으로 대처가 가능하다면, 굳이 document.ready 하나 동작시키기 위해 jQuery를 다운받는 것은 조금. 다른 문제일 수 있다.

<script>
	$(document).ready(function () {
            alert('DOM트리 전체 내용을 가져오는게 아닌 DOM Tree의 로드만 감지하며, 이미지나 영상의 로드 자체를 가져오지는 않음.')
    	});
</script>

 

 

 

DOMContentLoaded
DOMContentLoaded는 addEventListener의 속성으로 쓰이게 된다.

    <script>    
        window.addEventListener('DOMContentLoaded', function () {
            alert('VanilaJS의 기능 만으로 jQuery의 document.ready의 성능을 만들어 낼 수 있다. /' +
                '다만, IE8 이전 버전에서는 동작하지 않음, 뭐 지금은 해당 버전의 브라우저를 사용하는게 더 /' +
                '이상한 상황이라 크게 문제 될 부분은 아닐 것으로 판단함.');
        });
    </script>

 

 

 

비슷한 기능을 하는 이벤트 함수 처리이지만, 가장 먼저 처리되는 순으로보면 DOMContentLoaded  >  jQuery의 document.ready  >  window.onload 순으로 동작함을 알 수 있다.

 

 

여기는 document.ready를 사용

$(document).ready(function(){
  listing();
});

function listing() {
	console.log('화면 로딩 후 잘 실행되었습니다');
}

 

 

 

 

 

4. 위에서 만들어진 함수(세가지 중 함수 중에)에 API 결과값을 개발자툴에서 다시 한번 확인.

화면 로딩이 되는 시점에서 해당 API를 요청해서 결과 값을 개발자도구의 console로 가져옴.

$(document).ready(function(){
  listing();
});

function listing() {
	$.ajax({
	  type: "GET",
	  url: "http://spartacodingclub.shop/web/api/movie",
	  data: {},
	  success: function(response){
			console.log(response)
	  }
	})
}

웹페이지 로딩 후 개발자 도구의 console에 보이는 API&nbsp; 요청 결과

 

 

 

 

 

5. API 결과 값 중 영화 데이터(movies) 만 console에 찍어봄.

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/web/api/movie",
  data: {},
  success: function(response){
        console.log(response['movies'])
  }
})

 

 

 

 

6. movies를 for문으로 하나씩 출력해 봄.

$.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/web/api/movie",
  data: {},
  success: function(response){
        let movies = response['movies']
        for (let i = 0 ; i < movies.length; i++) {
            let movie = movies[i]
            console.log(movie)
        }
  }
})

 

 

 

 

7. movie 내용을 (image, comment, title, desc, star) 가지고 HTML을 만들어 붙입니다.

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/web/api/movie",
    data: {},
    success: function(response){
          let movies = response['movies']
          for (let i = 0 ; i < movies.length; i++) {
              let movie = movies[i]
              let title = movie['title']
              let desc = movie['desc']
              let image = movie['image']
              let comment = movie['comment']
              let star = movie['star']

              let temp_html = `<div class="col">
                                  <div class="card h-100">
                                      <img src="${image}"
                                           class="card-img-top">
                                      <div class="card-body">
                                          <h5 class="card-title">${title}</h5>
                                          <p class="card-text">${desc}</p>
                                          <p>${star}</p>
                                          <p class="mycomment">${comment}</p>
                                      </div>
                                  </div>
                              </div>`
              $('#cards-box').append(temp_html)
          }
    }
  })

 

 

 

 

 

8. 평점에 별을 그려서 붙여줍니다.

let star_image = ''.repeat(star) 을 사용!

$.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/web/api/movie",
    data: {},
    success: function(response){
          let movies = response['movies']
          for (let i = 0 ; i < movies.length; i++) {
              let movie = movies[i]
              let title = movie['title']
              let desc = movie['desc']
              let image = movie['image']
              let comment = movie['comment']
              let star = movie['star']

              let star_image = '⭐'.repeat(star) <!-- 별점 대신 스타마크를 -->

              let temp_html = `<div class="col">
                                  <div class="card h-100">
                                      <img src="${image}"
                                           class="card-img-top">
                                      <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)
          }
    }
  })

 

 

 

 

 

 

9. 먼저 있던 static한 카드들을 지워줍니다.

$('#cards-box').empty('');

 

 

 

 

 

 

10. 완성된 코드 전체

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타 피디아</title>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle > button {
            width: 200px;
            height: 50px;

            background-color: transparent;
            color: white;

            border-radius: 50px;
            border: 1px solid white;

            margin-top: 10px;
        }

        .mytitle > button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1200px;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;

            display: none;
        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }
        .mybtns > button {
            margin-right: 10px;
        }
    </style>
    <script>
        function open_box(){
            $('#post-box').show()
        }
        function close_box(){
            $('#post-box').hide()
        }
        // window.onload = function () {
        //     alert('이미지, 동영상 등 모든 웹페이지 전체 컨텐츠의 로딩이 완료된 후 실행됨')
        // }
        //
        // $(document).ready(function () {
        //     alert('DOM트리 전체 내용을 가져오는게 아닌 DOM Tree의 로드만 감지하며, 이미지나 영상의 로드 자체를 가져오지는 않음.')
        // });
        //
        // window.addEventListener('DOMContentLoaded', function () {
        //     alert('VanilaJS의 기능 만으로 jQuery의 document.ready의 성능을 만들어 낼 수 있다. /' +
        //         '다만, IE8 이전 버전에서는 동작하지 않음, 뭐 지금은 해당 버전의 브라우저를 사용하는게 더 /' +
        //         '이상한 상황이라 크게 문제 될 부분은 아닐 것으로 판단함.');
        // });

        // jQuery의 함수를 사용해서 문서의 로딩이 완료되면 listing() 함수를 실행하도록 함.
        // $(document).ready(function () {
        //     listing();
        // });

        // movie를 API 값을 요청해서 받아와서 전체 값을 개발자 도구의 console에 출력함.
        // function listing() {
        //     $.ajax({
        //         type: "GET",
        //         url: "http://spartacodingclub.shop/web/api/movie",
        //         data: {},
        //         success: function (response) {
        //             console.log(response)
        //         }
        //     })
        // }

        // API 결과 값 중에서 movies만 개발자 도구의 console에 출력
        // $.ajax({
        //     type: "GET",
        //     url: "http://spartacodingclub.shop/web/api/movie",
        //     data: {},
        //     success: function (response) {
        //         console.log(response['movies'])
        //     }
        // })

        // API 요청 된 결과를 for 문으로 하나씩 데이터 값을 출력함.
        // $.ajax({
        //     type: "GET",
        //     url: "http://spartacodingclub.shop/web/api/movie",
        //     data: {},
        //     success: function (response) {
        //         let movies = response['movies']
        //         for (let i = 0; i < movies.length; i++) {
        //             let movie = movies[i]
        //             console.log(movie)
        //         }
        //     }
        // })


        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/web/api/movie",
            data: {},
            success: function (response) {
                $('#cards-box').empty('');
                let movies = response['movies']
                for (let i = 0; i < movies.length; i++) {
                    let movie = movies[i]
                    let title = movie['title']
                    let desc = movie['desc']
                    let image = movie['image']
                    let comment = movie['comment']
                    let star = movie['star']

                    let star_image = '⭐'.repeat(star)

                    let temp_html = `<div class="col">
                                  <div class="card h-100">
                                      <img src="${image}"
                                           class="card-img-top">
                                      <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)
                }
            }
        })
    </script>
</head>

<body>
<div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button onclick="open_box()">영화 기록하기</button>
</div>
<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea id="comment" class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">영화 제목이 들어갑니다</h5>
                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

 

 

 

 

 

 

 

[ 03. 파이썬 시작하기 ]

 

- 프로젝트 만들기 & 파이썬 파일 실행

파일 -> new project를 클릭합니다. (맥은 pycharm - new project)

Location은 연습을 위해 임의로 만들어진 폴더아래에 pythonprac으로 잡음.

간단한 코드 동작 테스트

해당 작업 폴더에 hello.py 파일을 만들어서 아래의 코드를 넣고 실행(마우르 오른쪽키 -> '실행') 합니다.

print('Hello, sparta')

코드 실행 후 console에 나온 결과

 

 

 

 

 

 

 

 

 

[ 04. 파이썬 기초공부 ]

- 파이썬 기초 문법

 

변수 & 기본 연산

a = 3      # 3을 a에 넣는다
b = a      # a를 b에 넣는다
a = a + 1  # a+1을 다시 a에 넣는다

num1 = a*b # a*b의 값을 num1이라는 변수에 넣는다
num2 = 99 # 99의 값을 num2이라는 변수에 넣는다

# 변수의 이름은 마음대로 지을 수 있음!
# 진짜 "마음대로" 짓는 게 좋을까? var1, var2 이렇게?

자료형 - 숫자, 문자형

name = 'bob' # 변수에는 문자열이 들어갈 수도 있고,
num = 12 # 숫자가 들어갈 수도 있고,

is_number = True # True 또는 False -> "Boolean"형이 들어갈 수도 있습니다.

#########
# 그리고 List, Dictionary 도 들어갈 수도 있죠. 그게 뭔지는 아래에서!

자료형 - 리스트형 (Javascript의 배열형과 동일)

a_list = []
a_list.append(1)     # 리스트에 값을 넣는다
a_list.append([2,3]) # 리스트에 [2,3]이라는 리스트를 다시 넣는다

# a_list의 값은? [1,[2,3]]
# a_list[0]의 값은? 1
# a_list[1]의 값은? [2,3]
# a_list[1][0]의 값은? 2

자료형 - Dictionary형 (Javascript의 dictionary형과 동일)

a_dict = {}
a_dict = {'name':'bob','age':21}
a_dict['height'] = 178

# a_dict의 값은? {'name':'bob','age':21, 'height':178}
# a_dict['name']의 값은? 'bob'
# a_dict['age']의 값은? 21
# a_dict['height']의 값은? 178

자료형 - Dictionary형과 List형의 조합

people = [{'name':'bob','age':20},{'name':'carry','age':38}]

# people[0]['name']의 값은? 'bob'
# people[1]['name']의 값은? 'carry'

person = {'name':'john','age':7}
people.append(person)

# people의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
# people[2]['name']의 값은? 'john'

함수 - 함수의 정의 - 이름은 마음대로 정할 수 있지만, 의미있게.. !

# 수학문제에서
f(x) = 2*x+3
y = f(2)
y의 값은? 7

# 참고: 자바스크립트에서는
function f(x) {
	return 2*x+3
}

# 파이썬에서
def f(x):
	return 2*x+3

y = f(2)
y의 값은? 7

함수 - 함수의 응용

def sum_all(a,b,c):
	return a+b+c

def mul(a,b):
	return a*b

result = sum_all(1,2,3) + mul(10,10)

# result라는 변수의 값은?

조건문 - if / else로 구성

def oddeven(num):  # oddeven이라는 이름의 함수를 정의한다. num을 변수로 받는다.
	if num % 2 == 0: # num을 2로 나눈 나머지가 0이면
		 return True   # True (참)을 반환한다.
	else:            # 아니면,
		 return False  # False (거짓)을 반환한다.

result = oddeven(20)
# result의 값은 무엇일까요?
def is_adult(age):
	if age > 20:
		print('성인입니다')    # 조건이 참이면 성인입니다를 출력
	else:
		print('청소년이에요')  # 조건이 거짓이면 청소년이에요를 출력

is_adult(30)
# 무엇이 출력될까요?

반복문 - 리스트와 함께 쓰임.

fruits = ['사과','배','감','귤']

for fruit in fruits:
	print(fruit)

# 사과, 배, 감, 귤 하나씩 꺼내어 찍힙니다.

반복문 - 과일 갯수 세기 함수

fruits = ['사과','배','배','감','수박','귤','딸기','사과','배','수박']

count = 0
for fruit in fruits:
	if fruit == '사과':
		count += 1

print(count)

# 사과의 갯수를 세어 보여줍니다.
def count_fruits(target):
	count = 0
	for fruit in fruits:
		if fruit == target:
			count += 1
	return count

subak_count = count_fruits('수박')
print(subak_count) #수박의 갯수

gam_count = count_fruits('감')
print(gam_count) #감의 갯수

딕션너리 예제

people = [{'name': 'bob', 'age': 20}, 
          {'name': 'carry', 'age': 38},
          {'name': 'john', 'age': 7},
          {'name': 'smith', 'age': 17},
          {'name': 'ben', 'age': 27}]

# 모든 사람의 이름과 나이를 출력해봅시다.
for person in people:
    print(person['name'], person['age'])


# 이번엔, 반복문과 조건문을 응용한 함수를 만들어봅시다.
# 이름을 받으면, age를 리턴해주는 함수
def get_age(myname):
    for person in people:
        if person['name'] == myname:
            return person['age']
    return '해당하는 이름이 없습니다'


print(get_age('bob'))
print(get_age('kay'))

 

 

 

 

 

 

 

[ 05. 파이썬 패키지 설치하기 ]

- 파이썬 패키지(package) 설치하기

패키지? 라이브러리? → Python 에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위. 이런 패키지 의 묶음을 라이브러리 라고 볼 수 있음. 지금 여기서는 외부 라이브러리를 사용하기 위해서 패키지를 설치함. 즉, 여기서는 패키지 설치 = 외부 라이브러리 설치

 

 

 

 

- 가상환경(virtual environment)이란? 프로젝트별로 별도의 패키지들을 담을 곳.

가상환경(virtual environment)은 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경

 

 

 

 

- pip(python install package) 사용 - requests 패키지 설치해보기

설정의 project interpreter 화면에서 + 버튼을 누르면 아래 창이 뜸.

request package 설치전 기본적으로 설치된 패키지 목록

+ 버튼을 눌러서 이용 가능한 패키지 목록에서 아래와 같이 requests를 선택하고, 패키지 설치 버튼을 누른다.

requests 패키지를 선택해서 설치한다.

 

requests 패키지 설치 이후의 설치된 패키지 목록

 

 

 

 

 

[ 06. 패키지 사용해보기 ]

- requests 라이브러리 사용해 보기 + List/Dictionary/함수/If/For문 연습

아래의 코드로 서울시의 대기 OpenAPI에서, 중구의 미세먼지 값을 가져올 수 있음.

import requests # requests 라이브러리 설치 필요

r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()

 

 

모든 구의 IDEX_MVL 값을 찍어주기.

import requests # requests 라이브러리 설치 필요

r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus:
	print(gu['MSRSTE_NM'], gu['IDEX_MVL'])

 

 

 

 

IDEX_MVL 값이 60 미만인 구만 찍어주기.

import requests # requests 라이브러리 설치 필요

r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair')
rjson = r.json()

gus = rjson['RealtimeCityAir']['row']

for gu in gus:
	if gu['IDEX_MVL'] < 60:
		print (gu['MSRSTE_NM'], gu['IDEX_MVL'])

 

 

 

 

 

 

[ 07. 웹스크래핑(크롤링) 기초 ]

- 웹스크래핑 해보기 (영화 제목)

이번에는 네이버 영화 페이지에서 특정 정보를 스크래핑 해 볼 예정임.

https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829 

 

랭킹 : 네이버 영화

영화, 영화인, 예매, 박스오피스 랭킹 정보 제공

movie.naver.com

 

 

 

 

- 웹스크래핑을 위한 추가 python 패키지 설치 - bs4

파일 -> 설정 -> 프로젝트:pythonprac -> Python 인터프리터 선택 후 + 버튼 클릭하여 bs4 검색 및 패키지 설치 버튼 클릭해서 bs4 패키지를 venv(Virtual Environment: python 가상 환경)에 패치지를 추가한다.

bs4 패키지 설치 전
bs4 패키지 검색
설치 후 패키지 리스트

 

 

 

 

 

- select / select_one의 사용법 익혀보기

영화 제목 가져와 보기

태그 안의 텍스트를 찍고 싶을 땐 -> 태그.text

태그 안의 속성을 찍고 싶을 땐 -> 태그['속성']

import requests
from bs4 import BeautifulSoup

# URL을 읽어서 HTML를 받아오고,
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://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        # a의 text를 찍어본다.
        print (a_tag.text)

 

 

추가적인 beautifulsoup 내 select에 미리 정의된 다른 방법

# 선택자를 사용하는 방법 (copy selector)
soup.select('태그명')
soup.select('.클래스명')
soup.select('#아이디명')

soup.select('상위태그명 > 하위태그명 > 하위태그명')
soup.select('상위태그명.클래스명 > 하위태그명.클래스명')

# 태그와 속성값으로 찾는 방법
soup.select('태그명[속성="값"]')

# 한 개만 가져오고 싶은 경우
soup.select_one('위와 동일')

 

 

 

 

 

 

 

[ 08. Quiz_웹스크래핑(크롤링) 연습 ]

- Quiz_웹스크래핑(크롤링) 연습

1) 웹스크래핑 더 해보기 (순위,제목,별점 표시하기)

아래와 같이 보이면 완성!

2) 완성 코드

import requests
from bs4 import BeautifulSoup

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://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

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

#old_content > table > tbody > tr:nth-child(3) > td.title > div > a
#old_content > table > tbody > tr:nth-child(4) > td.title > div > a

movies = soup.select('#old_content > table > tbody > tr')

for movie in movies:
    a = movie.select_one('td.title > div > a')
    if a is not None:
        title = a.text
        rank = movie.select_one('td:nth-child(1) > img')['alt']
        star = movie.select_one('td.point').text
        print(rank, title, star)

 

 

 

 

 

 

 

[ 09. DB 개괄 ]

- DB의 분류

Database 분류하는 것에는 크게 두가지 종류가 있음. RDBMS와 비정형DB로 나뉘며, 관계형 데이터베이스 관리 시스템(RDBMS)의 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어를 SQL(Structured Query Language)이라고 한다. NoSQL(No-Structured Query Language, Not only SQL) 비정형(비관계형) DB를 다룰 수 있도록 설계된 체계 또는 언어로서 표현된다.

 

 

 

RDBMS(SQL)

행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사. 데이터 50만 개가 적재된 상태에서, 갑자기 중간에 열을 하나 더하기는 어려울 것이나, 정형화되어 있는 만큼, 데이터의 일관성이나 / 분석에 용이할 수 있음.

(ex, Oracle, MySQL, MariaDB, PostgreSQL, DB2, Informix, MS SQL 등) 상세 참조 : 나무위키 https://namu.wiki/w/SQL

 

 

 

 

No-SQL

딕셔너리 형태로 데이터를 저장해두는 DB. 고로 데이터 하나 하나 마다 같은 값들을 가질 필요가 없게 됨. 자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있음.

(ex. MongoDB, CouchDB) 상세 참조: 나무위키 https://namu.wiki/w/NoSQL

 

이 과정에서는 비정형DB인 mongoDB cloud 서비스인 Atlas를 사용하여 진행함.

 

 

 

 

 

 

 

 

 

[ 10. mongoDB 시작하기 ]

- mongoDB - Atlas 가입하기

 

1. 가입 및 cluster 생성하기

https://account.mongodb.com/account/register

 

Cloud: MongoDB Cloud

 

account.mongodb.com

 

 

2. 구글 계정으로 그냥 가입하기

구글 계정이 있으면 계정으로 그냥 가입하자.

 

 

3. Submin 클릭해서 가입 완료

I accept the&nbsp; Privacy Policy &nbsp;and the&nbsp; Terms of Service 체크하고 Submit 버튼 눌러서 진행.

 

 

 

4. Time Zone과 Date Format 등의 정보를 자신의 개발 및 서비스 환경에 맞춘다.

Time Zone과 Date Format을 자신의 환경에 맞추자.

 

 

 

5. 조직을 생성한다.

조직을 만들자.

 

 

 

5. 조직을 생성한다. (계속)

특별한 추가 멤버 등록이 없으면 그냥 Create Organization을 클릭해서 조직을 생성하자.

 

 

 

6. 프로젝트를 생성한다.

Project name을 입력하고 프로젝트를 생성한다.

 

 

 

 

7. Database를 배포(생성) 한다.

프로젝트 생성이 끝나면 Database를 생성한다.

 

 

 

 

8. 배포방식을 선택한다. 

여기서는 무료 버전인 Shared를 선택후 진행한다.

반드시 가장 오른족의 Shared(무료 DB)를 생성한다. 해당 리소스는 물리적으로 시스템을 공유하게 된다.

 

 

 

 

9. Shared MongoDB Cluster를 생성한다.

모든 옵션 설정이 끝나면 Create Cluster를 눌러서 mongoDB cluster를 생성한다. 여기에서는 AWS Seoul 리전에 생성한다. 아직 Azure 한국 리전에는 생성이 불가ㅠㅠ

 

 

10. MongoDB 접속을 위한 주요 DB 설정을 지정한다.

여기서는 사용자 계정과 비밀번호 방식으로 접속(djyang/보안암호생성 값 - 임의 복사 완료)

접속 환경은 내 지역 환경을 선택하고, 내 현재 IP 주소 추가 버튼을 눌러서 자신의 집 컴퓨터의 외부(통신사 공유기 외부 IP)주소를 등록한다. 1QzjTsLMJJpGauMm

 

 

 

 

11. MongoDB cluster 생성까지 마무리 된 뒤의 Database 패널을 통해 생성된 DB를 확인 할 수 있다.

 

 

 

 

 

 

 

[ 11. mongoDB 연결하기 ]

- mongoDB - Atlas 연결하기

 

 

1. pymongo, dnspython,(추가 옵션 : 본인 PC의 보안 환경에 따라 안될때, certifi) 패키지 설치해서 mongoDB를 python으로 주무르기.

pymongo, dnspython 패키지를 설치한 venv 환경

 

 

 

2. 내가 생성한 mongoDB Cluster인 Cluster0를 연결 설정한다.

클러스터 정보 화면에서 Connect를 클릭해서 아래와 같은 화면이 나오면 Connect your application을 눌러서 설정한다.

 

 

 

 

3. Python, 3.6 이후 버전으로 선택 후 나오는 connection string 정보를 복사해 놓는다.

 

 

 

 

4. 잘 연결되었는지를 테스트

from pymongo import MongoClient

# 자신의 컴퓨터의 네트워크 및 보안 설정 환경에 따라
import certifi
ca = certifi.where()

# 일반적인 경우
#client = MongoClient('mongodb+srv://djyang:Lg52080012$56@cluster0.bht8c.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)

# 자신의 컴퓨터의 네트워크 및 보안 설정 환경에 따라
client = MongoClient('mongodb+srv://djyang:Lg52080012$56@cluster0.bht8c.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

doc = {
    'name':'bob',
    'age':27
}


# users collection을 생성하고, 그곳에 doc 변수 값을 입력
db.users.insert_one(doc)

실제 Atlas상의 mongoDB cluster0에 입력된 값 확인

 

 

 

 

 

 

 

 

[ 12. pymongo로 DB 조작하기 ]

- pymongo로 mongoDB 조작하기

 

DB연결하기 & 데이터 넣기

# 'users'라는 collection에 {'name':'bobby','age':21}를 넣습니다.
db.users.insert_one({'name':'bobby','age':21})
db.users.insert_one({'name':'kay','age':27})
db.users.insert_one({'name':'john','age':30})

모든 결과 값을 보기

# 모든 데이터 뽑아보기
all_users = list(db.users.find({},{'_id':False}))

print(all_users[0])         # 0번째 결과값을 보기
print(all_users[0]['name']) # 0번째 결과값의 'name'을 보기

for user in all_users:      # 반복문을 돌며 모든 결과값을 보기
    print(user)

특정 결과 값을 뽑아 보기

user = db.users.find_one({'name':'bobby'})
print(user)

수정하기

# 오타가 많으니 이 줄을 복사해서 씁시다!
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

user = db.users.find_one({'name':'bobby'})
print(user)

삭제하기(거의 안씀)

db.users.delete_one({'name':'bobby'})

user = db.users.find_one({'name':'bobby'})
print(user)

 

 

 

 

 

- pymongo 사용법. 코드 요약

 

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

 

 

 

 

 

 

 

[ 13. 웹스크래핑 결과 저장하기 ]

- insert 연습하기 - 웹스크래핑 결과를 DB에 저장하기

아래의 기본 코드에서 시작

import requests
from bs4 import BeautifulSoup

# URL을 읽어서 HTML를 받아오고,
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://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기
        title = a_tag.text                                      # a 태그 사이의 텍스트를 가져오기
        star = movie.select_one('td.point').text                # td 태그 사이의 텍스트를 가져오기
        print(rank,title,star)

 

 

 

pymongo 기본 세팅

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.55vah.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

# URL을 읽어서 HTML를 받아오고,
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://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기
        title = a_tag.text                                      # a 태그 사이의 텍스트를 가져오기
        star = movie.select_one('td.point').text                # td 태그 사이의 텍스트를 가져오기
        print(rank,title,star)

 

 

 

 

도큐먼트 만들어서 하나씩 DB에 insert하기

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.55vah.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta

# URL을 읽어서 HTML를 받아오고,
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://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')

# movies (tr들) 의 반복문을 돌리기
for movie in movies:
    # movie 안에 a 가 있으면,
    a_tag = movie.select_one('td.title > div > a')
    if a_tag is not None:
        rank = movie.select_one('td:nth-child(1) > img')['alt'] # img 태그의 alt 속성값을 가져오기
        title = a_tag.text                                      # a 태그 사이의 텍스트를 가져오기
        star = movie.select_one('td.point').text                # td 태그 사이의 텍스트를 가져오기
        doc = {
            'rank': rank,
            'title': title,
            'star': star
        }
        db.movies.insert_one(doc)

 

 

 

 

 

 

 

[ 14. Quiz_웹스크래핑 결과 이용하기 ]

- find, update 연습하기

새로운 파일 dbmovie.py를 하나 만들어서 연습

 

 

1. 영화제목 '가버나움'의 평점을 가져오기

target_movie = db.movies.find_one({'title':'가버나움'})
print(target_movie['star'])

 

 

 

2. '가버나움'의 평점과 같은 평점의 영화 제목을 가져오기

target_movie = db.movies.find_one({'title':'가버나움'})
target_star = target_movie['star']

movies = list(db.movies.find({'star':target_star}))

for movie in movies:
    print(movie['title'])

 

 

 

 

 

3. '가버나움'의 평점을 0으로 만들기

db.movies.update_one({'title':'가버나움'},{'$set':{'star':'0'}})

 

 

 

 

 

 

[ 15. 3주차 과제 ]

- 지니뮤직의 1위 ~ 50위 곡을 스크래핑 해보기

import requests
from bs4 import BeautifulSoup
# import certifi
# from pymongo import MongoClient

# ca = certifi.where()

# client = MongoClient('mongodb+srv://djyang:xbjxTwE1lBO0mbo9@cluster0.bht8c.mongodb.net/Cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
# db = client.dbsparta #dbsparta 라는 DB 명이 없으면 생성


# URL을 읽어서 HTML를 받아오고,
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=20210701',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')

#body-content > div.newest-list > div > table > tbody > tr:nth-child(1)
#body-content > div.newest-list > div > table > tbody > tr:nth-child(2)

# select를 이용해서, tr들을 불러오기
music_chart = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

# music_chart (tr들) 의 반복문을 돌리기
for music in music_chart:
    rank = music.select_one('td.number').text[0:2].strip()
    title = music.select_one('td.info > a.title.ellipsis').text.strip()
    artist = music.select_one('td.info > a.artist.ellipsis').text
    print(rank,title,artist)

#     if a is not None:
#         # a의 text를 찍어본다.
#         title = a.text
#         rank = movie.select_one('td:nth-child(1) > img')['alt']
#         star = movie.select_one('td.point').text
#         print(rank,title,star)
#         doc = {
#              'rank': rank,
#              'title': title,
#              'star': star
#         }
#         db.movies.insert_one(doc)

 

 

 

- 코드 실행 결과

주요 이슈 : 15번째 19금 노래일 경우 특이 사항 발생.. 이후 코드 수정 해 보려고 함.