복습일지 04

아,, 스파르톤 끝나서 그냥 자러갈뻔;;

 

복습일지 마무리하고 자러감.. 일단.. 복습일지 1차 목표였던 나홀로메모장 0부터 구성하기는 성공했다!!!

 

작성순서는 서버의 post > 클라이언트의 post > 서버의 get > 클라이언트의 get 

 

단순한 단계인데 작성하고 에러잡고 제대로 실행되는데만 2시간이나 걸렸다구;;

아무튼 app 파일부터 작성을 시작했다.

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
#client 뒤에 오는 큰 경로안에 db가 저장된다구~
db = client.dbpractice

 기본적인 뼈대는 가지고 있지만, db파일 위치를 변경하고 싶어서 client 뒤에 다른 경로를 입력했다.

 

post 부분은 망설임 없이 작성!

## API 역할을 하는 부분
@app.route('/memo', methods=['POST'])
def saving():
    #input 박스로 받는 부분 url을 받아서 크롤링이 필요합니다!
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']

    #헤더 복사해서 넣고!
    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'}
    #데이터 넣고!(url 수정필수!)
    data = requests.get(url_receive, headers=headers)
    #soup 호출까지!
    soup = BeautifulSoup(data.text, 'html.parser')

    #url 에서 가져와야 하는 것 -> 제목, 이미지, 설명
    #meta에 있는 정보들이다. meta og는 대부분 같은 형식이니 그대로 쓰면 될 듯 하다.
    #<meta property="og:url" content="https://movie.naver.com/movie/bi/mi/basic.naver?code=171539">
    #태그와 속성값으로 찾는 방법 soup.select('태그명[속성="값"]')과 ['content(속성)'] 항목이 필요하다
    title_receive = soup.select_one('meta[property="og:title"]')['content']
    img_receive = soup.select_one('meta[property="og:image"]')['content']
    desc_receive = soup.select_one('meta[property="og:description"]')['content']

    #다 찾았으면 doc에 넣어주자!
    doc = {
        'img':img_receive,
        'title':title_receive,
        'desc':desc_receive,
        'url':url_receive,
        'comment':comment_receive
    }

    db.memolist.insert_one(doc)

    return jsonify({'msg':'포스팅이 완료되었습니다.'})

했지만 주석이 많은 이유는 혼자 작성하다 다 틀려먹었기 때문이다.

진자 외않되 였음 글자 다 틀려먹은게 내 app 파일같아서 ^^:;

 

유의해야 했던 점은 이 app는 url을 input 박스로 받아서 해당 url을 이용해 크롤링을 한다는 점이다.

soup의 배치를 보면 대충 아하 싶겠지, 하지만 혼자선 못해먹는게 현실이고,,, 더 연습해야 할 뿐이고,,

 

['content']로 속성까지 싹싹 긁어오는 것도 잊으면 안된다. 계속 에러가 나서 너무 슬펐는데 아주 곳곳이 문제였다.

function posting() {
            let url = $(`#article_input`).val()
            let comment = $(`#comment_input`).val()

                $.ajax({
                    type: "POST",
                    url: "/memo",
                    data: {url_give:url,comment_give:comment},
                    success: function (response) {
                        console.log(url,comment)
                        alert(response["msg"]);
                        window.location.reload();
                    }
                })
            }

클라이언트는 크게 문제가 없었다. 하지만 계속 에러가 났지.. 그래서 ajax를 전부 지우고 처음부터 다시 적었더니 갑자기 에러가 사라졌다. 읭? 연습도 되고 오히려 좋은 걸로;;

 

여기 해결됐을때가 5시 좀 넘었을 무렵이었던 것 같은데 일단 너무 행복했다.

기쁨의 스샷

 

계속해서 GET을 진행하는데, 하나라도 조용히 넘어가면 내가 아닌가보다^^ 또 다 틀려먹어서 처음부터 다시 뜯어고쳤다...

 

그래도 솔직히 서버 get은 틀리지도 않고 뚝딱 잘 써냈다.

@app.route('/memo', methods=['GET'])
def listing():
    movie = list(db.memolist.find({}, {'_id': False}))
    return jsonify({'movie_list': movie})

function showpost() {
                $.ajax({
                    type: "GET",
                    url: "/memo",
                    data: {},
                    success: function (response) {
                        let movies = response['movie_list']
                        for (i=0; i<movies.length; i++){
                            let title = movies[i]['title']
                            let image = movies[i]['img']
                            let url = movies[i]['url']
                            let desc = movies[i]['desc']
                            let comment = movies[i]['comment']

                            let temp_html = `<div class="card">
                                                 <img src="${image}"/>
                                                 <div class="card-text">
                                                     <a href="${url}">${title}</a>
                                                     <p>${desc}</p>
                                                     <p class="text_color">${comment}</p>
                                                 </div>
                                             </div>`

                            $(`#card_box`).append(temp_html)
                        }
                    }
                })
            }

클라이언트 쪽은 컨닝은 조금 했지만 어떻게 돌아가는지 알고있다구!

근데 이상하게 계속 작동이 안되서 30분 정도 멘붕에 빠져있었다. 좀 있음 스파르톤 끝나는데;;? 왜..?

 

잠시 고민을 하다 나름 금방(?) 해결할 수 있었다.

 

나는 .. get을 사용한 함수를 호출하지 않았다... 몽초이..

 

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

 

호출까지 해서 깔쌈하게 완료! 진짜...잊지말자... 정수리 깨버리고싶다 정말...

 

 

정상적으로 작동중인 페이지!

 

복습일지 1차 목표는 이렇데 완료하였다!

 

다음 목표는.. 책리뷰인가? 그거 따라 그려봐야겠다.