TIL&WIL
2023-05-15 TIL (내일배움캠프 미니프로젝트)
blues_jun
2023. 5. 15. 21:17
오늘 학습한 내용
- 미니 프로젝트
내용
프로젝트 전반적인 내용 소개
https://dao-blog.tistory.com/6
나의 역할
- 팀 소개 페이지의 메인페이지 역할을 맡았음
- 정적 페이지가 아닌 db와 연동하여 프로필 정보를 가져오는 코드를 구현해야함
오늘 구현한 코드는 다음과 같다.
1. HTML
더보기
<!-- 메인페이지 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<script src="https://kit.fontawesome.com/5547fa07a6.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/style.css">
<title>소개하조 메인페이지</title>
<style>
* {
font-family: 'Jua', sans-serif;
}
@media (min-width: 992px) {
.container {
width: 940px;
}
}
.welcome {
margin: 80px auto !important;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: green;
display: inline-block;
transition: all 0.3s linear;
}
.circle:hover {
transform: scale(1.2);
}
a {
text-decoration: none;
list-style: none;
color: black;
}
a:hover {
color: black;
}
ul,
ol,
li {
list-style: none;
margin: 0;
padding: 0;
}
ul.myMenu>li {
display: inline-block;
padding: 5px 10px;
background: #eee;
border: 1px solid #eee;
text-align: center;
position: relative;
}
ul.myMenu>li:hover,
ul.myMenu>a>li:hover {
background: #fff;
}
ul.myMenu>li ul.submenu {
display: none;
position: absolute;
top: 30px;
left: 0;
}
ul.myMenu>li:hover ul.submenu {
display: block;
}
ul.myMenu>li ul.submenu>a>li {
display: inline-block;
width: 80px;
padding: 5px 10px;
background: green;
border: 1px solid #fff;
text-align: center;
transition: .5s
}
ul.myMenu>li ul.submenu>a>li:hover {
background: blue;
}
.menu2 {
cursor: pointer;
}
footer {
margin-top: 100px;
height: 150px;
background-color: green;
}
</style>
<script>
$(document).ready(function () {
members_receive();
});
function members_receive() {
fetch('/members').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#memberbox2').empty()
rows.forEach((a) => {
let membername = a['membername']
let mbti = a['mbti']
let image = a['image']
let temp_html = `<div class="member mx-auto d-flex flex-column">
<a href="#">
<img class="circle"
src="${image}">
</a>
<span class="text-center mt-2">이름 : <strong>${membername}</strong></span>
<span class="text-center mt-2">mbti : ${mbti}</span>
</div>`
$('#memberbox2').append(temp_html)
})
})
}
</script>
</head>
<body>
<div class="container mt-5">
<!-- header start -->
<header class="">
<a href="/" class="d-inline">소개하조</a>
<a href="/" class="d-inline h1">우리는 소개하조</a>
<nav class="" style="background-color: green;">
<ul class="myMenu mt-1 d-flex justify-content-center align-items-center">
<a href="/">
<li class="me-5">메인</li>
</a>
<li class="ms-5 menu2">팀원소개
<ul class="menu2_s submenu">
<a href="#">
<li>김예성</li>
</a>
<a href="#">
<li>서해민</li>
</a>
<a href="#">
<li>김인서</li>
</a>
<a href="#">
<li>김준영</li>
</a>
<a href="#">
<li>주학준</li>
</a>
</ul>
</li>
</ul>
</nav>
</header>
<!-- header end -->
<h2 class=" text-center welcome">환영합니다!</h2>
<div class="memberbox-1" id="memberbox">
<div class="members-1 d-flex justify-content-center" id="memberbox2">
<div class="member mx-auto d-flex flex-column">
<a href="#">
<img class="circle"
src="https://flexible.img.hani.co.kr/flexible/normal/640/664/imgdb/original/2023/0515/20230515500847.jpg">
</a>
<span class="text-center mt-2">이름 : <strong></strong></span>
<span class="text-center mt-2">mbti : </span>
</div>
<div class="member mx-auto d-flex flex-column">
<a href="#">
<img class="circle"
src="https://flexible.img.hani.co.kr/flexible/normal/640/664/imgdb/original/2023/0515/20230515500847.jpg">
</a>
<span class="text-center mt-2">이름 : <strong></strong></span>
<span class="text-center mt-2">mbti : </span>
</div>
<div class="member mx-auto d-flex flex-column">
<a href="#">
<img class="circle"
src="https://flexible.img.hani.co.kr/flexible/normal/640/664/imgdb/original/2023/0515/20230515500847.jpg">
</a>
<span class="text-center mt-2">이름 : <strong></strong></span>
<span class="text-center mt-2">mbti : </span>
</div>
</div>
<div class="members-2 mx-5 d-flex justify-content-center mt-5">
<div class="member mx-auto d-flex flex-column">
<a href="#">
<img class="circle"
src="https://flexible.img.hani.co.kr/flexible/normal/640/664/imgdb/original/2023/0515/20230515500847.jpg">
</a>
<span class="text-center mt-2">이름 : <strong></strong></span>
<span class="text-center mt-2">mbti : </span>
</div>
<div class="member mx-auto d-flex flex-column">
<a href="#">
<img class="circle"
src="https://flexible.img.hani.co.kr/flexible/normal/640/664/imgdb/original/2023/0515/20230515500847.jpg">
</a>
<span class="text-center mt-2">이름 : <strong></strong></span>
<span class="text-center mt-2">mbti : </span>
</div>
</div>
</div>
</div>
<footer></footer>
</body>
</html>2. python
더보기
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://sparta:test@cluster0.ue8jxhg.mongodb.net/?retryWrites=true&w=majority')
db = client.dbsparta
import requests
from bs4 import BeautifulSoup
@app.route('/')
def home():
return render_template('index.html')
@app.route("/members", methods=["GET"])
def members_get():
all_members = list(db.project_2.find({},{'_id':False}))
return jsonify({'result':all_members})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)오류 내용 및 수정해야 할 사항
- temp_html을 사용하여 db를 불러오는 과정에서 레이아웃이 깨지는 상황이 발생함.
- 메인페이지 레이아웃을 조금 수정해야 할 듯
느낀점
오늘 드디어 내일배움캠프가 개강했다.
9 to 9로 공부하는게 정말 쉽지 않았고, 프로젝트를 하면서 여러가지 어려움을 겪었다.
아직 당연히 많이 부족한걸 알기 때문에 항상 배운다는 입장으로 부끄러워하지말고 질문하자.