Flask에 관하여
자바에서는 Spring framework , 파이썬에서는 django, 자바스크립트에서는 express와 같이 대표적인 언어별 프레임워크가 있는 것을 이미 알고계실 것입니다. Flask 또한 파이썬 기반의 웹프레임워크 중 하나입니다.
여기서 프레임워크란 라이브러리들의 뭉텅이로 이해하면 편하고, 웹개발을 빠르게 할 수 있도록 틀을 갖추어 놓은 것으로 알면됩니다.
백엔드에 관련해서는 정말 공부할게 많고 어려운 것도 많은데 우선 이번에는 데이터를 데이터베이스에서 꺼내주고 저장하는
Flask 시작하기
- 👉 Flask 라이브러리 설치(pip install flask)
- 기본 폴더 생성
- templates 파일에(front, 클라이언트를 위한 것임) index.html을 추가하여 서버와 클라이언트가 연결됐는지 확인
<index.html>👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
<script>
function hey(){
alert('안녕!')
}
</script>
</head>
<body>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>- 이제 프론트 창은 마련했으니 서버쪽에서 이어주면 됩니다. 그 방법으로 url을 구분하여 페이지를 지정해주면 되는데, 여기선 기본적으로 이어진 것만 확인하는 것이니 아래 코드와 같이 해도 무방합니다.
from flask import Flask, render_template
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됩니다.
@app.route('/') # localhost:5000 url 구조의 가장 기본으로 home 과 같은 페이지 역할
def home():
return render_template('index.html')
#render_template 메소드로 위에서 지정한 index.html 파일을 / 루트 경로로 보내서 열어 볼 수 있음
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)Flask 적용
프로젝트로 만든 '나만의 영화 리스트'를 예로 들어 Flask를 적용시켜보겠습니다.
먼저 클라이언트 입장에서 어느 UI를 조작해서 어떤 기능을 낼 것인지를 기획하겠습니다.
👀 기획
위의 화면에서 영화기록하기 버튼을 누르면 jQuery show()함수에 의해 빨간 화살표처럼 박스가 나옵니다.
그럼 '영화 url 등록사이트가기'를 눌러서 네이버 영화 페이지로 이동 후, 영화를 검색 후 url을 복사해옵니다.
url을 붙여놓고 별점과 코멘트를 달아주면 알아서 아래와 같이 이미지, 영화제목, 짧은 설명이 추가로 기입됩니다.
결과👇
이를 구현하기 위해 크롤링 기술과 접목을 해야했고, 개발자 도구 참조는 다음 사진과 같이 영화 정보를 담고 있는 meta 태그를 스크래핑 했습니다.
네이버 영화에서 스크래핑한 meta 태그👇
그럼 이 크롤링된 결과들이 mongoDB에 저장되고 클라이언트에게 주는 정보는 그 데이터를 추출해서 보여주는 방식으로 마무리 될 것입니다.
👀 코드설명
클라이언트에게 보여주는 코드와 서버쪽 코드를 작성했으나 양이 다 올리기엔 지저분하게 많아서 따로 링크를 걸겠습니다. 여기에서는 부분부분만 보겠습니다.
GitHub 페이지👇
클라이언트에게 보여줄 front page 전체 코드보기
서버에서 다루는 back 전체 코드보기
- 크롤링할 영화 url을 사용자로 부터 입력받아 서버로 넘겨줌
(url변수에 해당)
- 크롤링할 영화 url을 사용자로 부터 입력받아 서버로 넘겨줌
<!--index.html 파일-->
function posting() {
let url=$('#url').val()
let star=$('#star').val()
let comment=$('#comment').val()
$.ajax({
type: 'POST',
url: '/movie',
data: {url_give:url, star_give: star, comment_give:comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}-
- 넘어간 url을 통해 meta 태그로 영화제목, 설명, 포스터 이미지 크롤링하기
@app.route('/movie', methods=["POST"]) def movie_POST(): url_receive = request.form['url_give'] star_receive = request.form['star_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 = url_receive #받아온 url 사용! data = requests.get(url, headers=headers) #requests로 url페이지 내 정보 받아옴 soup = BeautifulSoup(data.text, 'html.parser') #받아온 정보를 html로 파싱 title = soup.select_one("meta[property='og:title']")['content'] image = soup.select_one("meta[property='og:image']")['content'] description = soup.select_one("meta[property='og:description']")['content']
- 크롤링한 정보를 데이터베이스에 저장
#위의 코드와 이어지는 부분입니다.
doc = {
'url':url_receive,
'star': star_receive,
'comment': comment_receive,
'title': title,
'image': image,
'description': description
}
db.movie_posting.insert_one(doc)
# print(url, star_receive, comment_receive + '||' + title, image, description)
return jsonify({'msg':'영화가 등록 완료되었습니다.'}) #json 형식으로 클라이언트에게 정보 줌- Get 정보로 클라이언트에게 다시 정보 쏴주기
@app.route('/movie', methods=["GET"])
def movie_GET():
movie_list=list(db.movie_posting.find({},{'_id': False}))
return jsonify({'movies':movie_list})
-
- moives변수 가지고 반복문 돌려서 내가 원하는 정보 추출 및 조회기능 실시
$(document).ready(function () { listing(); }); function listing() { $('#cards-box').empty() $.ajax({ type: 'GET', url: '/movie', data: {}, success: function (response) { let movies = response['movies'] for(let i =0; i<movies.length; i++){ let image=movies[i]['image'] let title=movies[i]['title'] let description=movies[i]['description'] let star="⭐".repeat(movies[i]['star']) let comment=movies[i]['comment'] let temp_html=`<div class="col"> <div class="card h-100"> <img src="${image}" class="card-img-top"> <div class="card-body"> <h5 class="card-title">${title}</h5> <p class="card-text">${description}</p> <p>${star}</p> <p class="mycomment">${comment}</p> </div> </div> </div>` $('#cards-box').append(temp_html) } } }) }
이렇게 한 결과가 위에 있던 사진입니다. 사실 Flask에 대해 굉장히 가볍게 배웠지만 분명 이것보다 더욱 다채롭게 쓸 수 있는 프레임워크 일 것입니다..jpg)