[Express] 18. Delete Comment Fetch

Fetch 형식으로 comment delete

 파일명: commentController.js

const commentModel = require('../models/commentModel.js');

module.exports = {
    createComment: async (req, res) => {
        const topicId = req.params.topic_id;
        const newCommentData = req.body;
        const newComment = await commentModel.createComment(topicId, newCommentData);

        //res.redirect(`/topic/read/${topicId}`);
        res.json({ commentId: newComment.insertId });
    },
    deleteComment: async (req, res) => {
        const commentId = req.params.comment_id;    

        // const comment = await commentModel.getComment(commentId);  
        await commentModel.deleteComment(commentId);    

        // res.redirect(`/topic/read/${comment.topic_id}`); 더이상 redirect를 할 필요가 없어짐
        res.json({success: true});	//서버 클라이언트에게 json 형식의 응답을 보냄
    }
}

 

 

 파일명: topic.ejs

<link rel="stylesheet" href="/css/input.css">

<h1><%= topic.title %></h1>
<p><%= topic.content %></p>

<form action="/topic/delete/<%= topic.topic_id %>" method="post">
    <button>Delete</button>
    <a href="/topic/update/<%= topic.topic_id %>">Update</a>
</form>

<div class="comment-container">
    <% for(let comment of comments) { %>
        <div id="<%= comment.comment_id %>" class="comment-div">
            <div>
                    <p><b><%= comment.username %></b></p>
                    <p><%= comment.content %></p>
            </div>
            <button onclick="deleteComment('<%= comment.comment_id %>')">Delete</button>
        </div>
    <% } %>
</div>

<input type="text" name="username" id="comment-username" class="input-text" placeholder="username...">
<textarea name="content" id="comment-content" class="input-textarea" cols="30" rows="3" placeholder="content..."></textarea>
<button onclick="onCreateComment('<%= topic.topic_id %>')">Submit</button>

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

>> button을 감싸던 form태그를 제거하고, onclick으로 comment_id를 전달

 

 파일명: comment.js

const deleteComment = async (commentId) => {
    const targetComment = document.getElementById(commentId);
    const url = `/comment/delete/${commentId}`;
    const res = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
    });
    if(res.ok) {
        targetComment.remove();
    }
}

const onCreateComment = async (topic_id) => {
    const usernameInput = document.getElementById('comment-username');
    const contentInput = document.getElementById('comment-content');

    const url = `/comment/create/${topic_id}`;
    const res = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({username: usernameInput.value, content: contentInput.value})
    });

    if(res.ok) {
        const { commentId } = await res.json();
        displayComment(usernameInput.value, contentInput.value, commentId);   //새로고침 없이 comment를 화면에 갱신
        usernameInput.value = '';   //username 입력칸 공백
        contentInput.value = '';    //content 입력칸 공백
    }
}

/*
<div class="comment-div">
    <div>
            <p><b><%= comment.username %></b></p>
            <p><%= comment.content %></p>
    </div>
    <form action="/comment/delete/<%= comment.comment_id %>" method="post">
        <button>Delete</button>
    </form>
</div>
*/

const displayComment = (username, content, commentId) => {
    const commentContainer = document.createElement('div');
    commentContainer.className = 'comment-div';
    commentContainer.id = commentId;
    const commentContent = document.createElement('div');

    const usernameP = document.createElement('p');
    usernameP.innerHTML = `<b>${username}</b>`;

    const contentP = document.createElement('p');
    contentP.innerText = content;

    commentContent.appendChild(usernameP);
    commentContent.appendChild(contentP);

    const deleteBtn = document.createElement('button');
    deleteBtn.innerText = 'Delete';
    deleteBtn.onclick = () => deleteComment(commentId);    //deleteComment 함수 등록

    commentContainer.appendChild(commentContent);
    commentContainer.appendChild(deleteBtn);

    //실제 화면에 반영
    const commentWrapper = document.querySelector('.comment-container');
    commentWrapper.appendChild(commentContainer);
}

>> deleteComment 함수를 새로 정의하여 fetch 형식으로 comment 삭제 -> redirect 없이 바로 삭제 가능