22일차 댓글 저장해서 페이지에 띄우기, Exception처리

https://blogpack.tistory.com/670

DOM 노드의 생성, 수정, 삭제 기초

 

댓글 추가하려면????

 

테스트-> value로 값을 가져올수 있다

함수를 변수화해보기

 

detail페이지

참고> validation체크! 

 

▶이제  detail.jsp에 있는 자바스크립트 코드를 따로 파일 만들어서 분리하자!!!

 

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>

<div class="container">
	<c:if test="${sessionScope.principal.id == postEntity.user.id}">
		<a href="/post/${postEntity.id}/updateForm" class="btn btn-warning">수정</a>
		
		<form style="display: inline-block" onsubmit="deletePost(${postEntity.id})">
			<button id="btn-delete" class="btn btn-danger" type="submit">삭제</button>
		</form>
		
	</c:if>

	<br />
	<br />
	<div>
		<span>글 번호 : ${postEntity.id}</span> 작성자 : <span><i>${postEntity.user.username} </i></span>
	</div>
	<br />
	<div>
		<h3>${postEntity.title}</h3>
	</div>
	<hr />
	<div>
		<div>${postEntity.content}</div>
	</div>
	<hr />

	<div class="card">
		<form onsubmit="saveComment(${postEntity.id})">
			<div class="card-body">
				<textarea id="reply-text" class="form-control" rows="1"></textarea>
			</div>
			<div class="card-footer">
				<button class="btn btn-primary">등록</button>
			</div>
		</form>
	</div>
	<br />

	<div class="card">
		<div class="card-header">
			<b>댓글 리스트</b>
		</div>
		
		<ul id="reply-box" class="list-group">
		
			<c:forEach var="comment" items="${commentsEntity}">
				
				<li id="reply-${comment.id}" class="list-group-item d-flex justify-content-between">
					<div>${comment.text}</div>
					<div class="d-flex">
						<div class="font-italic">작성자 : ${comment.user.username} &nbsp;</div>
						<c:if test="${principal.id == comment.user.id}">
							<button class="badge" onclick="deleteComment(${comment.id})">삭제</button>
						</c:if>
						
					</div>
				</li>
				
			</c:forEach>
			
		</ul>
		
	</div>
	<br />
</div>

<script src="/js/detail.js"></script>

<%@ include file="../layout/footer.jsp"%>

 

detail.js

	let saveComment =  async (postId) =>  {
		event.preventDefault(); // form 액션 타지마!!
		
		let commentReqDto = {
				text: document.querySelector("#reply-text").value,
				postId: postId
		};
		
		// JSON.parse(제이슨문자열);
		//console.log(JSON.stringify(commentReqDto));
		//let test = JSON.stringify(commentReqDto);
		//console.log(JSON.parse(test));
		
		let response = await fetch("/comment", {
			method: "post",
			body: JSON.stringify(commentReqDto),
			headers: {
				"Content-Type": "application/json; charset=utf-8"
			}
		});
		
		let parseResponse = await response.json();
		
		console.log(parseResponse);
		
		if(parseResponse.code === 1){
			let replyBoxEL = document.querySelector("#reply-box");
		
			let replyItem = document.createElement("li");
			replyItem.id = "reply-"+parseResponse.data.id;
			replyItem.className = "list-group-item d-flex justify-content-between";
			
			let temp = `
				<div>${parseResponse.data.text}</div>
					<div class="d-flex">
						<div class="font-italic">작성자 : ${parseResponse.data.user.username} &nbsp;</div>
							<button class="badge" onclick="deleteComment(${parseResponse.data.id})">삭제</button>	
					</div>
			`;
			
			replyItem.innerHTML = temp;
			replyBoxEL.prepend(replyItem);
		}
	}

	async function deleteComment(commentId){
		
		let response = await fetch("/comment/"+commentId, {
			method: "delete"
		});
		
		let parseResponse = await response.text();
		
		if(parseResponse === "ok"){
			//location.reload();
			let deleteEL = document.querySelector("#reply-"+commentId);
			deleteEL.remove();
			console.log(deleteEL);
		}
	}


	async function deletePost(postId){
		event.preventDefault();
		
		let response = await fetch("/post/"+postId, {
			method: "delete"
		});
		
		let parseResponse = await response.text();
		
		if(parseResponse === "ok"){
			location.href = "/";
		}else{
			alert("삭제실패");
		}
	}

 

Exception처리!!! 

프로그램은 

런타임시 오류는 사용자와 상호작용할때! 즉 데이터가 동적으로 들어올때! 

try안에 내가 실행할 코드를 넣는다. 

통신이 일어나면!! try-catch문에 넣는다!!!!!! 

db에 데이터 들어가는것도 통신!!! 메모리에 있는 데이터를 하드디스크에 기록해야하니까! 

데이터로 받은 데이터를 db에 저장! 

이때 통신이 발생하니까 try-catch문으로 묶는다!! 

 근데 하나의 함수 안에 언제는 데이터 리턴을 하고 언제는 파일 리턴을 해야하니까!! 어떻게???

 

Exception Controller를 만들자