[11.01] 내일배움캠프[Spring] TIL-2
1. 미니 팀 프로젝트 진행
- 어제까지의 진행 상황
👉 각 회원에 맞는 사진과 이름, 간단한 소개를 Card형식으로 띄웠다.
- 오늘 해야할 것
1) 회원 Card를 클릭 했을 때 상세정보를 보여준다.
2) 회원 별 창에서 댓글을 남길 수 있게 한다.
3) 회원 마다 남긴 댓글을 볼 수 있게 한다.
4) 모든 작업은 한 페이지에서 비동기 통신으로 진행한다.
- 진행 된 코드( index.html )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
rel="stylesheet">
<style>
* {
font-family: 'Noto Serif KR', serif;
}
.member_content {
display: flex;
flex-direction: row
}
.top_content {
width: 100%;
height: 400px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://coresos-phinf.pstatic.net/a/30hbb6/0_cf7Ud018svcavwo8ineb9ww_oya09y.jpg?type=cover_a640');
background-position: center;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.profile {
display: flex;
flex-direction: row;
margin: 30px auto 0px auto;
width: 95%;
max-width: 900px;
border-radius: 30px;
}
.visitor {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
display: none;
}
.visitor > button {
width: 200px;
height: 50px;
background-color: transparent;
border-radius: 50px;
border: 1px solid;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 300px;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 3px 0px black;
padding: 20px;
display: none;
}
.mypost > button {
margin-top: 15px;
}
.col-md-4 > img {
width: 800px;
height: 400px;
}
</style>
<script>
//각 회원 프로필 넘어가는 부분
$(document).ready(function () {
show_members();
});
function show_members() {
$('#mypost').hide()
alert('조회')
$.ajax({
type: "GET",
url: "/home",
data: {},
success: function (response) {
let rows = response['members']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let comment = rows[i]['comment']
let img = rows[i]['img']
let temp_html = `<div class="col">
<div class="card h-100"token interpolation">${name}')">
<img src="${img}" class="card-img-top" alt="..." width="300px" height="300px">
<div class="card-body">
<h5 class="card-title">${name}</h5>
<p class="card-text">${comment}</p>
</div>
</div>
</div>`
$('#members').append(temp_html)
}
}
});
}
function member_post(name) {
$.ajax({
type: "POST",
url: '/one-post',
data: {'name_give': name},
success: function (response) {
$('#members').empty()
$('#member_detail').empty()
$('#card').empty()
let rows = response['member']
let name = rows['name']
let comment = rows['comment']
let img = rows['img']
let detail = rows['detail']
let temp_html = `<div class="col-md-4">
<img src="${img}" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${name}</h5>
<p class="card-text">${detail}</p>
<p class="card-text"><small class="text-muted">${comment}</small></p>
</div>
</div>`
$('#member_detail').append(temp_html)
$('#mypost').show()
$('#hidden_name_val').attr('value', name)
$('#visitor').show()
let rows_bang = response['members_bang_list']
for (let i = 0; i < rows_bang.length; i++) {
let nick_name = rows_bang[i]['nick_name']
let comment = rows_bang[i]['comment']
let temp_html = `<div class="card-body">
<blockquote class="blockquote mb-0">
<p>${comment}</p>
<footer class="blockquote-footer">${nick_name}<cite title="Source Title"></cite></footer>
</blockquote>`
$('#card').append(temp_html)
}
}
});
}
function save_comment() {
let name = $('#hidden_name_val').val()
let comment = $('#comment').val()
let nick_name = $('#nick_name').val()
alert(name)
$.ajax({
type: 'POST',
url: '/homework',
data: {
'name_give': name,
'comment_give': comment,
'nick_name_give': nick_name
},
success: function (response) {
alert(response['msg'])
member_post(name)
}
})
}
function open_box() {
$('#post-box').show()
}
function close_box() {
$('#post-box').hide()
}
</script>
</head>
<body>
<div class="top_content">
<h1>6789땡</h1>
<img src="../static/Group2.png">
</div>
<div class="profile" id="profile2">
<div class="row row-cols-1 row-cols-md-3 g-4" id="members">
</div>
</div>
<div class="member_content">
<div class="card mb-3" style="max-width: 1000px;">
<div class="row g-0" id="member_detail">
</div>
</div>
<div class="col-md-6">
<div class="visitor" id="visitor">
<button onclick="open_box()">방명록 남기기</button>
</div>
<div class="mypost" id="post-box">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="nick_name" placeholder="url">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<input id="hidden_name_val" type="hidden" value="">
<button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
</div>
<div class="card" id="card">
</div>
</body>
</html>
- app.py
from flask import Flask, render_template, request, jsonify, redirect, url_for
from pymongo import MongoClient
app = Flask(__name__)
client = MongoClient('mongodb+srv://test:sparta@cluster0.cygiufq.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta
@app.route('/')
def home():
return render_template('index.html')
@app.route("/home", methods=["GET"])
def members_get():
member_list = list(db.members.find({},{'_id':False}))
return jsonify({'members': member_list})
@app.route("/one-post", methods=["POST"])
def one_post():
name_receive = request.form['name_give']
member = db.members.find_one({'name': name_receive}, {'_id': False})
members_bang_list = list(db.members_bang.find({'name': name_receive}, {'_id': False}))
print(members_bang_list)
# return redirect(url_for('one_get', name = name_receive))
return jsonify({'member': member,
'members_bang_list': members_bang_list
})
@app.route("/homework", methods=["POST"])
def save_comment():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
nick_name_receive = request.form['nick_name_give']
doc = {
'name': name_receive,
'comment': comment_receive,
'nick_name':nick_name_receive
}
db.members_bang.insert_one(doc)
return jsonify({'msg':'저장 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
- 오늘까지의 결과물
2. 결과물에 대한 정리
👉 회원별로 이름을 통해 데이터를 가져와서 뿌려준다.
👉 방명록을 남길 때도 똑같이 이름을 통해 각 회원별 방명록을 가지고 있다.
👉 위 작업을 위해서 방명록 DB필드를 하나 더 생성했다.
👉 전체 방명록은 members_bang에 있지만 이름으로 필터링 find하여
회원별 방명록을 가져올 수 있게한다.
members_bang_list = list(db.members_bang.find({'name': name_receive}, {'_id': False}))3. 진행 애로사항과 해결
1) 회원별 방명록을 가져올 때 이름 값을 사용하는데 한 페이지에서 모두 동작하다 보니 이미 name을 js -> app.py에서 사용해서 다시 같은 값을 가져오기가 힘들었다.
<input id="hidden_name_val" type="hidden" value="">$('#hidden_name_val').attr('value', name)let name = $('#hidden_name_val').val()👉 hidden으로 감춘 input tag에 val값을 넣어 보이지는 않지만 사용할 수 있게 구상하고 작성했다.
2) 하나의 페이지에서 작업을 하다보니 멤버들의 상세 정보를 불러오는 부분에서 방명록의 DB또한 같이 return 해줘야 했던 점.
@app.route("/one-post", methods=["POST"])
def one_post():
name_receive = request.form['name_give']
member = db.members.find_one({'name': name_receive}, {'_id': False})
members_bang_list = list(db.members_bang.find({'name': name_receive}, {'_id': False}))
print(members_bang_list)
# return redirect(url_for('one_get', name = name_receive))
return jsonify({'member': member,
'members_bang_list': members_bang_list
})👉 return시 json 타입으로 두개의 이름을 가진 다른 데이터를 보내주었다.
let rows = response['member']
let rows_bang = response['members_bang_list']👉 위와 같은 형식으로 접근을 다르게 하여 다른 데이터를 가져와 작업했다.
4. 느낀점⭐
1) 생각하는 힘이 필요하다.
2) 조금 더 효율적인 방안이 있을 것 같다.
3) 원래는 members에 방명록을 Array형식으로 저장하려고 했지만 잘 되지 않아 members_bang필드를 새로 만든 부분은 조금 아쉽다.
기록하는 습관