내일배움단 11일메이킹챌린지 4일차

4일차 ( [나혼자메모장]세팅 ~ 완성 / 프로젝트 4일차 )

[ 4일차 ] 세부 레이아웃 수정 & 필터 기능

• 사이트 이름 : GAMEOVER

대략적인 모습 :

• 수정사항

  1) 상단의 홈페이지 이름 텍스트 삭제
  2) 검색창 위치 중간쯤으로 변경
  3) 상세페이지에 홈 아이콘 추가

다음 회의까지 Filter Elements 코드 사용하여 카테고리 기능 구현해보기!

[1][나홀로메모장] API 설계

• POST

  1) Url & Comment 데이터 받아오기
  2) 받아온 Url을 통해 Title, img, Desc에 들어갈 meta 태그 스크래핑 하기
  3) 모든 정보를 mongoDB에 저장하기
  4) 성공하면 alert 하기

• GET

  1) mongoDB에서 메모장 데이터 리스트 전부 가져오기
  2) HTML에서 데이터를 받아 for과 append를 통해 해당 리스트가 표시되어야 할 부분에 들어갈 수 있도록 하기

[2] meta 태그 스크래핑

• meta 태그 : 외부에 보여지는 사이트의 속성을 설명하는 태그

  ex) 카톡으로 링크 공유했을 때 보여지는 이미지, 짧은 설명, 타이틀.
  구글링을 할때 보여지는 설명, 이미지, 타이틀.

크롤링 기본 코드와 meta 태그 스크래핑 예시 코드

# 크롤링 기본 코드
import requests
from bs4 import BeautifulSoup

url = '#사이트링크#'

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)

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

# meta tag 스크래핑
## 원하는 부분 스크래핑 후,
og_image = soup.select_one('meta[property="og:image"]') og_title = soup.select_one('meta[property="og:title"]') og_description = soup.select_one('meta[property="og:description"]')

## 원하는 데이터를 추출하기
url_image = og_image['content'] url_title = og_title['content'] url_description = og_description['content']

[3][ 나홀로메모장 ] POST 연습

• 서버 코드 - app.py

@app.route('/memo', methods=['POST'])
def saving():
   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'}
   data = requests.get(url_receive, headers=headers) 

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

# meta 태그에서 스크래핑
   title = soup.select_one('meta[property="og:title"]')['content']
   image = soup.select_one('meta[property="og:image"]')['content']
   desc = soup.select_one('meta[property="og:description"]')['content']

# 스크래핑 해온 데이터와 클라이언트에서 받아온 데이터들을
  데이터 베이스에 저장
   doc = {
      'title':title,
      'image':image,
      'desc':desc,
      'url':url_receive,
      'comment':comment_receive
   }

   db.articles.insert_one(doc)

# 성공하면 메세지 반환
   return jsonify({'msg':'저장이 완료되었습니다!'})

• 클라이언트 코드 - index.html

function postArticle() {
   let url = $('#post-url').val()
   let comment = $('#post-comment').val()

   $.ajax({
      type: "POST",
      url: "/memo",
      data: {url_give:url, comment_give:comment},
      success: function (response) {
      # 성공하면 반환 받은 msg를 alert
               alert(response["msg"]);
               window.location.reload() } }) }

결과 :

[4][ 나홀로메모장 ] GET 연습

• 서버 코드 - app.py

@app.route('/memo', methods=['GET'])
def listing():
# 데이터베이스에서 데이터를 리스트로 만들어서
   articles = list(db.articles.find({}, {'_id': False}))
# 클라이언트에게 전달
   return jsonify({'all_articles':articles})

• 클라이언트 코드 - index.html

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

                           let temp_html =
                            `<div class="card">
                                  <img class="card-img-top"
                                        src="${image}"
                                        alt="Card image cap">
                                  <div class="card-body">
                                        <a target="_blank" 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) } } }) }

결과 :

강의를 듣고 난후_

원래는 숙제까지 다 끝내려고 했는데 시간이 부족해서 매우 힘들었다.
내가 손이 느려서 그런지도 모르겠다.
일단 어제 했던 프로젝트 카드 섹션 부분은 카드 한줄에 3개 짜리로 하게 되어서, 밑에는 Pagination을 넣는 쪽으로 하게 되었다.
그리고 오늘은 Filter Elements로 카테고리 기능을 구현해야 되는데 일단 문제는 코드가 너무 어렵다…
일단 오늘은 코드를 가지고 이것저것 해봐야겠다.