[미니프로젝트] 팀 소개 웹페이지 만들기_4~5일차 마무리 및 발표(23.05.15~05.18) 그리고 회고(WIL)
5일간의 미니프로젝트 여정이 오늘로 마무리 됐다.
추상적으로 만들었던 와이어프레임을 HTML과 CSS를 이용해 프론트를 꾸몄고
막막할것 같던 CRUD 기능도 파이썬과 ajax,script의 조합으로 완성했다.
그렇게 완성된 메인페이지.
HTML, CSS가 뒤죽박죽으로 섞여있었다. (class 선언을 어떻게하느냐의 중요성에 대해 느끼게 되었다. 풀스택 개발자가 된다면 더더욱 중요할 것이고)
제일 처음 페이지 면적에 대한 이해가 필요했다.
와이어프레임대로 구현을 하기 위해서 몇시간을 만지작거렸던거 같다.
프론트 작업을 하기 위해서는 워크프레임이 가장 중요한것 같았다.
어느 면적을 어느정도 잡아야하는지에 대한 가이드라인이 필요하기 때문이다. 제대로 된 기본 골격을 만들어야 코드가 뒤죽박죽 섞이지 않은 상태에서 효과를 추가하는 등의 세부적인 작업이 가능하기 때문이다.
(작업하면서 건설/설계 디자인과 비슷한 부분이 많다고 생각했다.)
초반에 가로세로 비율을 너무 크게 잡아서 나중에 수정작업을 하느라 고생 좀 했었다. 기존에 만들었던 프론트를 날려버리고 다시 시작했다.
각 구역별로 백그라운드 컬러를 이용해 작업 구역을 설정했다.
<title>상세페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 130px;
background-color: #198754;
}
/* 메인페이지 고정컬러 지우지 말것 */
body {
background-image: linear-gradient(blue, pink, yellow)
}
/* 메인페이지 고정컬러 지우지 말것 */
/* 상단 공백시 백그라운드 컬러 삭제 */
#wrap {
width: 100%;
height: 500px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
background-color: #198754;
}
/* 상단 공백시 백그라운드 컬러 삭제 */
/* 프로필카드 들어갈 곳 */
#nav {
width: 50%;
height: 500px;
background-color: red;
}
/* 프로필카드 들어갈 곳 */
/* 버킷리스트 들어갈 곳 */
#section {
width: 50%;
height: 500px;
background-color: rgb(34, 0, 255);
}
/* 버킷리스트 들어갈 곳 */
/* 댓글박스 들어갈 곳 */
#aside {
width: 100%;
height: 800px;
background-color: tan;
display: flex;
box-shadow: 5px 5px 5px 1px gray;
}
/* 댓글박스 들어갈 곳 */
</style>
<script>
</script>
</head>
<body>
<div class="mytitle">
<!-- 들어갈거 없으면 공백 -->
<!-- 들어갈거 없으면 공백 -->
<!-- 들어갈거 없으면 공백 -->
</div>
<header class="header" id="header">
<!-- 들어갈거 없으면 공백 -->
<!-- 들어갈거 없으면 공백 -->
<!-- 들어갈거 없으면 공백 -->
</header>
<div id="wrap">
<!-- 들어갈거 없으면 공백 -->
<!-- 들어갈거 없으면 공백 -->
<!-- 들어갈거 없으면 공백 -->
<!-- 들어갈거 없으면 공백 -->
<div id="nav">
<!-- 프로필카드 넣어주세요 -->
<!-- 프로필카드 넣어주세요 -->
<!-- 프로필카드 넣어주세요 -->
</div>
<div id="section">
<!-- 버킷리스트 넣어주세요 -->
<!-- 버킷리스트 넣어주세요 -->
<!-- 버킷리스트 넣어주세요 -->
</div>
</div>
<div id="aside">
<!-- 댓글박스 넣어주세요 -->
<!-- 댓글박스 넣어주세요 -->
<!-- 댓글박스 넣어주세요 -->
</div>
</body>
</html>이런식으로 주석을 사용하여 각 구역별로 밑작업을 통해서 HTML과 CSS를 쌓아나가며 완성했었다.
CSS에 다양한 기능들도 사용해볼수 있었다.
text-shadow나 box-shadow를 이용해 글자나 상자에 네온사인 기능도 추가해 보았고 :hover를 통해 마우스 액션에 따라 반응하는 기능도 구현 할 수 있었다.
color: #fff;
text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;(네온사인 CSS 코드)
이제 네임카드에 있는 이름을 눌러서 상세 페이지로 이동해보겠다.
상세 페이지에 대해서는 팀원들이 구현해냈다.
와이어 프레임대로 구성을 맞추고 틀을 잡아 작업을 했다.
상세페이지에는 꼭 추가되야할 기능들이 있었다
CRUD 말 그대로
생성하기(Create) 읽기(read) 수정하기(Update) 삭제하기(Delete)
//ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ만들기ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData();
formData.append("name_give", name);
formData.append("comment_give", comment);
fetch('/guestbook-l', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
alert(data["msg"]);
window.location.reload()
});
}
//ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ만들기ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
//ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ조회하기ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
function show_comment() {
$.ajax({
type: 'GET',
url: '/guestbook-l',
data: {},
success: function (response) {
let rows = response['result']
$('#comment-list').empty();
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let comment = rows[i]['comment']
let num = rows[i]['num']
let temp_html = `<tr>
<td>${name}</td>
<td>${comment}</td>
<td><button onclick="deleteStar(${num})" type="button" class="btn-light" id="delete-btn">X</button></td>
</tr>`
$('#comment-list').append(temp_html)
}
}
})
}
//ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ조회하기ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
//ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ삭제버튼ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
function deleteStar(num) {
if (confirm('댓글을 정말로 삭제하시겠습니까?')) {
$.ajax({
type: 'POST',
url: '/guestbook-l/delete',
data: {
delete_give: num
},
success: function (response) {
alert(response['msg']);
window.location.reload();
}
});
}
}
//ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ삭제버튼ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
//ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ수정버튼ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
function posting3() {
let name = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData();
formData.append("name_give", name);
formData.append("comment_give", comment);
$.ajax({
type: "POST",
url: "/comment/update",
data: { name_give: name, comment_give: comment },
success: function (response) {
let temp_html = `<tr>
<td>${name}</td>
<td>${comment}</td
</tr>`
$('#comment-list').append(temp_html)
alert(response['msg'])
window.location.reload();
}
})
}
//ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ수정버튼ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ# ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ생성하기(Create)ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
@app.route("/guestbook-l", methods=["POST"])
def guestbookl_post():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
comment_list = list(db.fan_l.find({},{'_id':False}))
count = len(comment_list) + 1
doc = {
'num': count,
'name': name_receive,
'comment': comment_receive
}
db.fan_l.insert_one(doc)
return jsonify({'msg': '저장 완료!'})
# ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ생성하기(Create)ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
# ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ조회하기(read)ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
@app.route("/guestbook-l", methods=["GET"])
def guestbookl_get():
all_comments = list(db.fan_l.find({},{'_id':False}))
return jsonify({'result':all_comments})
# ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ조회하기(read)ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
# ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ삭제하기(Delete)ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
@app.route('/guestbook-l/delete', methods=['POST'])
def deletel_star():
delete_receive = request.form['delete_give']
db.fan_l.delete_one({'num': int(delete_receive)})
return jsonify({'msg': '삭제 완료!'})
# ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ삭제하기(Delete)ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
# ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ수정하기(update)ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ
@app.route('/comment/update', methods=["POST"])
def comment_update():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
db.fan_l.update_one({'name':name_receive},{'$set':{'comment':comment_receive}})
return jsonify({'msg': '수정완료!'})
# ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ수정하기(update)ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ4가지 기능을 만들어야했고 CRD 까지 구현을 해서 버킷리스트와 댓글에 적용하였다.
미니프로젝트 발표날인 오늘까지는 수정하기 기능을 만들지 못했었지만
발표 이후 수정하기 기능까지 구현을 완료한 상태이다.
미니프로젝트 발표중에 문제가 조금 있었다.
버킷리스트와 댓글창에 구현된 CRD 기능이 모두 작동하지 않았었다.
git hub을 통해서 파일을 전달 받았지만
시연 테스트를 거치지 않았기 때문이었다
내 노트북 특성상 certifi를 통한 보안 설정이 되어야하는데 시연 테스트를 통한 선행 작업을 진행하지 않았던 탓이다.
다음 프로젝트 때는 반드시 체크리스트를 작성하고 시연테스트에 임하는게 좋을것 같다.
무에서 유를 창조한다. 이것이 웹개발의 또다른 매력인것 같다.
하나하나 쌓아가다보면 분명히 무언가를 만들 수 있다는것.
하지만 아무런 계획이 없는 상태라면 헤메이는 시간이 생긴다는것.
그 또한 배움이 있는 과정이라고 생각하지만
그보다 완벽한 계획 안에서 새로운것을들 추가해 나가는 것이 올바른 개발의 모습이라 생각하는 미니프로젝트 경험이었다.
