TIL - 20.10.27 (링크메모장)

링크와 코멘트를 적으면 해당 링크의 meta 태그 안에 이미지, 제목, 내용을 스크래핑해서 db에 저장하고,
카드 형태로 보여주는 메모장 만들기

---

📖 구조 만들기

📌 파일

flask 사용하니까 프로젝트 폴더안에 static, templates 폴더 생성, 프로젝트 폴더에 app.py

• static : css, JS, img 등의 기타 파일들
• templates : html

📌 $(document).ready(function(){})

$(function(){}) 으로 줄여서 사용 가능
웹 브라우저 켜고, 웹 문서 읽은 다음 DOM 생성될 때 실행됨
요소들 로드되면 load 메소드 실행됨

📖 API 만들기

📌 포스팅 API

서버
@app.route('/memo', methods=['POST'])
클라이언트
$.ajax({ type: 'POST', url: "/memo",....
둘이 짝꿍

• 클라이언트가 서버에 url, comment 전달하기

1. 유저가 입력한 url, comment 값을 변수에 저장
   let url = $('#post-url').val();
let comment = $('#post-comment').val();

2. ajax data 설정
   data: {url_give: url, comment_give: comment},

3. 성공하면 페이지 새로고침
   window.location.reload();
   
   

• 클라이언트가 보낸 정보를 서버가 받기

1. 저장할 변수명 = request.form[받을 변수명]
form은 클라이언트에서 서버로 정보를 전달하는 가방 역할
   클라이언트에서 설정한 변수를 받아서 저장

2. 보내준 url로 메타 태그 image, title, description 크롤링
   
   

• 크롤링한 정보를 DB에 저장하기

1. article 딕셔너리 형태로 만들기

article = {"url":url_receive, "title":url_title, "desc":url_desc, "image":url_image, "comment":comment_receive}

2. MongoDB에 저장

📌 불러오기 API

서버
@app.route('/memo', methods=['GET'])
클라이언트
$.ajax({ type: 'GET', url: "/memo",....
둘이 짝꿍

• 서버 : DB에서 객체 데려오기
  list(db.articles.find({},{'_id':0}))
  url, title, image, description, comment 전부 데려옴
  DB에서 자동으로 만들어준 _id는 빼고 데려오기
  (속성 : 0 해주면 걔는 빼고 데려옴)
  불러온 정보를 객체로 만들어서 전달

• 클라이언트 : 서버에서 전달받은 객체를 카드 만드는 함수에 전달

let articles = response['articles'];
for(let i=0; i<articles.length; i++){
	makeCard(articles[i]["url"], articles[i]["title"],
           articles[i]["image"], articles[i]["desc"],
           articles[i]["comment"])
	}

response['articles']로 받아서 for문으로 하나씩 makeCard함수에 넣어주기

• 카드 만들기 함수
  card 만드는 html을 템플릿 리터럴로 변수에 저장해서 append