오늘은 post작업이 거의 끝나고 상세페이지를 만들고, 팀원분들 하시는걸 조금 숟가락 얹었다.
백엔드 쪽을 하다가 상세페이지 프론트를 만들려고하니, 너무 어려웠다...(백엔드가 더 쉬워...)
그래도 상세페이지 틀은 잡아두고, 댓글기능을 삭제빼곤 완성했다.
오늘 완성한 기능
이제 팀원분들 기능이랑 연결만 하면 기능은 어느정도 태가 날것같다!!
오늘 새로 배운 것은 MongoDB의 ObjectID형태인 _id값을 이용해 특정 오브젝트를 특정해서 변경하는 것이었다.
편리하게 MongoDB는 저장할 때 _id값을 따로 지정해주지 않는 이상 랜덤한 해쉬값을 준다고 한다.
위와같이 숫자마다 의미를 가지는데,
- 첫 4byte는 timestamp값을 의미한다.이 값은 Unix시대부터 초단위로 측정된 값이다.
- 다음 5bye 랜덤으로 생성된 값이다.
- 다음 3byte는 증가하는 값이며, 최초값이 랜덤이다.
이런 규칙이 있다는데 아직은 잘 모르겠다. 그냥 오지게 랜덤이라 안 겹친다는 뜻이 아닐까?
_id
_id는 불편하게도 ObjectID라는 형태로 저장되어 있어 그냥 꺼내 쓸려고 코드를 짰다가는 에러를 만나기 십상이다.
위 사진처럼 문자열으로 가져올 때 하나하나 형변환을 해주어 String값으로 가져온다.
html코드로 써 넣을 땐 문자열값으로 사용한 뒤
DB에서 찾을 때는 다시 ObjectID형으로 변환해줘야한다.
ObjectID()를 사용하려면 상단에 ObjectID를 import 해줘야한다.
이렇게다.
그리고 GET요청으로 DB에서 받아와서 댓글을 쭉 출력하는 기능도 만들었다.
이건 웹개발 종합반에서 배운것과 크게 다르지 않다고 생각했는데, 나중에 메인페이지에서 넘어오는 부분을 팀원분이 완성하시면, id값을 받아와서 댓글등록할 때 DB에 같이 넘겨주는 기능이 필요하다.
그렇게 해야지 어떤 사람 상세정보에 댓글이 달렸는지 찾아서 출력이 가능하다.
내일은 GET부분을 조금 더 확인해보고, id값을 넘겨와서 댓글과 호환시키는 작업을 해야겠다. 또 내가 예상하지 못한 오류를 만나겠지...
아래는 코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TestPage</title>
<style>
.text-box{
display: block;
font-size: 20px;
width: 255px;
height: 30px;
margin-top: 20px;
margin-bottom: 20px;
border: solid 1px gray;
}
textarea{
resize: none;
/* textarea 크기가 변경되는걸 고정시켜주는 코드입니다. */
}
</style>
<script>
function newTab(){
// localStorage.setItem('comment',id);
window.open('detail',"_blank");
}
function posting(){
//이름을 id값으로 찾아 밸류를 저장
let name = $('#name').val();
//이미지url을 id값으로 찾아 밸류를 저장
let img_url = $('#img_url').val();
//소개1을 id값으로 찾아 밸류를 저장
let introduce_1 = $('#introduce_1').val();
//소개2를 id값으로 찾아 밸류를 저장
let introduce_2 = $('#introduce_2').val();
let formData = new FormData();
//위 찾은 데이터들을 모두 formData에 append
formData.append("name_give", name);
formData.append("img_url_give",img_url);
formData.append("introduce_1_give",introduce_1);
formData.append("introduce_2_give",introduce_2);
//서버로 넘겨준다.
fetch('/introduce/detail/new', {method: "POST", body: formData
}).then((res) => res.json()).then((data) =>{
alert(data['msg']) //완료시 alert로 메세지 출력
window.location.reload();//화면 새로고침 코드
})
}
</script>
</head>
<body>
<h1 >테스트용 Main 페이지 입니다.</h1>
<div>
<div onclick="newTab()" style="cursor: pointer; background-color: green; border-radius: 50%;width: 150px;height: 150px;"></div>
</div>
<div>
<h2>팀원 추가</h2>
<input id="name" class="text-box" type="text" placeholder="이름">
<input id="img_url" class="text-box" type="text" placeholder="이미지url">
<textarea id="introduce_1" placeholder="팀원소개 1" id="comment" cols="30" rows="10"></textarea>
<textarea id="introduce_2" placeholder="팀원소개 2" id="comment" cols="30" rows="10"></textarea>
<button onclick="posting()" style="display: block;">팀원추가</button>
</div>
<!-- 이름, 코멘트, 사진이미지 -->
</body>
</html>
detatil.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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>Lucky Sparta</title>
<style>
.wrap {
display: flex;
flex: auto;
border: solid 2px black;
}
.body {
color: #333;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
}
.header {
/* background-color: red; */
width: auto;
height: 150px;
display: flex;
justify-content: space-between;
align-items: top;
margin: 0px auto auto auto;
}
.teamname {
/* background-color: blue; */
margin: 20px auto auto 1%;
font-size: 40px;
overflow-y: hidden;
color: goldenrod;
}
/* 댓글 페이지의 코멘트 박스 */
.text-box {
display: block;
font-size: 20px;
width: 100%;
height: 30px;
margin-top: 10px;
margin-bottom: 10px;
border: solid 1px gray;
}
textarea {
resize: none;
/* textarea 크기가 변경되는걸 고정시켜주는 코드입니다. */
}
#comment-box {
height: 100px;
}
/* 좌측 반을 차지하는 div 사진 이름 */
.left {
align-items: center;
width: 50%;
height: 100%;
margin: 0 0 auto 0;
display: flex;
flex-direction: column;
background-color: transparent;
justify-content: center;
}
/* 우측 반을 차지하는 div 팀원소개+댓글 */
.right {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
margin: auto;
background-color: lightgrey;
justify-content: center;
}
/* 이미지가 들어가는 div */
.image-box {
width: 400px;
height: 400px;
margin-top: 40px;
border: solid 10px skyblue;
background-image: url('https://pbs.twimg.com/media/Esq5WzJUUAIp1ZS?format=jpg&name=medium');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
h2 {
margin-top: 20px;
}
/* 홈으로 버튼 */
.back-btn {
width: 300px;
height: 50px;
margin-top: 50px;
margin-bottom: 30px;
}
/* 홈으로버튼 마우스 오버시 */
.back-btn:hover {
background-color: lightgray;
}
/* 댓글박스 전체를 감싸고있는 CSS입니다 */
.comment-list {
text-align: right;
display: flex;
flex-direction: column;
margin: 10px 10px 0 10px;
}
/* 댓글 박스 div하나하나에 적용되는 CSS입니다 */
.comment {
color: black;
background-color: transparent;
border: solid 1px black;
margin-right: 20px;
}
/* 수정과 삭제버튼 CSS입니다. */
.UDBtn {
margin-right: 10px;
margin-top: 5px;
}
/* 댓글 수정 팝업 CSS입니다. */
.modify_popup {
width: 400px;
height: 500px;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 3px;
margin: auto;
position: fixed;
text-align: center;
z-index: 10;
background-color: white;
border: solid 2px black;
visibility: hidden;
}
/* 댓글 수정 팝업의 뒷 배경 CSS입니다 */
.popup-back {
visibility: hidden;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
opacity: 0.5;
z-index: 9;
}
</style>
<script>
$(document).ready(function () {
//페이지 로딩과 동시에 실행되는 자리 입니다 show_comment함수를 실행합니다.
show_comment();
});
// 위 ready 함수에서 실행되어 페이지 시작시 실행되는 댓글을 가져오는 함수 입니다.
function show_comment() {
fetch("/introduce/detail").then(res => res.json()).then(data => {
let rows = data['result']
$('#comment-list').empty()
rows.forEach((a) => {
let nickname = a['nickname']
let comment = a['comment']
let _id = a['_id']
//temp_html로 댓글을 하나씩 html코드로 붙입니다.
let temp_html = `<div id =${_id} class="comment">
<p style="font-size: 20px; font-weight: bold;"><button onclick="modify_popup('${_id}')" class="UDBtn">수정</button><button class="UDBtn">삭제</button>${nickname}</p>
<h6>${comment}</h6>
</div>`
$('#comment-list').append(temp_html)
})
})
}
// 댓글등록 함수입니다.
function comment_posting() {
//입력한 댓글을 id값으로 찾아 밸류를 저장
let comment = $('#comment-box').val();
//입력한 닉네임을 id 값으로 찾아 밸류를 저장
let nickname = $('#nickname').val();
let formData = new FormData();
//가져온 댓글과 닉네임을 formData에 추가
formData.append("comment_give", comment);
formData.append("nickname_give", nickname);
//추가한 댓글과 닉네임을 넘겨준다.
//어떤 멤버의 댓글인지 확인 할 수 있게 나중에 html틀이 잡히면 상세페이지에서
//멤버의 이름의 value값을 받아올 수 있도록 수정해야할 것 같음.
fetch('/introduce/comment', {
method: "POST", body: formData
}).then((res) => res.json()).then((data) => {
alert(data['msg'])
window.location.reload();
})
}
// 댓글 업데이트 함수입니다.
function updating_comment() {
let nickname2 = $('#nickname_modify').val();
//닉네임을 id값으로 찾아 밸류를 저장
let comment2 = $('#comment-box_modify').val();
if (localStorage.getItem('id')) {
_id = localStorage.getItem('id')
}
//댓글을 id값으로 찾아 밸류를 저장
let id = _id;
let formData = new FormData();
//위 찾은 데이터들을 모두 formData에 append
formData.append("nickname2_update3", nickname2);
formData.append("comment2_update3", comment2);
formData.append("_id_update3", id);
//서버로 넘겨준다.
fetch('/update/comment', {
method: "PUT", body: formData
}).then((res) => res.json()).then((data) => {
alert(data['msg']) //완료시 alert로 메세지 출력
window.location.reload();//화면 새로고침 코드
})
}
// 수정하는 팝업이 열리는 함수 입니다. id를 받아와서 localStorage에 저장합니다.
function modify_popup(_id) {
document.getElementById("modify_popup").style.visibility = "visible"
document.getElementById("popup-back").style.visibility = "visible"
localStorage.setItem('id', _id);
}
// 팝업이 닫히는 코드입니다.
function modify_popup_cls() {
document.getElementById("modify_popup").style.visibility = "hidden"
document.getElementById("popup-back").style.visibility = "hidden"
}
</script>
</head>
<body>
<!-- 배너부분입니다 -->
<div class="header">
<pre class="teamname">
Lucky
Sparta
</pre>
<img src="data:image/png;base64,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"
alt="스파르타">
</div>
<!-- 여기까지 배너부분 -->
<div class="wrap">
<!-- 여긴 팀원 사진과 이름이 들어가는 좌측 페이지 입니다. -->
<div class="left">
<div class="image-box"></div>
<div style="text-align: center;">
<h2>팀원 이름</h2>
<p style="font-size: 20px;">블로그 주소 : </p>
<button class="back-btn">홈으로 이동</button>
</div>
</div>
<!-- 여기까지 좌측페이지 -->
<!-- 여기부터 우측 팀원소개+댓글등록 html -->
<div class="right">
<h2>팀원소개</h2>
<textarea name="introduce" id="introducd_1" cols="30" rows="7"></textarea>
<h2>팀원소개2</h2>
<textarea name="introduce" id="introducd_2" cols="30" rows="7"></textarea>
<div>
<h2>댓글</h2>
<input id="nickname" class="text-box" type="text" placeholder="닉네임">
<textarea id="comment-box" placeholder="내용을 입력해주세요." id="comment" cols="30" rows="10"></textarea>
<button onclick="comment_posting()" style="display: block;">댓글등록</button>
</div>
</div>
<!-- 여기까지 detail 우측페이지 -->
</div>
<div id="comment-list" class="comment-list">
<!-- 여긴 코멘트들이 들어갑니다 GET요청! -->
</div>
<div onmousedown="modify_popup_cls()" id="popup-back" class="popup-back"></div>
<!-- 이 밑은 수정 팝업 html입니다! -->
<div id="modify_popup" class="modify_popup">
<h2>댓글 수정</h2>
<input id="nickname_modify" class="text-box" type="text" placeholder="수정할 닉네임">
<textarea id="comment-box_modify" placeholder="수정할 내용을 입력해주세요." id="comment" cols="30" rows="10"></textarea>
<button onclick="updating_comment()" style="display: block;">댓글 수정</button>
<button onclick="modify_popup_cls()" style="display: block;">닫기</button>
</div>
<!-- 여기까지 수정팝업 -->
</body>
</html>
app.py
ObjectID 사용하실려면 import 해줘야합니다.
from bson import ObjectId
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
import certifi
ca = certifi.where()
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.ehc0xum.mongodb.net/?retryWrites=true&w=majority' ,tlsCAFile = ca)
db = client.dbsparta
import logging #python에서 콜솔로그를 찍기위한 import라고한다.
import requests
from bs4 import BeautifulSoup
@app.route('/')
def home():
return render_template('index.html')
#detail페이지이동
@app.route('/detail')
def detail():
return render_template('detail.html')
#댓글 닉네임 등록
@app.route('/introduce/comment', methods=["POST"])
def comment_post():
nickname_receive = request.form['nickname_give']
#입력한 nickname 가져와서 저장
comment_receive = request.form['comment_give']
#입력한 코멘트 가져와서 저장
doc = {
'comment' : comment_receive,
'nickname' : nickname_receive
}
#dictionary형태로 저장
db.luckey_comment.insert_one(doc)
return jsonify({'msg' : '댓글 등록 완료!'})#성공시 메세지출력
#댓글 수정
@app.route('/update/comment', methods=["PUT"])
def update_comment():
#닉네임 받아오기
nickname2 = request.form['nickname2_update3']
#댓글 받아오기
comment2 = request.form['comment2_update3']
#id 받아오기
_id_receive = request.form['_id_update3']
_id = ObjectId(_id_receive)
#id가 string값이므로 다시한번 ObjectID로 바꿔주는 코드
db.luckey_comment.update_many({'_id':_id}, {'$set' : {'nickname' : nickname2,
'comment' : comment2}}, upsert=True)
return jsonify({'msg' : '댓글 수정 완료!'})
#댓글 가져오기
@app.route("/introduce/detail", methods=["GET"])
def comment_get():
all_comment = list(db.luckey_comment.find({},))
for con in all_comment:
con['_id'] = str(con['_id'])
#ObjectID형인 _id를 가져오지 못해 반복문으로 일일이 문자열으로 바꿔서 가져오는 코드
return jsonify({'result': all_comment}) # 저장한 값 반환
#팀원 등록
@app.route('/introduce/detail/new', methods=["POST"])
def post():
#이미지url 받아오기
img_url = request.form['img_url_give']
#이름 받아오기
name = request.form['name_give']
#소개1 받아오기
introduce_1 = request.form['introduce_1_give']
#소개2 받아오기
introduce_2 = request.form['introduce_2_give']
doc = {
'img_url' : img_url,
'name' : name,
'introduce_1': introduce_1,
'introduce_2': introduce_2
}
#dictionary형태로 저장
db.luckey_users.insert_one(doc)
return jsonify({'msg' : '팀원추가 완료!'})#성공시 메세지 출력
if __name__ == '__main__':
app.run('0.0.0.0',port=5001,debug=True)