4일차.
미니프로젝트로 팀소개 웹페이지가 완성되었다.
추가된 기능으로 응원댓글 남기는 항목이 생겼다.
팀원이 만든 코드를 분석해서 공부하자
아직 약 1달 된 뉴비라 용어같은건 나의 말로 적었다
메인페이지 코드 분석
응원댓글 코드분석
패키지_bson
- pymongo패키지 설치 시 같이 설치됨.
- DB에 데이터 생성 시 생기는 ObjectId값을 임포트함
from bson.objectid import ObjectId댓글 저장
@app.route('/comments', methods=['POST'])
def post_comment():
comment_receive = request.form['comment_give']
name_receive = request.form['name_give']
time_receive = request.form['time_give']
doc = {
'comment': comment_receive,
'name': name_receive,
'time': time_receive
}
comment_id = db.comments.insert_one(doc).inserted_id
return jsonify({'comment_id': str(comment_id)})- 클라이언트에서 comment_give / name_give/ time_give로 받은걸 DB에 저장
.inserted_id고유 아이디까지 저장된걸 문자열로 바꿔서 클라이언트로 다시보내.str( )파이썬 내장함수. 정수나 실수를 문자열로 바꿔줌
function post_comment() { //등록버튼 onclick 함수
let comment = $('#comment').val(); //서버로 보낼 변수 설정
let name = $('#name').val();
let time = new Date().toLocaleString();
$.ajax({
type: 'POST',
url: '/comments',
data: {comment_give: comment, name_give: name, time_give: time},
success: function (response) {
console.log(response); // DB에 저장된 데이터의 아이디값을 문자열로 받아서 콘솔에 찍어
window.location.reload();
},
});
}new Date()새로운 date 객체 생성.toLocaleString()날짜, 시간 나타내는 문자열을 지정된 형태로 반환하는 매서드.new Date()-->Thu Nov 03 2022 12:06:46 GMT+0900 (한국 표준시)
new Date().toLocaleString()-->2022. 11. 3. 오후 12:06:46
등록버튼을 누르면 이름과 댓글에 작성된 값이 서버로 넘어가서 시간까지 3가지 데이터가 고유의 ObjectId를 갖고 DB에 저장된다
댓글 조회
@app.route('/comments', methods=['GET'])
def show_comment():
comment_list = list(db.comments.find({}))
for comment in comment_list:
comment['_id'] = str(comment['_id'])
return jsonify({'comments': comment_list})- id포함해서 리스트를 모두 불러오는데 리스트 각 항목의 아이디를 문자열로 바꿔줘
$(document).ready(function(){
show_comment();
});
function show_comment() {
$.ajax({
type: 'GET',
url: '/comments',
data: {},
success: function (response) {
let rows = response['comments']; //서버에서 받은 comment_list를 rows로 변수 설정
let length = rows.length; //항목(db에 저장된 데이터 수) 개수 변수 설정
$('#total-comment').text('댓글 ' + length); //변수 설정한거 text형태로 붙여
for (let i = 0; i < rows.length; i++) { //for문을 돌려보자
let comment_id = rows[i]['_id']; //db에 저장된 각 데이터 고유 id값
let comment = rows[i]['comment']; //db에 저장된 각 값
let name = rows[i]['name'];
let time = rows[i]['time'];
let temp_html = `<blockquote class="blockquote mb-0">
<p id="${comment_id}">${comment}</p>
<form class="hidden-comment"><textarea id="${comment_id}-hidden">${comment}</textarea>
<footer class="blockquote-footer">${name} (${time})</footer>
<buttontoken interpolation">${comment_id}')" type="button" id="${comment_id}-update-btn" class="btn btn-outline-warning">수정</button>
<buttontoken interpolation">${comment_id}-hidden')" type="button" id="${comment_id}-register-btn" class="btn btn-outline-dark">등록</button>
<buttontoken interpolation">${comment_id}')" type="button" id="${comment_id}-delete-btn" class="btn btn-outline-danger">삭제</button>
</form>
</blockquote>
<hr>`;
$('#comments-box').prepend(temp_html); //변수설정한 값을 넣어서 붙여
document.getElementById(comment_id + '-hidden').style.display = 'none';
document.getElementById(comment_id + '-register-btn').style.display = 'none';
}
},
});
}- 자바스크립트에서 특정 ID의 텍스트 상자 값을 가져올 때
document.getElementById("id").value를 이용한다. document.getElementById("id")제어하려는 id명에style.display를 붙여 속성값을 넣어준다.
-- 영역을 숨길 때는 속성값에none을 보여줄 때는 속성값에block을 대입한다.
document.getElementById설정 안했을 때
댓글 삭제
@app.route('/comments/delete', methods=['POST'])
def delete_comment():
comment_id_receive = request.form['comment_id_give']
db.comments.delete_one({'_id': ObjectId(comment_id_receive)}) #_id가 ObjectId(받아온 id값)인 애를 삭제해라
return jsonify({'msg': '댓글 삭제 완료'}) function delete_comment(comment_id) {
$.ajax({
type: 'POST',
url: '/comments/delete',
data: {comment_id_give: comment_id},
success: function (response) {
window.location.reload();
},
});
}delete_comment(comment_id)함수가 삭제버튼에 들어가있는 함수인데 ( ) 안에 변수 설정을 하고
(그 변수는 결국 ${comment_id} 인거임. 그래서 현재 함수 ( ) 안에 다른 변수 이름으로 설정을 해도 받는 애는 ${comment_id} 이거)
그걸 _give데이터로 보낸 후 함수가 작동하면 새로고침까지.삭제 버튼을 누르면 DB에서 데이터가 삭제됨. 새로고침을 하면 댓글 조회 기능에서 빠지게 됨
(왜냐? 데이터가 없어졌으니까 조회가 안되지)
댓글 수정_등록버튼
@app.route('/comments/update', methods=['POST'])
def update_comment():
comment_id_receive = ObjectId(request.form['comment_id_give'])
comment_receive = request.form['comment_give']
db.comments.update_one({'_id': comment_id_receive}, {'$set': {'comment': comment_receive}})
#db에 저장된 데이터 중_id가 받아온 id를 찾아 '코멘트'를 받아온 코멘트로 수정
return jsonify({'msg': '댓글 수정 완료'})function update_comment(comment_id) {
document.getElementById(comment_id).style.display = 'none';
document.getElementById(comment_id + '-hidden').style.display = 'block';
document.getElementById(comment_id + '-update-btn').style.display = 'none';
document.getElementById(comment_id + '-register-btn').style.display = 'block';
document.getElementById(comment_id + '-delete-btn').style.display = 'none';
}
//자바스크립트에서 특정 ID의 텍스트 상자 값을 가져올 때 위 예제와 같이document.getElementById("id").value를 이용한다.
//위에서부터 순서대로 id값에 따라 보여지고 안보여지고를 설정한 것
//(입력한 댓글이 보이는 칸, 댓글 수정하는 칸, 수정버튼, 등록버튼, 삭제버튼)
function register_updated_comment(comment_id_hidden) { //등록버튼함수
let comment = document.getElementById(comment_id_hidden).value;
//onclick 함수에 ( )에 있는 애는 ${comment_id}-hidden id="${comment_id}-
$.ajax({
type: 'POST',
url: '/comments/update',
data: {comment_id_give: comment_id_hidden.slice(0, -7), comment_give: comment},
success: function (response) {
window.location.reload();
},
});
document.getElementById(comment_id).style.display = 'block';
document.getElementById(comment_id + '-hidden').style.display = 'none';
document.getElementById(comment_id + '-update-btn').style.display = 'block';
document.getElementById(comment_id + '-register-btn').style.display = 'none';
document.getElementById(comment_id + '-delete-btn').style.display = 'block';
}
-
.slice( ): 주어진 배열의 (start, end) start index부터 end index까지 (end는 포함하지 않음) 새로운 배열 객체를 반환ex) const test = ['안', '녕', '하', '셈'];
양수 index -> 0, 1, 2, 3
음수 index -> -4, -3, -2, -1
test.slice (0, -2)
-> (2) ['안', '녕']
test.slice (0, 3)
-> (2) ['안', '녕'. '하'] -
그래서 원래 코드로 돌아가서
.slice가 붙은 이유는comment_id에 붙어있는hidden을 빼기 위해서다(?)
댓글 수정 및 삭제를 할 때 고유 ID 값을 반환하는 방법인데 애초에 댓글이 생성될 때 번호를 부여하는 방법은 어떨까 생각했다. 그럼 뭔가 코드가 간단해지지 않을까? ~그치만 해보진 않았다. 코드 분석하는데 시간이 꽤 걸려서..ㅎㅎㅎ~
팝업띄우기
- 메인페이지에서 사진을 클릭하면 각자 개인페이지의 팝업이 생기게 하는 기능
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)Flask코드 내의render_template모듈을 사용
@app.route('/popup1')
def popup2():
return render_template('Profile_SW.html')function show_member1(){
window.open("/popup1" ,"_blank", "width=2600,height=2100");
}window.open("URL" ,"새로운 창으로", "크기지정")
개인페이지 방명록 댓글은 내가 만든 코드에서 팀으로 코드 합칠 때 데이터베이스 연결만 수정해서 따로 분석하지 않았다.
마무리
드디어 마무리 시간이다.
처음 보는 코드가 한가득이라
뭐가 뭐랑 연결되고 이 코드는 어떤 역할을 하는지 구글링하느라 시간이 꽤 걸렸다.
그래도 좋은 기능을 하는 코드를 알게되어서 좋다.
예를들자면 응원댓글에서 댓글 수를 표현하는 방법이라던지
수정을 눌렀을 때 보이지 않던 등록 버튼이 나오게 한다던지 등등..
새로운 창으로 팝업되게 html을 연결하는 것도 간단하지만 몰랐던 코드였기 때문에
알아가는게 많아서 좋은 분석타임이었다.
코드 분석을 이렇게 하는게 맞는가 싶긴 하지만
처음이고, 정해진 방법은 없지 않을까 싶다
어차피 내가 볼 것, 내가 잘 알아보고 기록하면 그만 아닐까...😁
기록하자기록해!