1. [무비스타] - 프로젝트 세팅
새로운 파일을 만들고 그 안에 app.py와 static, templates를 만들고 templates 안에 index.html을 만든다.
그리고 pymongo와 flask를 설치해 api를 만들 준비를 하고 bs4와 requests를 설치해 크롤링을 할 준비를 한다.
또한 미리 DB를 만들기 위해 사이트에서 크롤링한다.
import requests
from bs4 import BeautifulSoup
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
# DB에 저장할 영화인들의 출처 url을 가져옵니다.
def get_urls():
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('https://movie.naver.com/movie/sdb/rank/rpeople.nhn', headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
trs = soup.select('#old_content > table > tbody > tr')
urls = []
for tr in trs:
a = tr.select_one('td.title > a')
if a is not None:
base_url = 'https://movie.naver.com/'
url = base_url + a['href']
urls.append(url)
return urls
# 출처 url로부터 영화인들의 사진, 이름, 최근작 정보를 가져오고 mystar 콜렉션에 저장합니다.
def insert_star(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')
name = soup.select_one('#content > div.article > div.mv_info_area > div.mv_info.character > h3 > a').text
img_url = soup.select_one('#content > div.article > div.mv_info_area > div.poster > img')['src']
recent_work = soup.select_one(
'#content > div.article > div.mv_info_area > div.mv_info.character > dl > dd > a:nth-child(1)').text
doc = {
'name': name,
'img_url': img_url,
'recent': recent_work,
'url': url,
'like': 0
}
db.mystar.insert_one(doc)
print('완료!', name)
# 기존 mystar 콜렉션을 삭제하고, 출처 url들을 가져온 후, 크롤링하여 DB에 저장합니다.
def insert_all():
db.mystar.drop() # mystar 콜렉션을 모두 지워줍니다.
urls = get_urls()
for url in urls:
insert_star(url)
### 실행하기
insert_all()코드를 간단하게 살펴보면 함수 get_urls에서 각 영화인들의 세부정보가 담겨있는 url을 가져온 다음 공통적으로 들어가는 주소 뒤에 붙여서 한 번에 들어갈 수 있는 url을 만든다. 그 후 insert_star함수를 이용해 크롤링하는데 이때 크롤링의 주소를 앞서 get_urls로 얻었던 url을 받아 크롤링한다. 그리고 나서 크롤링한 데이터들을 DB에 저장한다.
이렇게 세팅을 하고 우리가 만들 웹페이지의 모습을 살펴보자
전과는 다르게 좋아요와 삭제가 있다. 우리는 좋아요의 개수에 따라 나열하게 만들 것이다. 즉, 많으면 상단에 있고 적으면 아래에 자동으로 배치되게 할 것이다. 그리고 카드에서 라이크와 삭제 기능도 넣어 직접 라이크와 삭제를 작동할 수 있게 만들 것이다.
그래서 이번에는 이것들을 중점으로 배운다.
2. [무비스타] - GET연습(보여주기)
이번에도 역시 순서는 동일하게 진행할 것이다.
1) 클라이언트 서버 연결 확인하기
2) 서버부터 만들기
3) 클라이언트 만들기
4) 완성 확인하기
1) 클라이언트 서버 연결 확인하기
서버 코드
# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
sample_receive = request.args.get('sample_give')
print(sample_receive)
return jsonify({'msg': 'list 연결되었습니다!'})sample_give를 sample_receive에 받아 return으로 jsonify를 반환하고 있다.
클라이언트 코드
$(document).ready(function () {
showStar();
});
function showStar() {
$.ajax({
type: 'GET',
url: '/api/list?sample_give=샘플데이터',
data: {},
success: function (response) {
alert(response['msg']);
}
});
}먼저 .ready로 showStar가 웹페이지가 로딩이 되면 자동으로 요청하게 되어있는 것을 확인할 수 있다.
showStar함수는 ajax를 이용하여 GET방식으로 data를 보내고 다시 받아서 알림창으로 msg의 값을 띄워준다.
2) 서버부터 만들기
우리가 서버에서 처음해야 할 일은 DB의 데이터를 가져오는 일이다. 그렇기 위해서는 GET방식을 이용해서 불러와 클라이언트로 데이터를 넘겨주어야 한다. 그래서 find를 이용해 찾아와 넘겨준다.
# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
movie_star = list(db.mystar.find({},{'_id':False}))
return jsonify({'movie_stars': movie_star})
그런데 문제점이 하나 있다. 우리가 이번에 만들 것은 기존의 페이지와 다르게 like를 역순으로 나열하게 만들 것이다.
이것을 해결할 수 있는 방법은 pymongo에서 찾을 수 있다. pymongo에 정렬을 해서 뽑는 기능이 있기 때문이다.
이것을 구글링해서 찾아보면 이런 글을 찾을 수 있다.
https://www.w3schools.com/python/python_mongodb_sort.asp
Python MongoDB Sort
Python MongoDB Sort Sort the Result Use the sort() method to sort the result in ascending or descending order. The sort() method takes one parameter for "fieldname" and one parameter for "direction" (ascending is the default direction). Example Sort the re
www.w3schools.com
sort()의 양식에 맞춰 오름차순은 1, 내림차순은 -1로 나타내서 정렬할 수 있다.
우리는 like를 이용해서 할 것임으로 find 뒤에 .sort('like', -1)를 붙여준다.
# API 역할을 하는 부분
@app.route('/api/list', methods=['GET'])
def show_stars():
movie_star = list(db.mystar.find({},{'_id':False})).sort('like', -1)
return jsonify({'movie_stars': movie_star})
3) 클라이언트 만들기
서버에서 받아온 response가 제대로 왔는지 확인하기 위해 mystars에 response의 movie_star를 저장하고 console.log에 출력하면 다음과 같이 나온다.
제대로 받아온 것을 확인했으니 for문으로 하나씩 분리한 다음 temp_html에 데이터를 집어넣을 양식을 가져와 그 안에 데이터를 집어넣는다.
그 후 $('#id이름').append(temp_html)을 입력해 카드를 추가하는 코드를 작성한다.
function showStar() {
$.ajax({
type: 'GET',
url: '/api/list?sample_give=샘플데이터',
data: {},
success: function (response) {
let mystars = response['movie_stars']
for (let i = 0; i < mystars.length; i++){
let name = mystars[i]['name']
let img_url = mystars[i]['img_url']
let recent = mystars[i]['recent']
let url = mystars[i]['url']
let like = mystars[i]['like']
let temp_html = `
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="${img_url}"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
<p class="subtitle is-6">${recent}</p>
</div>
</div>
</div>
<footer class="card-footer">
<a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">
위로!
<span class="icon">
<i class="fas fa-thumbs-up"></i>
</span>
</a>
<a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger">
삭제
<span class="icon">
<i class="fas fa-ban"></i>
</span>
</a>
</footer>
</div>
`
$('#star-box').append(temp_html)
}
}
});
}카드 코드가 길어서 어려워보이지만 전에 했던 작업과 같기 때문에 어렵지 않았다.
4) 완성 확인하기
크롤링한 것들이 제대로 카드 안에 들어가 완성된 것을 확인할 수 있다. 그리고 첫번재 김다미는 양식으로 넣어준 것임으로 지우면 된다.
그리고 like가 역순으로 잘 나오는지 확인해야 한다. 그래서 Robo 3T를 켜서 DB에서 직접 수정을 가한다. 바꾸고자 하는 데이터에 마우스 오른쪽 클릭하여 Edit Document를 눌러 like를 수정하여 1로 바꾼다. 그 뒤 웹페이지에서 순위가 바뀌었는지 확인한다.
코드가 제대로 적용된 것을 확인할 수 있다.
3. [무비스타] - POST연습(좋아요 기능 만들기)
이번에 우리가 만들 것은 좋아요를 추가할 수 있는 기능이다.
이것을 가능하게 하려면 클라이언트에서 받은 이름으로 찾아서 좋아요를 증가시키는 방식으로 코드가 작동해야 한다.
순서는 저번과 동일하게 진행될 것이다.
1) 클라이언트 서버 연결 확인하기
2) 서버부터 만들기
3) 클라이언트 만들기
4) 완성 확인하기
1) 클라이언트 서버 연결 확인하기
* 서버 코드 확인하기
@app.route('/api/like', methods=['POST'])
def like_star():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'like 연결되었습니다!'})/api/like로 받는 것을 확인할 수 있고 POST방식으로 진행되는 것을 알 수 있다. 클라이언트에서 받으면 response로 jsonify를 return하여 'like 연결되었습니다!'라고 메세지가 나가고 있다.
* 클라이언트 코드
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {sample_give:'샘플데이터'},
success: function (response) {
alert(response['msg']);
}
});
}likeStar함수는 카드섹션에서 위로라는 버튼을 누를 때 작동한다. 그래서 웹페이지에서 '위로!'를 누르니 잘 연결되었다고 메세지가 떴다.
2) 서버부터 만들기
위로!가 작동하려면 서버에서 이름을 받아야 한다.
그 후 받은 이름으로 DB에서 찾은 다음 like를 가져온다. 그리고 나서 1을 더한 수로 이 사람의 like를 변경한다.
@app.route('/api/like', methods=['POST'])
def like_star():
name_receive = request.form['name_give']
target_star = db.mystar.find_one({'name': name_receive})
current_like = target_star['like']
new_like = current_like + 1
db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})
return jsonify({'msg': '좋아요 완료!'})
3) 클라이언트 만들기
클라이언트에서는 이름 데이터를 주기만 하면 된다. 그리고 이것이 웹페이지에 오자마자 반영되어야 하기 때문에 window.location.reload()을 추가한다.
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {name_give: name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
4) 완성 확인하기
제대로 작동하는 것을 확인할 수 있다.
4. [무비스타] - POST연습(삭제하기)
삭제 기능을 구현하려면 클라이언트에서 받은 이름으로 영화인을 찾고, 해당 영화인을 삭제한다.
1) 클라이언트 서버 연결 확인하기
2) 서버부터 만들기
3) 클라이언트 만들기
4) 완성 확인하기
1) 클라이언트 서버 연결 확인하기
*서버 코드
@app.route('/api/delete', methods=['POST'])
def delete_star():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'delete 연결되었습니다!'})* 클라이언트 코드
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {sample_give:'샘플데이터'},
success: function (response) {
alert(response['msg']);
}
});
}이것들이 잘 연결되었다면 삭제를 누르면 메세지가 뜰 것이다.
연결이 되었다는 것을 확인하였다.
2) 서버부터 만들기
서버는 이름을 받아야 한다. 그리고 받은 이름으로 삭제를 구현하기 위해 delete를 사용한다.
@app.route('/api/delete', methods=['POST'])
def delete_star():
name_receive = request.form['name_give']
db.mystar.delete_one({'name':name_receive })
return jsonify({'msg': '삭제 완료!'})
3) 클라이언트 만들기
클라이언트에서는 이름을 넘겨주면 된다.
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give: name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}
4) 완성 확인하기
플로렌스 퓨를 삭제해보겠다.
삭제된 것을 확인할 수 있다.
5. 내 프로젝트를 서버에 올리고 구매하기
기본적으로 어떤 컴퓨터도 서버가 될 수 있다.
서버의 역할은 클라이언트가 요청을 하면 그릴 것(html,css,js)을 주거나 뒤에서 Ajax를 요청하면 데이터를 주는 등 뭔가를 주고, 클라이언트의 요청을 받는 것이 서버의 역할이다.
요청을 언제나 응답하려면,
1. 컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,
2. 모두가 접근할 수 있는 공개 IP 주소로 나의 웹 서비스에 접근할 수 있도록 해야한다.
이렇게 보면 보안에 취약해 보여서 우리가 가지고 있는 컴퓨터로 하면 안될 것 같은 느낌이 든다.
그래서 통상적으로 모든 서비스는 개인의 컴퓨터에 서버의 역할을 시키지 않고 클라우드 환경, 인터넷 환경에 있는 컴퓨터를 사서 올려두고 사람들이 그쪽으로 접속하도록 하게 한다.
최근에는 클라우드 서버를 사서 거기에 코드를 올려두고 사람들이 그쪽으로 접속하게 만든다.
AWS로 들어가서 Ubuntu Server 18.04LTS(HVM)을 선택한다.
그리고 위의 그림처럼 인스턴스 유형을 같은 것으로 선택하면 된다.
그럼 이런 창이 뜰텐데 우리에게는 기존 키 페어가 없기 때문에 새 키를 만들고 키 페어 이름을 설정하고 인스턴스 시작을 누른다.
그러면 이렇게 실행되고 있는 것을 볼 수 있다.
AWS는 1년 동안 무료이기 때문에 1년이 지나면 돈이 나간다. 그래서 인스턴스 종료를 누르면 서버를 반납하면서 돈을 지불하지 않아도 된다. 그러니 1년 전에 인스턴스 종료를 누르도록 하자
그런 다음 git bash를 킨다.
$ ssh -i (서버에서 산 키) ubuntu@퍼블릭 IPv4 주소
이렇게 git bash에 입력한다. 그러면 우리가 산 컴퓨터를 원격조작 할 수 있다.
다만 마우스로 하는 것이 아니라 명령어로 진행한다. 그래서 몇 가지 명령어를 배울 것이다.
mkdir sparta: sparta라는 폴더를 만들라는 명령어다. mkdir이 making directory의 약자다
ls: 내 위치에서 무슨 폴더가 있는지 확인하는 명령어다. 우리는 sparta를 만들었음으로 sparta가 있다고 나온다.
cd sparta/: sparta 폴더로 들어가주라는 의미다. 그러면 경로에 sparta가 추가된다.
cd.. : sparta 폴더에서 나가고 싶을 때 사용한다. 이 위치에서 벗어나고 싶다면 이 명령어를 사용한다.
6. 서버세팅하기
그러면 우리가 산 컴퓨터를 한 번 세팅해보자.
filezilla를 사용할 건데 이것의 역할은 파일을 올려주는 업로드, 다운로드를 해주는 프로그램이다.
이것을 이용해 세팅을 진행한다.
newsite를 눌러 mysites 안에 새로운 것을 만든 다음 오른쪽 세팅을 진행한다. sftp로 바꾸고 host는 우리가 AWS에서 구매했던 퍼블릭 IPv4 주소를 입력하고 포트틑 22에 user은 ubuntu를 넣고 key file에는 우리가 AWS에서 서버를 만들고 받았던 키파일을 여기에 넣어주고 OK를 누르면 된다.
그러면 이렇게 바뀌게 된다.
이제 테스트로 파이썬 파일 하나 업로드 해볼 것이다. 바탕화면에 파이썬 파일을 저장시키고 다시 filezilla로 돌아온다.
왼쪽은 내 컴퓨터이고 오른쪽은 서버의 컴퓨터이다. 내 컴퓨터에 있는 test.py를 서버의 컴퓨터에 있는 폴더 sparta에 업로드 해볼 것이다. 방법은 간단하다. sparta 폴더에 들어가 왼쪽에 있는 test.py를 드래그해서 옮기면 전송이 완료된다.
이것이 제대로 들어왔는지 확인하고 싶다면 git bash에서 sparta 폴더로 들어가 ls를 누르면 test.py가 뜰 것이다.
그리고 이 파일을 실행시키고 싶다면 python3 test.py라고 입력하면 실행된다. 그러면 안에 있는 hello sparta!!가 출력된다. python3을 쓰는 이유는 python3버전을 쓰고 있기 때문이다.
그리고 서버의 컴퓨터에서도 작업을 하려면 mongo DB 등을 깔아야 하는데 회사에서는 그것을 담당하는 분들이 계서서 하지만 우리는 직접해야한다. 그래서 따로 제공된 파일을 이용해서 세팅한다.
그리고 서버의 파이썬 안에 flask와 pymongo를 설치애햐 하는데 pip install flask, pip install pymongo를 입력해 설치한다. 이때 pip는 파이썬 패키지를 쉽게 깔아주는 라이브러리다.
이렇게 하면 세팅이 완료된다.
이후 퍼블릭 IPv4 주소를 웹페이지에 입력하고 그 뒤에 :5000을 적으면 서버의 컴퓨터로 들어갈 수 있다. 그러나 지금은 들어갈 수가 없는데 AWS자체 방화벽에 막혔기 때문이다.
이것을 풀어주는 작업을 해야 한다.
AWS로 들어가 우리가 산 서버를 누르고 보안으로 들어가 보안 그룹을 누른다. 그리고 인바운드 규칙 편집을 누른다.
들어가서 포트 범위에서 5000, 80, 27017(몽고 DB)를 넣고 위치 무관(anywhere ip4)를 누르고 변경을 누르면 된다.
그리고 나서 다시 주소를 입력하면 제대로 된 페이지가 뜬다.
그러면 이제 서버를 끄는 법을 알아보자.
git bash에서 CTRL + C를 누르면 끌 수 있다.
다시 키고 싶다면 ls로 어떤 파일이 있는지 확인 후 app.py를 실행시키려면 python app.py를 입력하면 서버에서 작동한다.
7. 만든 작품 업로드 해보기
그러기 위해서 Robo 3T를 내가 만든 서버에 DB를 접속해야 한다.
그래서 새로 만든 다음 address를 AWS의 주소로 바꾸고 Authentication에서 윗부분의 체크박스를 체크하고 User Name과 Password를 입력하고 save를 눌러 만든다.(남들이 데이터 조작하는 것을 막기 위해 id, 비번을 만들어 놓았다)
이렇게 하면 내 컴퓨터에서 Robo 3T를 이용해 내가 만든 서버에 DB에 접속을 해놓았다.
그리고 app.py에서 코드를 다음과 같이 바꾼다.
client = MongoClient('mongodb://text:text@localhost', 27017)
# client = MongoClient('localhost', 27017)
db = client.dbhomework주석처리 한 것이 원래 있던 코드였는데 지금은 위의 코드로 바꾸었다. ???:???는 아이디와 비번을 나타낸다. 이 글에서는 바꿔주었다.
그런 다음 filezilla를 이용해 서버로 app.py와 templates, static을 옮긴다. 이후 git bash로 가서 ls를 입력해서 제대로 있는지 확인후 python app.py를 치면 서버가 열린다.
그럼 퍼블릭 IPv4 주소:5000을 해서 들어가보면 우리가 전에 만들었던 페이지가 뜨는 것을 볼 수 있다.
만약 git bash에서 서버를 끊다면 당연히 이렇게 뜨지 않는다.
이런 문제의 해결은 다음 챕터에서 진행하겠다.
8. 포트포워딩
포트는 일종의 항구와 같다. 즉 들어갈 수 있는 통로와 같은 것이다. 그래서 포트 번호에 따라 만나는 것이 다르다. 5000이면 우리가 만든 결과물을 만나고 27017로 가면 몽고DB와 만나게 되는 것이다.
그래서 우리가 전에 포트들을 만들어 두었다. 그중 80을 만들어두었는데 80포트는 http의 기본 포트이다. 그래서 굳이 80을 붙이지 않아도 된다.
그러면 우리가 할 일은 80포트로 들어오는 요청을 5000과 연결(이걸 포워딩이라 한다)시켜주면 '/번호'를 붙이지 않아도 된다.
이런 방법이 있다는 것만 알고 넘어가겠다.
9. nohup 설정하기
git bash로 우리가 사놓은 서버에 접속한 후 app.py가 있는 폴더까지 접근하고 다음의 코드를 입력한다.
nohup python app.py &
이렇게 입력하면 git bash를 닫아도 서버가 여전히 작동한다.
그러면 서버를 끄고 싶다면 어떻게 해야 할까?
ps -df | grep 'app.py'
코드를 입력하면 다음과 같이 나오는데 우리는 여기서 7026과 7036을 강제로 종료시킴으로써 끌 것이다.
강제 종료 방법은 이렇게 입력한다.
kill -9 숫자
이렇게 7026과 7036을 강제로 종료시키면 더 이상 서버가 돌아가지 않는다.
이런 것을 사용는 상황은 서버를 끄고 수정한 다음 다시 킬 때 사용한다.
10. 도메인 구입하기
우리가 앞서 구매한 도메인을 이용해 연결할 것이다.
웹을 넘어 클라우드로. 가비아
그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브
www.gabia.com
여기서 구입한 도메인을 활용할 것이다. DNS관리로 들어가서 레코드 수정을 누르고 다음과 같이 입력한다.
값/위치의 숫자는 퍼블릭 IPv4 주소이다.
이렇게 하면 우리가 구입한 도메인과 퍼블릭 IPv4 주소가 연결된다.
11. og태그
사진처럼 제목과 설명, 이미지가 나오도록 설정하는 것이 og태그이다.
우리가 만든 사이트도 이렇게 공유할 때 저목, 설명, 이미지가 나오도록 og태그를 입력해줄 것이다.
title 태그 밑에 og 태그를 입력하자.
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />이렇게 입력해주고 나서 이것을 다시 서버에 올려주어야 한다. 순서는 다음과 같다.
먼저 돌아가고 있는 서버를 꺼주어야 하기 때문에 ps -ef | grep 'app.py'를 입력한다.
그리고 kill -9 숫자로 다 꺼준 다음 filezilla로 기존의 파일을 없애고 수정한 파일들을 넣어준다.
그리고 난 뒤 다시 서버를 키는 코드인 nohup python app.py를 입력하고 주소를 새로고침 하면 완성이다.
이후 주소를 복사해서 카톡으로 보내면 다음과 같은 결과가 나온다.
애플 공홈 클론 페이지
iPhone 12 팝니다
mintgameover6.shop
사이트는 8월까지 유지할 것 같다. 이게 1년이 지나면 돈을 내야하는거라 잊기 전에 끝내려고 한다.
* 5주차 후기
프로젝트를 서버에 올리고 모든 사람에게 공유하기까지의 과정이 쉽지 않다는 것을 알게 된 것 같다.
서버를 다루는 만큼 복잡할 것이라고 생각은 했지만 cmd와 생소한 프로그램들을 사용하다보니 어렵게 느껴졌다. 그래도 백엔드에서 무슨 일을 하는지 배운 것은 내가 앞으로 코딩을 하는데에 있어 큰 도움이 될 것이라 생각한다.
한 번에 이 모든 것을 이해하긴 힘들다. 그래서 다시보며 복습하는 과정이 필요할 것으로 생각한다.