스파르타코딩클럽 3주차 개발일지

55446 단어 html 웹 html

3주차의 처음으로 시작한 것은 2주차 때 배웠던 ajax와 jquery를 이용한 포스팅 붙이는 연습!!

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

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

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

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

        .wrap {
            margin: auto;
            width: 900px;
        }

        .comment {
            font-weight: bold;
            color: blue;
        }

        .posting-box {
            margin: 10px auto 30px auto;
            width: 500px;

            border: 3px solid black;
            border-radius: 5px;

            padding: 25px;

            display: none;
        }
    </style>
    <script>
        $(document).ready(function () {
            listing();
        });
        function listing() {
            $('#cards-box').empty()
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/post",
                data: {},
                success: function (response) {
                    let articles = response['articles']
                    for (let i = 0; i < articles.length; i++) {
                        let comment = articles[i]['comment']
                        let desc = articles[i]['desc']
                        let image = articles[i]['image']
                        let title = articles[i]['title']
                        let url = articles[i]['url']

                        let temp_html = `<div class="card">
                                            <img class="card-img-top"
                                                src="${image}"
                                                alt="Card image cap">
                                            <div class="card-body">
                                                <a href="${url}" class="card-title">${title}</a>
                                                <p class="card-text">${desc}</p>
                                                <p class="card-text comment">${comment}</p>
                                            </div>
                                        </div>`
                        $('#cards-box').append(temp_html)
                    }
                }
            })
        }

        function openclose() {
            let status = $('#post-box').css('display');
            if (status == 'block') {
                $('#post-box').hide()
                $('#posting-box-btn').text('포스팅박스 열기')
            } else {
                $('#post-box').show()
                $('#posting-box-btn').text('포스팅박스 닫기')
            }
        }
    </script>
</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">나홀로 링크 메모장!</h1>
            <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
            <hr class="my-4">
            <p class="lead">
                <a id="posting-box-btn" onclick="openclose()" class="btn btn-primary btn-lg" href="#"
                    role="button">포스팅박스 열기</a>
            </p>
        </div>
        <div class="posting-box" id="post-box">
            <div class="form-group">
                <label >아티클 URL</label>
                <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp" placeholder="">
            </div>
            <div class="form-group">
                <label >간단 코멘트</label>
                <input type="password" class="form-control" placeholder="">
            </div>
            <button type="submit" class="btn btn-primary">기사 저장</button>
        </div>
        <div class="card-columns" id="cards-box">
            <div class="card">
                <img class="card-img-top"
                    src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
                    alt="Card image cap">
                <div class="card-body">
                    <a href="http://naver.com" class="card-title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                    src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
                    alt="Card image cap">
                <div class="card-body">
                    <a href="http://naver.com" class="card-title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                    src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
                    alt="Card image cap">
                <div class="card-body">
                    <a href="http://naver.com" class="card-title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                    src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
                    alt="Card image cap">
                <div class="card-body">
                    <a href="http://naver.com" class="card-title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                    src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
                    alt="Card image cap">
                <div class="card-body">
                    <a href="http://naver.com" class="card-title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

( 1~2주차 때 했었던 부분에서 script 부분만 추가했기 때문에 script 부분만 보면 된다. 참조해주셨던 api를 통해서 만들었다.)
< 참조한 API >

● 느낀점 : 확실히 2~3번 반복해서 학습을 한 상태라 어렵지 않게 코딩할 수 있었다. 그로인해 자신감도 생기고 재미도 붙게 되었다. 나중에는 저절로 ajax랑 jquery 코드가 외워졌다....

이어서 서버를 만들기 위해서 파이썬 기본개념을 배우기 시작했다.
-> 파이썬은 유튜브로 강의를 들은 적이 있어서 확실히 이해하기는 편했다.
세번째로는 크롤링(스크랩)을 배웠다.

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.nhn?sel=pnt&date=20200303',headers=headers)

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

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

