1주차 프로젝트를 하며 htrml, css, 자바스크립트의 전반적인 기능들을 체감할 수 있었던 것 같다.
나는 댓글을 달고 수정하고 삭제하는 댓글 CRUD를 담당하였다.
댓글을 입력하고 보여주는 것들은 웹개발 강의를 통해 배웠기에 쉽게 해결할 수 있었지만 이를 삭제하고 변경하는 기능에 대한 알고리즘을 구상하는 데에 많은 시간이 걸렸다.
토큰에 대한 개념도 새로 배울 수 있었고 쿠키를 이용하여 로그인을 유지하고 토큰을 활용하여 유저를 식별하는 심화적인 것들을 자율적인 학습과 구글링을 통해 구현할 수 있었다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
<link href='https://fonts.googleapis.com/css?family=Indie Flower' rel='stylesheet'>
<style>
.banner {
width: 100%;
height: 250px;
background-color: #FFCD29;
background-position: center;
background-size: cover;
}
.title {
align-items: center;
display: flex;
flex-direction: column;
font-family: Indie Flower;
font-weight: 900;
font-size: 100px;
padding-top: 40px;
}
</style>
</head>
<body>
<section>
<div class="banner" style="padding-bottom:1rem;margin:auto;">
<button type="button" style="float:right; margin-top: 20px; margin-right: 40px"
class="btn btn-outline-secondary">마이페이지
</button>
<h1 class="title">joy club</h1>
</div>
</section>
</body>
</html>
<html lang="en">
<head>
<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>
<!-- Webpage Title -->
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<style>
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 3px 0px black;
padding: 20px;
}
.mypost > button {
margin-top: 15px;
}
.mypost1 {
width: 95%;
max-width: 500px;
margin: 20px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
display: none;
}
.row > button {
margin-top: 15px;
}
.row {
width: 95%;
max-width: 500px;
margin: auto;
}
.mycomment {
width: 100%;
max-width: 500px;
margin: auto;
}
</style>
<script>
$(document).ready(function () {
show_comment();
});
function save_comment() {
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/main/comment/post',
data: {'comment_give': comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
function show_comment() {
$('#comment-list').empty()
$.ajax({
type: "GET",
url: "/main/comment/get",
data: {},
success: function (response) {
let rows = response['comments']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let n = rows[i]['num']
let comment = rows[i]['comment']
let temp_html = ` <dl class="row" >
<dt class="col-sm-3">${name}</dt>
<dd class="col-sm-9">${comment}
<buttontoken interpolation">${n})">수정하기</button></dd>
</dl>
<div class="mypost1" id="advise${n}">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="new_comment${n}"
style="height: 100px"></textarea>
<label for="floatingTextarea2">댓글 작성</label>
</div>
<buttontoken interpolation">${n})" type="button" class="btn btn-success">삭제하기</button>
<buttontoken interpolation">${n})" type="button" class="btn btn-success" >수정 완료</button>
<buttontoken interpolation">${n})" type="button" class="btn btn-success">닫기</button>
</div>`
$('#comment-list').append(temp_html)
}
}
});
}
function upd1(n) {
$.ajax({
type: "POST",
url: "/main/comment/idcheck",
data: {'num_give': n},
success: function (response) {
if (response['msg'] == 'Yes') {
let A = '#advise' + String(n)
$(A).show()
}
else {
alert('본인이 작성한 댓글이 아닙니다')
}
}
});
}
function upd_cancel(n) {
let A = '#advise' + String(n)
$(A).hide()
}
function upd2(n) {
let A = '#new_comment' + String(n)
let new_comment = $(A).val()
$.ajax({
type: "POST",
url: "/comment/advise",
data: {'num_give': n, 'comment_give': new_comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
function del(n) {
$.ajax({
type: "POST",
url: "/comment/delete",
data: {'num_give': n},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
</script>
</head>
<body>
<div class="mypost" id="append">
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="height: 100px"></textarea>
<label for="floatingTextarea2">댓글 작성</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-success">댓글 달기</button>
</div>
<div class="mycomment" id="comment-list">
</div>
</body>
</html>큰 틀을 이해할 수 있었지만 아직 개념적인 부분에 있어 미숙하고 이해력이 낮다. 앞으로 그러한 부분들을 채워나가며 커뮤니케이션이 원활히 될 수 있도록 역량을 쌓아나가야겠다.
chill~