[ javascript / html / jsp] html template 사용하여 동적으로 댓글 작성 창 생성하기

개발환경 

- sts4 

- jsp 

- jstl 

- js 

 

댓글 수정, 대댓글 작성의 경우 동적으로 해당 댓글 밑에 입력 창을 만들었다가 없앴다가 하는 작업이 필요하다. 

 

원래는 수정, 대댓글 입력창을 따로 활용했었지만 

 

리팩토링 과정에서 하나로 통합하는 것이 좋을 것 같다는 피드백을 받아 진행해보았다. 

 

먼저 내가 동적으로 활용할 템플릿을 생성해주었다. 

<template> 태그로 묶으면 간단하게 템플릿이 완성된다. 

이 템플릿은 화면에 노출되지 않으며, 이를 화면에 보이게 하기 위한 importNode라는 작업을 한 뒤 화면에 동적으로 노출시킬 수 있다.  

<template id="modifyAddForm">
        <div class="commentForm">
            <form action="#" id="modifyAddForm" class="">
             <button id="cancelCommentAdd" class="btn btn-primary btn float-right ml-1" onclick="cancelView()">취소</button>
                    <button id="submitButton" class="btn btn-primary btn float-right ml-1">완료</button>
                <div>
                 <div>
                    <label id="id" name="id"> 
                   <!--  <input type="hidden" id="boardId" name="boardId" > -->
                    <div type="text" class="mini3" id="id" name="id">
                    </div>
                    </label>		
                    </div>
                    <textarea id="commentContent"  cols="30" row="5" name="commentContent" class="form-control flex" style="width: 90%" placeholder="대댓글 내용을 작성해주세요." maxlength="300"></textarea>
               </div>
            </form>
         </div>
</template>

 

// 템플릿을 활용하기 위해 템플릿 태그의 id 값으로 가져온다. 
let template = document.querySelector('#modifyAddForm');

// 템플릿 요소의 콘텐츠를 복사해서 새로운 노드로 가져온다.  (쉽게 말해 비활성화 되어있는 template을 활성화하는 과정이라고 생각하면 이해가 된다)
let newContent = document.importNode(template.content, true);

 

template.content를 한 이유 

<template> 내부의 콘텐츠는 DocumentFragment로 감싸져 있어, 이를 사용하기 위해서는 template.content를 통해 접근하기 때문이다. 

 

template.content의 역할 

template.content는 DocumentFragment를 반환한다. DocumentFragment는 가벼운 DOM 객체로, 문서의 일부로 간주되지 않으며, DOM에 삽입되기 전까지는 메모리에만 존재한다. 이를 통해 여러 노드를 한 번에 조작하고 삽입할 수 있다.

 

실제로 꺼내서 쓰기 이해 template를 콘솔로그로 찍어봤더니 DocumentFragment 객체가 뽑혀 이를 검색해본 뒤 꺼내는 방법을 알게되었다. 

 

템플릿 요소를 꺼낸 뒤

 

이렇게 해당 템플릿을 붙일 노드에 appenChild를 해주었다. 

 

#commentDiv

 

 

수정 

댓글 수정

댓글 수정의 경우에는 본문내용, 아이디, 작성일을 안 보이게 설정했다.

 

 

 

답글 작성의 경우에는 모든 내용이 보이고 밑에 답글 작성 칸이 보이도록 설정.

 

대댓글 작성

 

function commentCreateView(username, commentId, writer, req) {

	var existingAddForm = document.querySelector('.commentForm');

	if (existingAddForm) {
		return;
	}
	var commentDiv = document.querySelector(`li[data-no="${commentId}"] .commentDiv`);
	var commentHead = document.querySelector(`li[data-no="${commentId}"] .commentHead`);
	var comment = document.querySelector(`li[data-no="${commentId}"] .comment`);
	// 템플릿 활용하기 위해 가져오기
	let template = document.querySelector('#modifyAddForm');
	// 템플릿요소의 콘텐츠를 복사해서 새로운노드로 가져오기 위함 (쉽게말해 비활성화 되어있는 template을 활성화하는 과정)
	let newContent = document.importNode(template.content, true);

	if (req == "reply") {
		let usernameDiv = newContent.querySelector('#id');
		usernameDiv.textContent = "ㄴ To.  @ " + username;
	}

	if (req == "modify") {
		var commentContent = commentDiv.querySelector('#commentContent p').innerText;
		var commentTextArea = newContent.querySelector('#commentContent');
		commentTextArea.textContent = commentContent;
		console.log("commentTextArea : ", commentTextArea);
	}
	let submitButton = newContent.querySelector('#submitButton');
	submitButton.setAttribute('onclick', `commentAdd(` + commentId + `, '` + req + `')`);

	if (req == "reply") {
		commentDiv.appendChild(newContent);
	}
	if (req == "modify") {
		commentDiv.appendChild(newContent);
		comment.style.display = 'none';
		commentHead.style.display = 'none';
	}

}

 

 

부트캠프에서도 프론트를 안해봤는데

일경험 프로그램을 하면서 많이 만져보고 있다...

 

너무 어렵다.. 하루 종일 오늘 이거 하나했네...