for tr in trs:
    a_tag = tr.select_one('td.title > div > a')
    if a_tag is not None:
        img = tr.select_one('img')['alt']
        title = a_tag.text
        star = tr.select_one('td.point').text
        print(img, title, star)

_requests로 링크를 집어넣어 코드를 뽑아오고 bs4에 있는 beautifulsoup으로 내가 가져오고 싶은 부분을 파이썬 언어로 솎아내는 것을 배웠다.

● 느낀점 : 강의 선생님 말대로 이번 강의는 시간가는 줄 모르고 너무 재미있었다. 하지만 2~3번 보고나서 모르는 것이 보충되서 더욱 더 재미있었던 것 같았다.

네번째로는 mongodb(NoSQL)를 이용하여 내가 보관하고 싶은 데이터를 넣고(insert), 최신화하고(update), 지우고(delete), 찾는(find)것을 배웠다. mongodb도 request와 bs4와 같이 install을 해야하고 기본형식코드가 존재한다. 그리고 mongodb로는 시각화가 되지않기 때문에 robo3t로 확인해야한다.

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

# insert / find / update / delete

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

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

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

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

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

데이터를 보관하는 것이 굉장히 어려운 일인 줄 알았지만 의외로 간단해서 너무 당황스러웠다... 하지만 이것을 응용한다고 했을 때 과연 잘할 수 있을지 ㅎㅎ..

이제 3번째 때 배운 크롤링한 것을 배운 mongodb를 활용하여 데이터를 보관하고 robo3t로 확인하는 것을 배웠다.

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

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.nhn?sel=pnt&date=20200303',headers=headers)

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

#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(2) > td:nth-child(1) > img
#old_content > table > tbody > tr:nth-child(2) > td.title > div > a

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

for tr in trs:
        a_tag = tr.select_one("td.title > div > a")
        if a_tag is not None:
            title = a_tag.text
            rank = tr.select_one("td:nth-child(1) > img")['alt']
            star = tr.select_one("td.point").text
            doc = {
                'rank':rank,
                'title':title,
                'star':star
            }
            db.movies.insert_one(doc)

크롤링 했던 것에 doc라는 변수에 딕셔너리를 집어넣어 mongodb에 insert 하는거라 어렵지않게 했다.
< 중간중간 퀴즈도 풀었지만 너무 간단해서 생략! >
※ 한걸음더, 숫자데이터를 넣을 때 문자열 형식과 숫자 형식을 구분해서 넣어야 한다.

마지막으로 3주차 숙제!!!! 지니뮤직 사이트에서 순위, 노래제목, 가수이름 가져오기!!

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://www.genie.co.kr/chart/top200?ditc=D&ymd=20200403&hh=23&rtm=N&pg=1',headers=headers)

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

trs = soup.select('#body-content > div.newest-list > div > table > tbody > tr')

for tr in trs:
    number = tr.select_one('td.number').text.replace('\n', '')[:2]
    name = tr.select_one('a.artist.ellipsis').text
    m_name = tr.select_one('a.title.ellipsis').text.replace(' ', '').replace('\n', '')
    print(number, m_name, name)

강사님께서는 strip을 이용해서 해보라고 하셨지만 strip으로도 해보고 replace라는 것도 있어서 사용해보았다. strip으로 했을 때 조금 더 간결하게 해결할 수 있었지만 replace를 사용했을 때 쪼끔 더 깔끔해보여서 선택하게 되었다. ㅎㅎ..

● 느낀점 : 3주차는 비교적으로 1~2주차 보다는 수월할 수 있었지만 금방 잊어버릴 수도 있을 것 같다는 생각이 들었다. 결국 반복해서 내 것으로 만드는 것이 정답이라는 생각이 들었다.

Author And Source

이 문제에 관하여(스파르타코딩클럽 3주차 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gywls1474/스파르타코딩클럽-3주차-개발일지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[자바스크립트 ES6+ 기본] 10. Number 오브젝트

React 설치

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다