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 전달하기
-
유저가 입력한 url, comment 값을 변수에 저장
let url = $('#post-url').val();
let comment = $('#post-comment').val();
-
ajax data 설정
data: {url_give: url, comment_give: comment},
-
성공하면 페이지 새로고침
window.location.reload();
- 클라이언트가 보낸 정보를 서버가 받기
-
저장할 변수명 = request.form[받을 변수명]
form
은 클라이언트에서 서버로 정보를 전달하는 가방 역할
클라이언트에서 설정한 변수를 받아서 저장 -
보내준 url로 메타 태그 image, title, description 크롤링
- 크롤링한 정보를 DB에 저장하기
- article 딕셔너리 형태로 만들기
article = {"url":url_receive, "title":url_title, "desc":url_desc, "image":url_image, "comment":comment_receive}
- 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
Author And Source
이 문제에 관하여(TIL - 20.10.27 (링크메모장)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@syeeuns/TIL-20.10.27-링크메모장저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)