✏️ 서론
지난 시간에는 CRUD 중 Create 와 Read 요소를 사용하여 나홀로메모장을 만들어 보았다.
이번시간에는 나머지 Update와 Delete 기능을 사용한 my_favorite_moviestar을 만들어보자.
사용 될 기능은 다음과 같다.
1. 영화배우 카드 목록 보여주기(Read)
* 네이버 영화인 랭킹 URL Scraping
2. 카드 `좋아요` 기능(Update)
* ` 좋아요 ` 버튼을 누르면, 좋아요의 개수가 +1씩 올라가고, 내림차순으로 정렬
* ` 싫어요 ` 버튼을 누르면, 좋아요의 개수가 -1씩 내려가고, 내림차순으로 정렬
3. 카드 삭제하기(Delete)
* 카드에 삭제버튼을 누르면 목록에서 삭제됨.API를 설계해보자.
만들어야 하는 API는 다음과 같다.
1. 조회(Read) 기능 : 영화배우 정보 전체 조회
* init_db.py파일에서 db에 넣었기때문에 `pymongo`를 통해 `db` 내용을 불러오기만 하면 된다.
2. 좋아요, 싫어요(Update) 기능 : `Client`에서 받은 이름 `name_give`으로 찾아서 좋아요(like) 증가, 싫어요(dislike) 일때는 `like` 감소
3. 삭제(Delete) 기능 : `Client`에서 받은 이름 `name_give`으로 해당 영화인 삭제.API로직을 만들어보자.
`GET Server Logic`
1. `mystar` 목록 전체를 검색하되, like를 오름차순으로 정렬한다.
2. `result` = `success` 일때, `msg`와 `stars`목록을 `Client`에게 전달
`GET Client Logic`
1. .empty() 함수로 내부 `HTML` 태그 삭제
2. 서버에 `/api/list` 경로에 들어가 `stars`를 요청
3. 요청한 `stars`를 `stars`변수에 저장
4. for문을 돌려 변수로 저장한 `stars` 배열을 조회(.length)
5. stars[i] 값의 배열을 각 변수로 저장
6. .append 함수를 사용하여 카드 만들기`Update Server Logic` (`like, dislike` 동일하다.)
1. `Client`가 준 `name_give`를 `name_receive` 변수에 넣는다.
2. db.self_mystar.find_one으로 `name`이 `name_receive`와 일치하는 `star`를 `mystar`에서 찾는다.
3. `star`[like] + 1 값을 `new_like`에 저장한다.
4. `mystar`에서 `name`이 `name_receive`인 문서의 `like`를 {$set}을 이용하여 `new_like`로 변경한다.
`Update Client Logic` (`like, dislike` 동일하다.)
1. 서버에 `/api/like` 경로로 들어가 `name_give` 값을 전달함
2. `좋아요!` `msg alert`창을 띄운다.
* `POST` 방식이기 때문에 data:{}에 값을 넣자.
3. `window.location.reload()`를 사용하여 강제로 새로고침한다.`Delete Server Logic`
1. `Client`가 전달한 `name_give`를 `name_recieve` 변수에 넣는다.
2. `mystar`에서 `delete_one`으로 `name`: name_recieve와 일치하는 `star` 제거
3. 성공시 'msg' 반환
`Delete Client Logic`
1. 서버에 `/api/delete` 경로로 들어가 `name_give` 값을 전달함
2. `삭제완료` `msg alert`창을 띄운다.
* `POST` 방식이기 때문에 data:{}에 값을 넣자.
3. `window.location.reload()`를 사용하여 강제로 새로고침한다.✏️ 본론
먼저, 제일 중요한 API의 코드를 만들어볼텐데 조회, 수정, 삭제 순으로 진행하겠다.
GET Code
Server Code
# 기능 별로 `route`를 나눠주면 관리하기 쉬워 질 것이다.
# 조회는 `/list`, 수정은 `/like, /dislike`, 삭제는 `/delete`
@app.route('/api/list', methods=['GET'])
def show_stars():
# self_mystar에 저장되어있는 `db`값 모두를 조회하는데, `.sort` 함수를 사용하여 오름차순으로 정렬하는 코드이다.
stars = list(db.self_mystar.find({},{'_id': False}).sort('like', -1))
# 성공하면 success 메시지와 `stars db`를 띄워준다.
# 마지막 `'stars': stars` 는 빠뜨리지말고 넣어주자.
return jsonify({'result': 'success', 'stars': stars})Server: GET 메소드를 작성했는데,
여기까지 과정을 거치고 /api/list에 들어가면 다음과 같은 화면이 나온다.
성공적으로 Server GET 메소드를 작성했다.
이제 Client에 보여질 GET을 작성해보자.
💡 GET_Tips
1. onlike 함수에 변수를 사용할때는 '문자처리'를 해주자.
2. 다른 폰트를 사용하고싶으면 `fontawesome`에서 가져오자.Client Code
function showStar() {
//.empty()함수를 사용하여 새로고침할때 비워주자.
//GET 메소드일때는 `data`에 값이 들어가지 않는다.
$(`#star-box`).empty()
$.ajax({
type: 'GET',
url: '/api/list',
data: {},
success: function (response) {
if (response['result'] == 'success') {
let stars = response['stars']
for (let i = 0; i < stars.length; i++) {
let star = stars[i]
let {name, img_url, recent, like, url} = star
let tempHtml = ` <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="#"token interpolation">${name}')" class="card-footer-item has-text-info">
위로!
<span class="icon">
<i class="fas fa-thumbs-up"></i>
</span>
</a>
<a href="#"token interpolation">${name}')" class="card-footer-item has-text-info">
아래로!
<span class="icon">
<i class="fas fa-thumbs-down"></i>
</span>
</a>
<a href="#"token interpolation">${name}')" class="card-footer-item has-text-danger">
삭제
<span class="icon">
<i class="fas fa-ban"></i>
</span>
</a>
</footer>
</div>`
$(`#star-box`).append(tempHtml)
}
}
}
});
}여기까지 작성하면 Client에서 다음과 같은 화면을 볼 수 있다.
Update Code
like와 dislike기능을 구현하겠다.
Server Code
@app.route('/api/like', methods=['POST'])
def like_star():
# `Client`에서 `name_give` 값을 받아온다.
name_receive = request.form.get('name_give')
# star 목록에서 find_one으로 name이 name_receive와 일치하는 star를 찾습니다.
star = db.self_mystar.find_one({'name': name_receive})
# star의 like 에 1을 더해준 new_like 변수를 만듭니다.
new_like = star['like'] + 1
# star 목록에서 name이 name_receive인 문서의 like 를 new_like로 변경합니다.
db.self_mystar.update_one({'name': name_recieve}, {'$set':{'like': new_like}})
return jsonify({'result': 'success','msg':'like 연결되었습니다!'})Client Code
function likeStar(name){
$.ajax({
type: "POST",
url: "/api/like",
data: {'name_give': name},
success: function (response) {
if (response['result'] == 'success') {
alert('좋아요')
// 정보반영을 위한 새로고침
window.location.reload()
}
}
});
}Delete Code
Server Code
@app.route('/api/delete', methods=['POST'])
def delete_star():
name_recieve = request.form.get('name_give')
db.self_mystar.delete_one({'name': name_recieve})
return jsonify({'result': 'success','msg':'delete 연결되었습니다!'})Client Code
function deleteStar(name){
$.ajax({
type: 'POST',
url: '/api/delete',
data: {},
success: function (response) {
if (response['result'] == 'success') {
// 정보반영을 위한 새로고침
window.location.reload();
}
}
});
}결과
코드작성 결과는 다음과 같다.
[ 기본 상태 ]
[홍의정 카드를 좋아요 누를 때 ]
[홍의정 카드를 싫어요 누를 때 ]
[홍의정 카드를 삭제할 때 ]
✏️ 결론
지금까지 CRUD 기능을 사용하여 Server와Client간의 통신을 연습해봤다.
실습 후 느낀점은 웹페이지의 기능이 추가 될때마다 희열(?)을 느낀다.
어떤 기능이 필요한지 고민하면서 원리를 깨울칠때마다 내가 성장한다는 느낌이 든다.
이 예제 프로젝트를 마지막으로 나의 힘으로 프로젝트를 만들어볼까한다.
어떤 기능을 넣을지, 어떤 화면을 그릴지 한번 생각해보는 시간을 가져봐야겠다.
YW_Tech