Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

SYDev

[Express] 16. Create Comment Fetch 본문

대딩코딩/웹개발 스터디

[Express] 16. Create Comment Fetch

시데브 2023. 12. 4. 16:49

Ajax 방식으로 Create Comment

  • Ajax(Asyncronous JavaScript ans XML): 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나로, 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
  • 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시

 

 파일명: 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 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>
    <% } %>
</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>

>> submit 버튼을 누를 시에 static 파일이 모여있는 디렉토리인 public 하위 경로에 있는 comment.js 파일에 정의된 onCreateComment 함수가 실행됨

>> main.js에 

app.set("layout extractScripts", true);

 

을 추가하고

 

index.js의 body 태그 사이에 이전(스타일 설정)과 비슷하게 

<body>
	<%- script %>
</body>

다음과 같이 script 태그를 추가하면 script 태그를 템플릿 확장 문법에 적용할 수 있다.

 

 

 파일명: comment.js

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

    const url = `/comment/create/${topic_id}`;
    const res = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({username: username, content: content})	//객체의 내용을 Json 형식의 문자열로 변환하여 전달
    });

    if(res.ok) {
        const result = await res.json();
        console.log(result);
        displayComment();   //새로고침 없이 comment를 화면에 갱신
    }
}

const displayComment = () => {
    console.log('haha');
}

>> fetch는 원격 API를 간단하게 호출하는 함수

>> 첫번째 인자로 url, 두번째 인자로 options 객체를 받고, Promise 타입의 객체를 반환

>> promise 객체를 반환하므로, asynce/await 문 사용 가능

>> fetch 함수가 정상적으로 객체를 반환했다면 아래 displayComment를 실행

 

이제 createComment에서 redirect하던 방식을 다음과 같이 변경할 수 있다.

 

 파일명: 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}`);
    }
}

 

 

 파일명: commentModel.js

const db = require('../config/db.js');

module.exports = {
    createComment: async (topicId, newCommentData) => {
        const query = 'INSERT INTO Comments(username, content, topic_id) VALUES(?, ?, ?);';
        const newComment = await db.query(query, [newCommentData.username, newCommentData.content, topicId]);

        return newComment[0];
    },
    getComments: async (topicId) => {
        const query = 'SELECT * FROM Comments WHERE topic_id=?;';
        const comments = await db.query(query, [topicId]);

        return comments[0];
    },
    deleteComment: async (commentId) => {
        const query = 'DELETE FROM Comments WHERE comment_id=?;';
        await db.query(query, [commentId]);
    },
    getComment: async (commentId) => {
        const query = 'SELECT * FROM Comments WHERE comment_id=?;';
        const comment = await db.query(query, [commentId]);

        return comment[0][0];
    }
}

 

>> displayComment 함수가 실행되어 로그가 정상적으로 출력되는 것을 확인할 수 있다!

참고자료

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

[Javascript] fetch() 함수로 원격 API 호출하기

fetch() 함수로 원격 API 호출하기 서버단에서 대신 API를 호출해주기 보다는 클라이언트 단에서 직접 API를 호출하는 경우가 많다. (소위 Ajax로 브라우저에서 직접 비동기로 HTTP 통신을 하기도 한다.

frogand.tistory.com

 

'대딩코딩 > 웹개발 스터디' 카테고리의 다른 글

[Express] 18. Delete Comment Fetch  (1) 2023.12.04
[Express] 17. Display Comment Fetch  (0) 2023.12.04
[Express] 15. Delete Comment POST  (0) 2023.12.01
[Express] 14. Create Comment POST  (0) 2023.12.01
[Express] 13. Routing  (0) 2023.12.01
'대딩코딩/웹개발 스터디' Related Articles more