🥕 HTML 에서 id 값을 먼저 줘버려서 DB 에 저장된 _id 값을 불러오지 못했다. HTML에서 말고 script 부분에서 id 값을 id = "${db에 저장된 id값이 저장된 변수}" 이런식으로 temp_html 에 저장해주어야 _id 값을 받아올 수 있는 걸 알았다.
🐾 index.html
$(document).ready(function () {
show_main(); //페이지 로딩과 동시에 show_main함수를 실행
});
// 이미지, 이름을 가져오는 함수
function show_main() {
fetch("/introduce/index").then(res => res.json()).then(data => {
let rows = data['result'] //db데이터를 가져와서 리스트 형태로 저장
$('#q1').empty()
rows.forEach((a) => {
let name = a['name']
let img_url = a['img_url']
let _id = a['_id'] //id 값을 받아와준다.
//여기서 들어온 a['_id']값은 app.py에서 형변환 작업이 완료된 str형
console.log(img_url)
let temp_html = `<div id="${_id}" class="col"token interpolation">${_id}')">
<div class="card h-100">
<img
src="${img_url}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${name}</h5>
</div>
</div>
</div>`
//temp_html에서 newTab이라는 Detail로 넘어가는 함수에 매개변수로 id값을 할당하는 모습
//div 자체에도 어떤 오브젝트를 선택했는지 알기위해 id값을 주어 db와 연결
$('#q1').append(temp_html)
})
})
}
function newTab(id) {
alert(id)
//선택한 탭의 유저 id 정보를 localStorage에 저장하는 수단으로 사용
localStorage.setItem('user_id', id);
//localStorage에 key값을 user_id로 매개변수로 받아온 id값을 저장
window.open('detail');
}🐾 detail.html
$(document).ready(function () {
//페이지 로딩과 동시에 실행되는 자리 입니다 show_comment함수를 실행합니다.
show_comment();
show_user();
});
// 위 ready 함수에서 실행되어 페이지 시작시 실행되는 댓글을 가져오는 함수 입니다.
function show_comment() {
fetch('/introduce/comment').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 = ``
$('#comment-list').append(temp_html)
})
})
}
// ready 함수에서 실행되는 이름, 이미지 가져오는 함수
function show_user() {
fetch("/introduce/index2").then(res => res.json()).then(data => {
let rows = data['result']
$('#user').empty()
rows.forEach((a) => {
console.log(a)
let img_url = a['img_url']
let name = a['name']
let introduce_1 = a['introduce_1']
let _id = a['_id']
// 가져온 이미지, 이름을 html에 붙임
let temp_html = `<div id = "${_id}" class="left">
<div class="image-box">${img_url}</div>
<div style="text-align: center;">
<h2>${name}</h2>
<p style="font-size: 20px;">블로그 주소 : </p>
<button class="back-btn">홈으로 이동</button>
</div>
</div>
<!-- 여기까지 좌측페이지 -->
<!-- 여기부터 우측 팀원소개+댓글등록 html -->
<div class="right">
<h2>${introduce_1}</h2>
<textarea name="introduce" id="introducd_1" cols="30" rows="7"></textarea>
<h2>${introduce_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 style="display: block;">댓글등록</button>
</div>
</div>`
$('#user').append(temp_html)
})
})
}🐾 app.py
#상세 페이지 댓글 내려주기
@app.route('/introduce/comment', methods=["GET"])
def id_get():
id_all = list(db.luckey_comment.find({},))
for con in id_all:
con['_id'] = str(con['_id'])
#ObjectID형인 _id를 가져오지 못해 반복문으로 일일이 문자열으로 바꿔서 가져오는 코드
return jsonify({'result': id_all})
#메인페이지 이미지, 이름 내려주기
@app.route("/introduce/index", methods=["GET"])
def main_get():
all_users = list(db.luckey_users.find({},))
for user in all_users:
user['_id'] = str(user['_id'])
#ObjectID형인 _id를 가져오지 못해 반복문으로 일일이 문자열으로 바꿔서 가져오는 코드
return jsonify({'result': all_users}) # 저장한 값 반환
#상세 페이지 이미지, 이름 내려주기
@app.route("/introduce/index2", methods=["GET"])
def get_images():
all_images = list(db.lucky_users.find({}, {'_id': 0, 'img_url': 1, 'name': 1, 'introduce_1': 1, 'introduce_2': 1}))
# MongoDB의 find() 메서드를 사용하여 모든 문서를 조회하고, 결과로 반환되는 문서들 중에서 _id 필드는 제외하고 img_url, name 필드만 가져오도록 설정
return jsonify({'result': all_images})🐰 느낀점
🥕 약속된 시간에 맞춰 기능을 구현 한다는게 정말 어려운 일인걸 알았다. 나는 기능을 구현하지 못했고 나때문에 시간이 늦춰지는걸 경험했다. 아직은 처음배우니까.. 배우는 단계니까..라는 말들로 포장할 수 있지만 오늘 이후에는 이런 말로 자기합리화를 하지 않고 내가 맡은 부분을 시간에 맞춰 구현할 수 있어야 한다. must!!!!
🥕 비록 내가 만든 코드는 써보지도 못하고 보내주어야 했고 구현하는 과정에서 여러 실패와 좌절을 맛보았지만 GET 부분을 맡은건 후회하지 않는다.
🥕 사람들이 JAVA가 더 어렵다는데 본격적으로 들어가면 얼마나 더 실패와 좌절을 맛볼까? 아주 배부르겠다...🥹 JAVA 들어가기 전에 Javascript 의 흐름을 이해하고 넘어가자.
👉🏻 오류 🫠
🥕 지금까지 다양한 오류들을 만났다. 다음에 또 만나지 않길 바라며 정리해야겠다.
🐾 SyntaxError: invalid syntax
- 파이썬 인터프리터가 코드의 구문을 해석하는 동안 잘못된 구문을 발견했을 때 발생
- 오류 메시지가 발생하는 줄과 해당 줄의 이전 줄들을 확인하고, 구문 오류가 있는지 확인해야 합다. 일반적으로 잘못된 구문, 괄호 불일치, 따옴표 누락 등이 오류를 일으키는 주요 원인
🐾 AssertionError: View function mapping is overwriting an existing endpoint function: get
- Flask 애플리케이션에서 엔드포인트 함수를 정의할 때 동일한 엔드포인트에 이미 다른 함수가 매핑되어 있는 경우 발생
- 이 오류는 동일한 URL 경로와 HTTP 메서드에 대해 중복된 함수가 등록되어서 발생합니다.
- Flask 애플리케이션에서 각 엔드포인트는 고유한 URL 경로와 HTTP 메서드 조합에 대해 하나의 함수만 매핑해야 한다.
🐰 오늘의 결의
🥕 미미님, 정은님과 함께 결의를 다지는 모습 화이팅!!!!!
열쩡